次の方法で共有

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

  • [アーティクル]

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

Cc294767.alert_note(JA-JP,Expression.30).gifメモ :

次の手順では、Windows Presentation Foundation (WPF) プロジェクトでトリガーを使ってストーリーボードを制御します。または、WPF か Microsoft Silverlight で ControlStoryboardAction ビヘイビアーを使ってコントロールを制御します。ビヘイビアーの使用の詳細については、「オブジェクトへのビヘイビアーの追加」参照してください。

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

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

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

  3. ストーリーボードが開いている場合は、[オブジェクトとタイムライン] パネルで [ストーリーボードを閉じる] Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(JA-JP,Expression.30).png をクリックします。

    Cc294767.alert_note(JA-JP,Expression.30).gifメモ :

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

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

  5. [ツール] パネルの [選択内容] Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png を選択し、下の図のように 2 つの円を近づけます。

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

    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(JA-JP,Expression.30).png

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

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

  7. [Grid] オブジェクトを右クリックし、[名前の変更] を選択して、名前を変更します。名前を「Butterfly」に変更します。

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

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

    [モーション パスに変換] ダイアログ ボックスが表示されます。

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

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

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

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

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

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

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

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

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

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

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

  16. 0 秒の位置でキーフレームを設定するには、[Butterfly] グリッドを選択し、[キーフレームの記録] Cc294767.e8ec61d4-c8e8-465a-85a7-70bf787a67de(JA-JP,Expression.30).png をクリックします。

    タイムラインの [Butterfly] グリッドに対応する行にキーフレーム Cc294767.fa3c696d-5463-4000-8a6b-650fe6759bf7(JA-JP,Expression.30).png が表示されます。

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

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

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

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

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

    アートボード上の Grid オブジェクトを広げる

    Cc294767.a6857649-160b-446f-b998-a135389a19be(JA-JP,Expression.30).png

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

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

    Cc294767.alert_note(JA-JP,Expression.30).gifメモ :

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

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

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

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

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

    Cc294767.alert_note(JA-JP,Expression.30).gifメモ :

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

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

    Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(JA-JP,Expression.30).png

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

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

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

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

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

    Grid オブジェクトの MouseEnter イベントに新しいトリガーを作成する

    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(JA-JP,Expression.30).png

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

    Cc294767.alert_note(JA-JP,Expression.30).gifメモ :

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

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