次の方法で共有

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

  • [アーティクル]

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

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

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

  2. F6 キーを押して、アニメーション ワークスペースに切り替えます (F6 キーにより、デザイン ワークスペースとアニメーション ワークスペースを切り替えます。アニメーション ワークスペースでは、[組み合わせ] パネルはアートボードの下に配置されます)。

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

    Cc295058.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

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

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

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

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

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

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

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

    Cc295058.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

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

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

  11. [オブジェクトとタイムライン] で、[新規作成] Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,Expression.10).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 アニメーションは開始しません。

    Cc295058.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

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

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

  20. [ellipse.MouseEnter の発生時] の横にある [新しいアクションの追加] Cc295058.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.10).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 秒のマークのキーフレームを削除してテストを再度行うことによって、さらに別の移行動作を確認できます。