試してみよう: ハンドオフ アニメーションとそれ以外のアニメーションの操作

  • [アーティクル]

複数のアニメーション タイムラインで同じプロパティを同時にアニメーション化する場合、0 秒のマークでキーフレームが記録されているかどうかによって移行動作が異なります。次の手順は、ハンドオフ アニメーションとそれ以外のアニメーションの動作を理解するのに役立ちます。

ハンドオフ アニメーションとそれ以外のアニメーションを比較するには

  1. Microsoft Expression Blend で、プロジェクトを開くか、新しいプロジェクトを作成します。詳細については、「新しいプロジェクトを作成する」を参照してください。

  2. F6 キーを押して、アニメーション ワークスペースに切り替えます (F6 キーは、ワークスペースを切り替えるキーです。アニメーション ワークスペース では、[オブジェクトとタイムライン] パネルはアートボードの下に配置されます)。

  3. [オブジェクトとタイムライン] パネルで [ストーリーボードを閉じる] Cc295058.4c066464-3a41-452d-b2e9-e95f6c5659ff(ja-jp,Expression.40).png をクリックします。

    tip noteヒント :

    ストーリーボードが開いているときにプロパティを変更すると、ストーリーボードのタイムライン上のキーフレームに変更が自動的に記録されます。

  4. [ツール] パネルの [楕円] Cc295058.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,Expression.40).png を選択します。アートボードの中央に円を描きます。[プロパティ] パネルの [レイアウト] カテゴリで [Height] および [Width] プロパティを使用して、楕円を真円にできます。クリッピングが発生する場合は、[Margin] プロパティを調整します。

  5. [オブジェクトとタイムライン] パネルの [新規作成] Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,Expression.40).png をクリックします。

    [ストーリーボード リソースの作成] ダイアログ ボックスが表示されます。

  6. [リソース名 (キー)] フィールドに「Double」という名前を入力し、[OK] をクリックします。

    Expression Blend はタイムライン記録モードに入り、再生ヘッド Cc295058.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.40).png は 0 秒のマークに置かれます。記録モード中は、プロパティを設定すると、タイムラインに自動的にキーフレームが記録されます。

  7. 0 秒のマークでキーフレームを設定しないでください。再生ヘッドを 1 秒のマークにドラッグしてください。

  8. [ツール] パネルの [選択内容] Cc295058.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).pngをクリックし、Alt キーを押しながら、楕円の幅が元の幅の 2 倍になるまで、楕円の幅ハンドルをドラッグします。

    1 秒のマークで、ScaleX プロパティにキーフレームが自動的に設定されます。

    tip noteヒント :

    Alt キーを押したままアートボード上のオブジェクトのサイズを変更すると、中心点が維持されます。

  9. [オブジェクトとタイムライン] パネルで、楕円のノードを順に展開して ScaleX ノードを表示します。ScaleX ノードまたはグレーのタイム スパン バーを右クリックし、[繰り返し回数の編集] をクリックします。

    [繰り返し編集] ダイアログ ボックスが表示されます。

  10. タイムラインを無限に繰り返すには、[終了日未定に設定] Cc295058.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(ja-jp,Expression.40).png をクリックして、[OK] をクリックします。

  11. [オブジェクトとタイムライン] パネルの [新規作成] Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,Expression.40).png をクリックします。

    [ストーリーボード リソースの作成] ダイアログ ボックスが表示されます。

  12. [リソース名 (キー)] フィールドに「Quadruple」という名前を入力し、[OK] をクリックします。

    Expression Blend は、元の楕円サイズから開始して 2 番目のタイムラインのタイムライン記録モードに入ります。

  13. 前の手順と同様、0 秒のマークでキーフレームを設定しないでください。再生ヘッドを 1 秒のマークにドラッグしてください。

  14. [ツール] パネルの [選択内容] ツールをクリックし、Alt キーを押しながら、楕円の幅が元の幅の 4 倍になるまで、楕円の幅ハンドルをドラッグします。

    1 秒のマークで、ScaleX プロパティにキーフレームが自動的に設定されます。

  15. ScaleX ノードまたはグレーのタイム スパン バーを右クリックし、[繰り返し回数の編集]、[終了日未定に設定] ボタン、[OK] の順にクリックします。

  16. 次に、アニメーションのトリガーを設定します。既定では、ドキュメントのルートに作成された新しいタイムラインによって、Window.Loaded イベントの [トリガー] パネルにイベント トリガーが追加されます。Double タイムラインにはそのトリガーを使用し、Quadruple タイムラインに新しいトリガーを追加します。

  17. [トリガー] パネルで Window.Loaded トリガーを選択します。トリガーのアクションが、[Window.Loaded の発生時] の下に表示されます。Quadruple.Begin の横にあるマイナス記号をクリックし、そのアクションを削除します。

    これで、アプリケーションが起動すると Double アニメーションは開始しますが、Quadruple アニメーションは開始しません。

    tip noteヒント :

    [アクティブな際のプロパティ] が表示されない場合は、[トリガー] パネルのサイズを調整する必要があります。サイズを調整するには、パネルの境界とパネル内の境界をクリックしてからドラッグします。

  18. Quadruple アニメーションにトリガーを追加するには、[トリガー] パネルの [イベント トリガーの追加] Cc295058.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.40).png をクリックします。

    新しい Window.Loaded トリガーが作成されます。

  19. [オブジェクトとタイムライン] パネルで楕円を選択し、[トリガー] パネルのドロップダウン ボックスを使用して、新しいトリガーを [Window.Loaded の発生時] から [ellipse.MouseEnter の発生時] に変更します。

  20. [ellipse.MouseEnter の発生時] の横にある [新しいアクションの追加] Cc295058.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックし、ドロップダウン ボックスを使用して、新しいアクションを [Quadruple.Begin] に変更します。

    これで、ユーザーがポインターを楕円の上に置くと、Quadruple アニメーションが Double アニメーションを中断します。

  21. 新しいイベント トリガーを追加し、[ellipse.MouseLeave の発生時] に変更し、Double.Begin に新しいアクションを追加します。

    ユーザーがポインターを楕円の外に動かすと、Double アニメーションが Quadruple アニメーションを中断します。

  22. 作成したアニメーション タイムラインとイベント トリガーの動作を確認するには、[プロジェクト] メニューの [プロジェクトのテスト] をクリックして、シーンをテストします。

    どちらのアニメーションでも 0 秒のマークでキーフレームは設定されていません。発生するアニメーション間の移行をハンドオフ アニメーションと呼びます。1 つのアニメーションが別のアニメーションを中断すると、アニメーションのハンドオフ動作により、中断時点の幅から次のアニメーションの最初のフレームに滑らかに移行します。Double アニメーションの最後にポインターを楕円内に動かすと、Quadruple アニメーションの開始点は楕円の元のサイズからではなく、マウスを動かしたときの楕円の幅から始まります。マウス カーソルを楕円の外に動かすと、2 つの間で発生する移行のために、Double アニメーションは Quadruple アニメーションが反転したように見えます。

  23. アプリケーションを終了して、Expression Blend に戻ります。

  24. [オブジェクトとタイムライン] パネルで楕円の ScaleX ノードをクリックし、[Quadruple タイムライン] を選択します。再生ヘッドを 0 秒のマークに移動した後、[キーフレームの記録] ボタンをクリックします。

  25. アニメーションを再度テストします。移行動作が変化します。マウス カーソルを楕円内に移動すると、Quadruple アニメーションが楕円の元の幅から始まります。

    Double アニメーションの 0 秒のマークでキーフレームを追加して再度テストし、次に Quadruple アニメーションの 0 秒のマークのキーフレームを削除してテストを再度行うことによって、さらに別の移行動作を確認できます。

Copyright ©2011 by Microsoft Corporation. All rights reserved.