はじめに
多くの環境では、アニメーションを実現するために専用のプログラムを書く必要があります。描画に関連する情報を繰り返し処理の中で変化させ、時間に合わせながら値を調整するコードを書かなければなりません。しかし、Silverlightであればプログラムコードを書く必要はなくXAMLだけでもアニメーションを実現することができます。
これまでのWebでも、JavaScriptからHTML DOMオブジェクトを操作することで簡単なアニメーションを表現することができましたが、そのためには相応のスクリプトを書く能力が要求されました。SilverlightであればXMLベースのXAMLを使って、目的のアニメーションをテキストで直接記述できます。
Silverlightのアニメーションは、特別なロジックを用いたものではなく、一定の時間内に、指定された値から目的の値まで、オブジェクトの対象のプロパティを少しずつ遷移させることで実現しています。例えば、オブジェクトの座標を数秒かけて目的の値まで変更することによって、画面上ではオブジェクトが平行移動しているように見せかけることができます。
こうした性質から、Silverlightではインスタンスの生成や削除をアニメーションの流れに組み込むことはできません。しかし、デザイナが要求する視覚的な演出を目的としたアニメーションの多くは、Silverlight標準の機能で簡単に実現することができるでしょう。
これまでの記事
- 第1回：Silverlight入門－XAMLの文法
- 第2回：Silverlight入門－図形やテキストを扱うオブジェクト
- 第3回：Silverlight入門－JavaScriptによるオブジェクトの動的な制御
トリガ
アニメーションを開始するには、アニメーションを起動させる必要があります。アニメーションの起動方法をオブジェクトに設定するにはUIElementオブジェクトのTriggersプロパティを使います。
<object> <object.Triggers> oneOrMoreEventTriggers </object.Triggers> </object>
Triggersプロパティは、TriggerCollectionオブジェクトを返します。TriggerCollectionは、任意の数のEventTriggerオブジェクトを保有するコレクションです。このオブジェクトはXAMLから利用することはありませんが、スクリプトから登録されたオブジェクトを操作するために用いられます。
<TriggerCollection ...> oneOrMoreEventTriggers </TriggerCollection>
TriggerCollectionオブジェクトに追加するオブジェクトはEventTriggerオブジェクトです。このオブジェクトが、アニメーションを起動する方法を提供します。
<EventTrigger> oneOrMoreBeginStoryboards </EventTrigger>
アニメーションを起動させるイベントはRoutedEventプロパティを指定します。ただし、Silverlight 1.0の時点では、親オブジェクトが読み込まれたときに起動することを表すLoadedしかサポートしていません。
<object RoutedEvent="parentObjectType.Loaded" .../>
parentObjectTypeには、このEventTriggerを保有する親オブジェクトの型を指定します。例えば、Rectangleをアニメーションさせる場合はRectangle.Loadedを指定します。これ以外の種類のイベントに対応するには、スクリプトを部分的に書く必要があります。
EventTrigger要素の内容となるoneOrMoreBeginStoryboardsには、BeginStoryboard子要素を指定できます。oneOrMoreBeginStoryboardsに指定した子要素は、実質的にはEventTriggerオブジェクトのActionsプロパティが返すTriggerActionCollectionオブジェクトに保有されます。
<TriggerActionCollection ...> oneOrMoreBeginStoryboards </TriggerActionCollection>
ActionsプロパティはXAMLから利用することはできませんが、スクリプトからEventTriggerオブジェクトに指定されているBeginStoryboardオブジェクトを取り出す場合などに利用できます。TriggerActionCollectionオブジェクトは、任意の数のBeginStoryboardオブジェクトを格納するコレクションとして機能します。
TriggerActionCollectionが保有するBeginStoryboardオブジェクトは、起動するアニメーションを表すStoryboardオブジェクトを保有しています。
<BeginStoryboard> <Storyboard .../> </BeginStoryboard>
BeginStoryboardオブジェクトに指定するStoryboardオブジェクトが、起動可能なアニメーションを表しています。BeginStoryboard要素の子要素に指定されたオブジェクトは、Storyboardプロパティに保存されます。Storyboardオブジェクトを、直接Storyboardプロパティから設定することも可能です。
<object Storyboard="Storyboard" .../>
Storyboardオブジェクトを作成することができれば、目的のアニメーションを起動できます。これまでの流れを要約すると、次のようになります。
<object ...> <object.Triggers> <EventTrigger RoutedEvent="object.Loaded"> <BeginStoryboard> <!--任意の Storyboard オブジェクト--> </BeginStoryboard> </EventTrigger> </object.Triggers> </object>
上記のXAMLコードは、アニメーションさせるオブジェクトに対してTriggersプロパティを設定していします。ルート要素のobjectとある部分は、任意のUIElementオブジェクトを指定できます。オブジェクトをどのようにアニメーションさせるかについては、BeginStoryboard要素の子要素として指定するStoryboardオブジェクトを設定しなければなりません。
