Expression Blendスタートガイド - WPFアプリケーションを作成してみよう

アニメーション

Expression Blendでは、アプリケーション内で発生したイベント(例えば、マウスクリックやボタンの押したなどのユーザーからのアクション)を感知して、イベントを引き金とするアニメーションを定義可能です。もちろん、アニメーションの編集もすべてビジュアルな環境で直観的に行うことができ、コードを直接編集する必要はありません。

アニメーションの編集を行うには、最初に「ウィンドウ」メニューの「アニメーション ワークスペース」を選択すると便利です。

「アニメーション ワークスペース」を選択すると、画面左側に配置されていた「組み合わせ」ウィンドウが画面の下部に移動し、レイアウトが変更されます。

アニメーションに関するデザインは時間軸を操作する必要があるため、横長のウィンドウの方が操作しやすいでしょう。これは、編集画面のレイアウトの問題なので、特に必要なければ「デザイン ワークスペース」のままでもかまいません。

「組み合わせ」ウィンドウは、画面上にデザインされているオブジェクトと、アニメーションの時間軸を表すタイムラインを管理する「オブジェクトとタイムライン」と、作成されているアニメーションをどのようなタイミングで実行するかを管理するための「トリガ」に分かれています。

「トリガ」は、作成されているアニメーションをいつ実行するかを設定します。例えば、ボタンが押されたとき、マウスカーソルが移動したとき、キーが押されたときなど、アプリケーションの状態やユーザーのアクションによる反応をイベントと呼びます。アニメーションを実行するには、何をきっかけにするかを設定する必要があります。

この場では、ウィンドウ上にボタンを配置して、ボタンがクリックされたタイミングでアニメーションを実行したいと思います。ウィンドウ上の適当な場所にボタンを配置し「トリガ」内の「+イベント」を押してください。

ボタンを押すと、下部に新しいトリガが追加されます。トリガは、指定されたイベントが発生したときに、何らかのアニメーションを実行するように関連付けられます。追加したトリガを選択し、下部のコンボボックスから関連付けるイベントを選択します。

2つあるコンボボックスのうち、左側のコンボボックスはイベントを感知する対象のオブジェクトを表します。全てのオブジェクトは名前で管理されており、オブジェクトの名前はプロパティから変更可能です。今回はボタンがクリックされたときにアニメーションを実行したいので、対象のボタンを選択します。

右側のコンボボックスは、選択されているオブジェクトのイベントを選択します。オブジェクトごとに様々なイベントが用意されています。ボタンがクリックされたというイベントは「Click」を選択してください。

これで、オブジェクトとイベントの選択は終了です。右側にある「+」ボタンを押して、イベントに関連付けるアニメーションを設定します。

この時点で、アニメーションを作成していないので「タイムラインが存在しません」という旨の次のようなダイアログが表示されるでしょう。