アニメーション・ビュー | CURL DEVELOPER CENTER

動作

透過度を変化させたり、フレームサイズを変化させながら、表示・非表示のできるアニメーションを用いたビューです。

バージョン

Curl Advanced UI 0.5

API説明

AnimationViewクラス

アニメーション的に表示するViewクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

View

プロパティ

なし

メソッド

show-animation (Viewを表示)
    キーワード引数（interval:Time = .002s）：表示間隔
    キーワード引数（repeat:int = 100）：表示までのアニメーション回数
    キーワード引数（pattern:String = “opacity”）：表示パターン (opacity or stretch)
    キーワード引数(finish-proc:#{proc-type {v:AnimationView}:void} = null)
　　戻り値：void

  hide-animation　（Viewを隠す）
    キーワード引数（interval:Time = .002s）：非表示間隔
    キーワード引数（repeat:int = 100）：非表示までのアニメーション回数
    キーワード引数（pattern:String = “opacity”）：非表示パターン (opacity or stretch)
    キーワード引数(finish-proc:#{proc-type {v:AnimationView}:void} = null)
　　戻り値：void

利用方法

AnimationViewクラスを生成し、show-animationメソッドでViewをアニメーションを利用し表示。hide-animationでViewを非表示にします。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTAINERS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{value
     def view1 =
        {AnimationView
            width = 10cm,
            height = 10cm,
            {image source = {url “images/1.png”}}
        }
    def view2 =
        {AnimationView
            width = 10cm,
            height = 10cm,
            {spaced-vbox width = 9cm, height = 9cm,
                {image source = {url “images/2.png”}},
                {TextField}
            }
        }

        {spaced-hbox
            || opacity 透明度を変更しながら表示・非表示
            {CommandButton
                label = “show view (opacity)”,
                {on Action do
                    {view1.show-animation
                        finish-proc =
                            {proc {v:AnimationView}:void
                                {popup-message “loaded!!”}
                            }
                    }
                }
            },
            {CommandButton
                label = “hide view (opacity)”,
                {on Action do
                    {view1.hide-animation
                        finish-proc =
                            {proc {v:AnimationView}:void
                                ||{v.close}
                                {popup-message “hide!!”}
                            }
                    }
                }
            },

            || stretch　（伸張度を変更しながら表示・非表示）
            {CommandButton
                label = “show view (stretch)”,
                {on Action do
                    {view2.show-animation pattern = “stretch”}
                }
            },
            {CommandButton
                label = “hide view (stretch)”,
                {on Action do
                    {view2.hide-animation pattern = “stretch”}
                }
            }
        }
    }
}

このサンプルでは、”show view(xxx)”を押下し、アニメーションを利用したViewの表示、”hide view(xxx)”を押下し、表示しているViewを非表示にします。

サンプル

アニメーションビュー

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API