Curl External Libraryには、アニメーションによる画面遷移ができるコンポーネントが含まれています。画面遷移も通常の画面の切り替えとダイアログなどのポップアップウィンドウなどにも適用できます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使い方

これを利用するには、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)を指定します。（左の例では２個目に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}

 

サンプル

 

ヘルプドキュメントか、もしくはソースコードのdocs/samples/sample-transition-frame.curlやdocs/samples/sample-view-animation.curlが非常に参考になります。