アニメーション画面遷移

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が非常に参考になります。

最終更新 ( 2011年5月30日(月曜日) 14:29 )