ストーリーボード
Storyboardオブジェクトは、時間軸を持つアニメーションの処理情報をもったTimelineオブジェクトのコンテナ（入れ物）として機能します。前述したようにSilverlightのアニメーション機能は、オブジェクトのプロパティを短い時間間隔で変更し続けることにより実現されます。
単一のアニメーションは、1つのオブジェクトの1つのプロパティしか変更できません。より複雑なアニメーションを実現するには、複数のアニメーションを組み合わせる必要があるのです。Storyboardオブジェクトは、アニメーション処理を表すTimelineオブジェクトを任意の数だけ保有することができます。
<Storyboard ...> oneOrMoreChildTimelines </Storyboard>
Storyboard要素の子要素oneOrMoreChildTimelinesに指定するのはTimelineオブジェクトを表す要素です。このオブジェクトは、StoryboardのChildrenプロパティが返すTimelineCollectionオブジェクトに追加されます。
Timelineオブジェクトは、アニメーションの推移を記述した抽象的なオブジェクトで、TimelineCollectionに追加できるのは、Timelineオブジェクトを継承するオブジェクトでなければなりません。
Timelineオブジェクトの役割は、一定の時間内にオブジェクトの指定されたプロパティの値を、目的の値まで少しずつ変更することです。しかし、プロパティよって型がことなるため、その方法は一律ではありません。色を変更するアニメーションの場合はColor型、幅や不透明度であればDouble型です。このような、処理対象となるプロパティの型ごとに専用のTimelineオブジェクトを継承するオブジェクトが用意されています。例えば、DoubleAnimationオブジェクトはDouble型のプロパティのアニメーションに用いることができます。
<DoubleAnimation .../>
Double型のプロパティを変更するアニメーションには、このオブジェクトが用いられます。アニメーションで用いられるな値はToプロパティに指定します。
<object To="Double" .../>
Toプロパティに指定する値は、対象となるオブジェクトのプロパティの最終的な値です。
アニメーションの時間はDurationプロパティに設定します。
<object Duration="Duration" ...>
Durationプロパティに指定する値は、アニメーションの継続時間を表すDurationオブジェクトです。DurationオブジェクトはColorオブジェクトと同じようにXAMLで指定するための専用の書式を持っています。
h:m:s
hには時間、mには分、sには秒を指定します。時間は0から23までの値のいずれかを、分と秒は0から59までの値のいずれかを指定しなければなりません。この他に、DurationにはAutomaticとForeverという文字列を指定することもできますが、この場では割愛します。
DoubleAnimationオブジェクトはDurationプロパティに設定した時間をかけて、対象のオブジェクトのプロパティの値を、少しずつToプロパティに指定した値に近づけていきます。Durationプロパティに指定した時間が経過した時点で、プロパティの最終的な値はToプロパティに設定した値になっているでしょう。
オブジェクトの識別
これまでの内容から、StoryboardにDouble型のプロパティの値をアニメーションさせるDoubleAnimationを追加することができます。しかし、このままでは、どのオブジェクトのプロパティを変更するのか指定されていません。ここで、オブジェクトを識別する手段が必要になります。
Silverlightのオブジェクトは、最も基本的な機能を提供するDependencyObjectオブジェクトから派生しています。このオブジェクトには、オブジェクトを識別するための文字列を設定するNameプロパティが用意されています。
<object Name="string" .../>
他のオブジェクトのプロパティから、特定のオブジェクトを指す場合には、このNameプロパティに設定した文字列を用います。Nameプロパティには、オブジェクトを識別できる一意の名前を設定してください。
アニメーション処理で、アニメーションの対象となるオブジェクトを設定するにはTimelineオブジェクトのStoryboard.TargetNameプロパティを使います。
<object Storyboard.TargetName="string" .../>
このプロパティに、対象となるオブジェクトのNameプロパティに設定した名前を指定します。Canvas.TopやCanvas.Leftのような、特定の環境でのみ用いられる依存プロパティを利用する場合は()で括ります。例えば(Canvas.Top)という形になります。
Timelineオブジェクトがアニメーションの継続中に変更する対象のプロパティはStoryboard.TargetPropertyプロパティを使います。
<object Storyboard.TargetProperty="propertyName" .../>
例えば、Widthという名前を設定した場合、オブジェクトのWidthプロパティを変更します。この場合WidthプロパティはDouble型なので、TimelineはDoubleAnimationオブジェクトでなければなりません。
<Rectangle xmlns="http://schemas.microsoft.com/client/2007" Width="100" Height="100" Fill="Black" Name="rect" > <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="Width" To="400" Duration="0:0:10" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>
上記のXAMLは、ルート要素として宣言しているRectangleオブジェクトの幅を10秒間かけて400ピクセルまで伸縮させるアニメーションを実行します。最初にSilverlightによって読み込まれた時点ではRectangleオブジェクトの幅は100ピクセルしかありませんが、読み込まれると同時にEventTriggerによってStoryboardが実行され、Storyboardが保有するDoubleAnimationの働きによって長方形の幅が少しずつ広がっていくようにアニメーションします。
