単純なアニメーションの作成

  • [アーティクル]

Microsoft Expression Blend では、任意のビジュアル要素を次の手順でアニメーション化できます。

単純なアニメーションを作成するには

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

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

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

    Expression Blend では、オブジェクトという用語はアートボード上にあるアイテムを指します。たとえば、ツールボックスから [四角形] ツール Cc294948.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(ja-jp,Expression.10).png を選択してアートボード上に四角形を描画した場合は、四角形オブジェクトを作成したことになります。オブジェクトとコントロールの詳細については、「オブジェクトおよびプロパティの使用」と「コントロール」を参照してください。

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

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

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

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

    既定では、ドキュメントのルートに作成された新しいタイムラインによって、Window.Loaded イベントの [トリガ] の下にイベント トリガが追加されます。このトリガによって、アプリケーションが起動すると同時にストーリーボードが開始されます。簡単なインタラクティブ機能を作成する場合は、イベント トリガを選択し、[トリガ] ウィンドウの下半分で、次のように指定できます。

    When object .PreviewMouseDown is raised

    上記の object は、アプリケーション内のオブジェクトの名前です (トリガを変更するときに [トリガ] ウィンドウの下半分にオブジェクトを表示するには、オブジェクトを選択しておく必要があります)。これで、オブジェクトをクリックしたときにアニメーション タイムラインが開始されます。

  5. [オブジェクトとタイムライン] で、アニメーションにするオブジェクトを選択します。

  6. 選択したオブジェクトを現在の位置と外観で開始する場合は、[キーフレームの記録] ボタン Cc294948.de094a9c-58f2-4466-912a-9bdc18362548(ja-jp,Expression.10).png をクリックして、オブジェクトを 0 秒のマークで記録します。タイムラインの選択したオブジェクトに対応する行にキーフレーム Cc294948.80da70bb-e635-42e8-b26d-f90453096e21(ja-jp,Expression.10).png が表示されます。

  7. [オブジェクトとタイムライン] で、アニメーションが終了する時点に再生ヘッドをドラッグします。

  8. アニメーションの終了時の外観をアニメーションの開始時と同じにする場合は、[キーフレームの記録] ボタンをクリックします。

  9. タイムラインのプロパティを変化させる場所に再生ヘッドを移動します。

  10. オブジェクトの位置、色、サイズなど、選択したオブジェクトのプロパティを変更します。プロパティの変更を記録するためのキーフレームがタイムライン上に自動的に表示されます。

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

    オブジェクトのノードを展開すると、個々のプロパティのキーフレームを表示できます。オブジェクト全体ではなく個々のプロパティのキーフレームを移動する場合に便利です。

  11. 作成したアニメーションを表示するには、[オブジェクトとタイムライン] の上部にある [再生] ボタンをクリックします。

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

    タイムライン記録モードを終了するには、[ストーリーボードを閉じる] ボタン Cc294948.4c066464-3a41-452d-b2e9-e95f6c5659ff(ja-jp,Expression.10).png をクリックします。現在のスコープ内のすべてのオブジェクトが初期状態に戻ります。

関連項目

概念

ストーリーボードのテスト

ストーリーボードの実行タイミングの制御

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