ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その31:カードフリップアニメーション

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2011年12月26日 from Atelier:Mitsuba

はじめに

こんなアニメーションです。

操作方法

  1. Expression BlendでWindows Phoneプロジェクトを作成します。
  2. ContentPanel内にGridを作成し、Cardと名前を付けました。
  3. さらにCardの中にGridを2つ重なるように作成し、BackとForwardと名付けます。
  4. まずはカードオモテ面Forwardを作成します。
    [カードオモテ面のForward]
    f:id:c-mitsuba:20111226224115p:image
  5. 続いてカードウラ面Backを作成します。
    [カードウラ面のBack]
    f:id:c-mitsuba:20111226224136p:image
  6. ウラからオモテへフリップするストーリーボードを作成します。ForwardtoBackと名付けました。はじめにCardの0秒にキーフレームを打ちます。
    [Cardの0秒目にキーフレームを追加]
    f:id:c-mitsuba:20111226224219p:image
  7. Backの1秒目にキーフレームを打ち、Z-indexを-1に設定します。すると1秒目にForwardが表示されるアニメーションができます。
    [1秒目にBackのZ-indexを-1に設定]
    f:id:c-mitsuba:20111226224256p:image
  8. 続いてCardの2秒目にキーフレームを追加し、Y方向に180度回転させます。実行してみましょう。カードが反転すると同時にオモテ面が表示されます。
    [2秒目のキーフレームにCardにRotationYを180に設定]
    f:id:c-mitsuba:20111226224341p:image
  9. しかし、このままではForwardがY方向に反転しています。この問題を解消するには、まずForwardの1秒目にキーフレームを打ちます。
    [Forwardの1秒目にキーフレームを追加]
    f:id:c-mitsuba:20111226224520p:image
  10. Forwardを選択した状態で、変換パネルからX軸に反転を行います。
    [1秒目にForwardをX軸に沿って反転]
    f:id:c-mitsuba:20111226224604p:image
  11. 実行してみましょう。きちんとカードの表裏がアニメーションによって実現できます。

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ