TransitionFrameの使い方
Curl External Libraryには、アニメーションによる画面遷移が可能なコンポーネントが含まれています。通常の画面の切り替えだけでなく、ダイアログなどのポップアップウィンドウなどにも適用できます。
パッケージのインポートとTransitionFrameクラスの使用
Curl EXTをCurlのアプリケーションで使用するには、「COM.CURL.EXT.TRANSITION-LIBRARY」パッケージのインポートとTransitionFrameクラスを利用します。
まずはTransitionFrameのインスタンスを生成します。
def tf =
{TransitionFrame
background = "white",
border-color = "blue",
border-width = 1px,
transition-effect = {CrossFadeTransitionEffect}
}
次に、このTransitionFrameに遷移する元や先のコンテナ（Frameなど）を追加します。
{tf.add {Frame width=5cm, height=5cm, background="red"}}
{tf.add {Frame width=5cm, height=5cm, background="blue"}}
{tf.add {Frame width=5cm, height=5cm, background="yellow"}}
画面の切り替えは、set-active-screenメソッドによって、アニメーションを伴った画面遷移が可能となります。
|| 引数には、tfにaddされたコンテナの番号（スタートは0）を指定します（左の例では2個目にaddしたFrame）。
{tf.set-active-screen 1}
また、いろいろなエフェクトをTransitionFrameのtransition-effectプロパティに指定することで、アニメーション方法を変更できます。例えば、CrossFadeTransitionEffect、DoorOpenTransitionEffect、Spin3dTransitionEffect、StiffPageTurnTransitionEffect、PageTurnTransitionEffect、ExplodeTransitionEffect／ImplodeTransitionEffectなどがあり、そのほかにも多数のエフェクトが用意されています。
さらに、このエフェクトクラスに、durationやpacingを指定することでアニメーションの速度を変更でき、orientationを指定することでアニメーションの方向を変更できます。特に、pacingを指定すると、徐々に早くすることもできます。
{DoorOpenTransitionEffect duration = 0.5s, pacing = {cubic-bezier 0.5, 1}, orientation = "horizontal"}
アニメーションを用いたウィンドウのポップアップについては、AnimatedViewクラスを利用します。アニメーションのエフェクトはGrowViewAnimatorやfadeViewAnimator、GenieViewAnimatorなどがあります。
def v =
{AnimatedView
{Frame width=3cm, height=3cm, background="red"},
animator = {GrowViewAnimator duration=0.5s, pacing={cubic-bezier 0.5, 1}}
}
{v.show}
なお、サンプルはCurl EXTをダウンロードしたフォルダの以下のフォルダに格納されているので、確認ください。
docs/samples/sample-transition-frame.curl docs/samples/sample-view-animation.curl
