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

[アーティクル]
10/09/2014

Blend for Visual Studio では、どのようなビジュアル要素でもアニメーション化できます。

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

Blend で、プロジェクトを開くか、新しいプロジェクトを作成します。

詳細については、「Blend における新しいプロジェクトの作成」を参照してください。
F6 キーを押して、[アニメーション] ワークスペースに切り替えます (F6 キーは、ワークスペースを切り替えるキーです。アニメーションワークスペースでは、[オブジェクトとタイムライン] パネルはアートボードの下に配置されます)。アニメーションにするオブジェクトを作成します。

ヒント

Blend では、オブジェクトという用語はアートボードにあるアイテムを指します。たとえば、[ツール] パネルで Rectangle を選択してアートボードに四角形を描画した場合は、rectangle オブジェクトを作成したことになります。オブジェクトとコントロールの詳細については、「Blend におけるオブジェクトおよびプロパティの使用」と「Blend でコントロールを挿入し、そのビヘイビアーを変更する」を参照してください。
[オブジェクトとタイムライン] パネルの [新規作成] をクリックします。

[ストーリーボードリソースの作成] ダイアログボックスが表示されます。
[リソース名 (キー)] フィールドにタイムラインの名前を入力し、[OK] をクリックします。 Blend はタイムライン記録モードに入り、再生ヘッドは 0 秒のマークに置かれます。記録モード中は、プロパティを設定すると、タイムラインに自動的にキーフレームが記録されます。

ヒント

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

When object.PreviewMouseDown is raised

この例では、object は、アプリケーション内のオブジェクトの名前です (トリガーを変更するときに [トリガー] パネルの下半分にオブジェクトを表示するには、オブジェクトを選択しておく必要があります)。これで、オブジェクトをクリックしたときにアニメーションタイムラインが開始されます。
[オブジェクトとタイムライン] パネルで、アニメーションにするオブジェクトを選択します。
選択したオブジェクトを現在の位置と外観で開始する場合は、[キーフレームの記録] をクリックして、オブジェクトを 0 秒のマークで記録します。タイムラインの選択したオブジェクトに対応する行にキーフレームが表示されます。
[オブジェクトとタイムライン] パネルで、アニメーションが終了する時点に再生ヘッドをドラッグします。
アニメーションの終了時の外観をアニメーションの開始時と同じにする場合は、[キーフレームの記録] ボタンをクリックします。
タイムラインのプロパティを変化させる場所に再生ヘッドを移動します。
オブジェクトの位置、色、サイズなど、選択したオブジェクトのプロパティを変更します。プロパティの変更を記録するためのキーフレームがタイムライン上に自動的に表示されます。

ヒント

オブジェクトのノードを展開すると、個々のプロパティのキーフレームを表示できます。オブジェクト全体ではなく個々のプロパティのキーフレームを移動する場合に便利です。
作成したアニメーションを表示するには、[オブジェクトとタイムライン] の上部にある [再生] ボタンをクリックします。

ヒント

タイムライン記録モードを終了するには、[ストーリーボードを閉じる] をクリックします。現在のスコープ内のすべてのオブジェクトが初期状態に戻ります。