Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「Curl EXT」を使って、効果的な画面遷移とExcelライクな一覧画面を作ってみよう!

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/28 14:00

ダウンロード サンプルソース (3.0 KB)

目次

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:CurlデベロッパーセンターPick Up

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5