次の方法で共有

試してみよう : 重なり合うアニメーションの作成

  • [アーティクル]

Expression Blend のタイムライン構造では、アプリケーションで複数のアニメーション タイムラインを同時に実行できます。次の手順では、蝶が絶え間なく円を描いて飛び、ユーザーがその蝶の上にマウス ポインタを移動すると羽ばたくアニメーションを作成する方法を示します。

重なり合うアニメーションを作成するには

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

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

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

    Cc294767.alert_note(ja-jp,Expression.10).gifメモ :

    [既定] 以外のタイムラインを選択してプロパティを変更すると、そのタイムラインでキーフレームが自動的に記録されます。

  4. ツールボックスの [楕円] Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(ja-jp,Expression.10).png ツールを選択します。アートボードの右側に小さな円を 2 つ描きます。[プロパティ] パネルの [レイアウト] カテゴリで Height と Width プロパティの値を同じにすると、楕円を完全な円にできます。クリッピングが発生する場合は、Margin プロパティを調整します。

  5. ツールボックスの [選択内容] Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png ツールを選択し、下の図のように 2 つの円を近づけます。

    アートボードに描かれた 2 つの円

    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(ja-jp,Expression.10).png

  6. 両方の円を同時に操作するには、[オブジェクトとタイムライン] で 1 つの円を選択し、Ctrl キーを押しながらもう 1 つの円も選択します。選択した円を右クリックして [グループ化設定] を選択し、[グリッド] をクリックします。

    2 つの円を含む新しいグリッド パネルが [オブジェクトとタイムライン] に表示されます。

  7. グリッドを右クリックし、[名前変更] を選択して、グリッドの名前を変更します。名前を「Butterfly」に変更します。

  8. 円を描いて飛ぶアニメーションを作成するには、パスからアニメーション タイムラインを生成する [モーション パスに変換] ツールを使用できます。アートボード中央に、アートボードの画面の半分の幅を持つ 3 番目の楕円を描きます。

  9. [オブジェクトとタイムライン] で新しい楕円を選択した状態で、[オブジェクト] メニューの [パス] を選択し、[モーション パスに変換] をクリックします。

    [モーション パスのターゲットを選択] ダイアログ ボックスが表示されます。

  10. アートボード上のオブジェクトの一覧から [Butterfly] グリッドを選択し、[OK] をクリックします。

    新しいタイムラインが作成されます。Expression Blend は新しいタイムラインの記録モードに移行し、[再生] Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(ja-jp,Expression.10).png ボタンをクリックすると、アートボード上のアニメーションを表示できます。ターゲット (Butterfly) は楕円から生成されたモーション パスを移動します。楕円の Fill プロパティがブラシに設定されている場合、Butterfly オブジェクトの部分にブラシの効果が適用されます。

  11. 3 番目の楕円は不要になったので削除します。

  12. [オブジェクトとタイムライン] で、Butterfly、RenderTransform、および Translation 要素のノードを展開し、[モーション パス] タイム スパンを表示します。[モーション パス] 要素またはタイム スパンを表すグレーのバーを右クリックし、[繰り返し回数の編集] をクリックします。

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

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

    このアニメーションを実行すると、繰り返しループします。

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

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

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

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

  16. 0 秒の位置でキーフレームを設定するには、[Butterfly] グリッドを選択し、[キーフレームの記録] Cc294767.de094a9c-58f2-4466-912a-9bdc18362548(ja-jp,Expression.10).png ボタンをクリックします。

    タイムラインの [Butterfly] グリッドに対応する行にキーフレーム Cc294767.80da70bb-e635-42e8-b26d-f90453096e21(ja-jp,Expression.10).png が表示されます。

  17. 再生ヘッドを 1 秒のマークにドラッグし、別のキーフレームを記録します。

    これで、アニメーションの開始位置と終了位置が設定されました。

  18. 再生ヘッドを、前の 2 つのキーフレームの間の 0.5 秒のマークにドラッグします。

  19. ツールボックスから [選択内容] ツールを選択し、Alt キーを押しながら、アートボード上で [Butterfly] グリッドの高さを広げ、幅を狭くして、下の図のようにします。

    Expression Blend は、Flap アニメーション タイムラインに対して記録モードになっているので、グリッドの変更処理によって、0.5 秒のマークでグリッドの ScaleX および ScaleY プロパティに新しいキーフレームが設定されます。

    アートボード上の円のグリッドを広げる

    Cc294767.a6857649-160b-446f-b998-a135389a19be(ja-jp,Expression.10).png

  20. [オブジェクトとタイムライン] で、[ScaleX] および [ScaleY] ノードが表示されるまで [Butterfly] グリッドのノードを展開します。1 つずつノードを選択し、これらを右クリックして [繰り返し回数の編集] を選択し、タイムラインを 2 回実行するように [繰り返し編集] ダイアログに「2」を入力します。次に、[OK] をクリックします。

  21. [再生] ボタンをクリックして、アートボード上のアニメーションをテストします。繰り返しの値は、アートボード上の再生とは関係ありません。アニメーションのタイミングを調整する場合は、グレーのタイム スパン バーのキーフレームを移動できます。

    Cc294767.alert_note(ja-jp,Expression.10).gifメモ :

    タイムライン全体を表示するスペースがない場合は、[タイムライン ズーム] テキスト ボックスを使用して、タイムラインをズーム アウトできます。パネルの幅を変更して、[オブジェクトとタイムライン] パネルの他の項目を表示することもできます。

  22. 次に、アニメーションのトリガを設定します。ドキュメントのルートで新しいタイムラインを作成すると、アプリケーションの起動時に発生する Window.Loaded イベントの [トリガ] の下に既定のイベント トリガが追加されます。

    円を描くタイムラインにはそのトリガを使用し、Flap タイムラインに新しいトリガを追加します。

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

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

    Cc294767.alert_note(ja-jp,Expression.10).gifメモ :

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

    Window.Loaded トリガから Flap アニメーションを削除

    Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(ja-jp,Expression.10).png

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

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

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

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

    これで、ユーザーがマウス カーソルを蝶の上に置くと、Flap アニメーション タイムラインが開始します。

    グリッドの MouseEnter イベントに新しいトリガを作成

    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(ja-jp,Expression.10).png

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

    Cc294767.alert_note(ja-jp,Expression.10).gifメモ :

    円を描くアニメーションの動きが早すぎる場合は、タイムラインの実行時間を調整できます。[オブジェクトとタイムライン] で、ドロップダウン ボックスからモーション パス タイムラインを選択し、グリッドのノードを順に展開して [モーション パス] ノードを表示します。次に、グレーのタイム スパン バーの右端をつかんで右にドラッグし、終了時間を延ばします。

    円を描くタイムラインを削除し、新しいタイムラインを作成して、手順 8 (楕円の描画) から開始して、モーション パスを作成することもできます(手順 8 で始める前に新しいタイムラインを作成しない場合、Flap アニメーション タイムラインに円を描くアニメーションが追加されます)。