Silverlight
XAML および Expression Blend を使用してアニメーションを作成する
Lawrence Moroney
この記事では、次の内容について説明します。
- 基本的な変換と変換の組み合わせ
- トリガとイベントの使用
- 線形キーフレーム アニメーションと不連続なキーフレーム アニメーション
- Expression Blend を使用したアニメーション
|
この記事では、次のテクノロジを使用しています。
Silverlight 2、Expression Blend
|
この記事は、Silverlight 2 のプレリリース バージョンに基づいています。ここに記載されているすべての情報は、変更される場合があります。この記事の出典は、『Introducing Microsoft Silverlight 2, 2nd Edition』(Laurence Moroney 著、Microsoft Press、2008 年) です。
目次
XAML が優れている点の 1 つは、XML の構文を使用してオブジェクトを宣言できるだけでなく、同じ方法で変換を定義してオブジェクトに適用できることです。プログラマでなくても、オブジェクトを回転、移動および傾斜させることができます。また、XAML を使用すると、オブジェクトのプロパティの時間経過による変化としてアニメーションを定義することで、オブジェクトをアニメーション化する方法を記述できます。最初に変換について説明します。その後で、変換をタイムラインに追加して Silverlight™ コンテンツをアニメーション化します。
変換
グラフィックスの分野では、変換とはある座標空間から別の座標空間に点をマップする方法を定義することです。通常は、変換行列を使用して記述します。変換行列は特殊な数学的構造であり、ある体系から別の体系への簡単な数学的変換を可能にします。Silverlight XAML は、この行列を抽象化し、回転、拡大/縮小、傾斜、および平行移動 (移動) の 4 セットの変換をサポートします。また、Silverlight XAML にはこれら以外にも特別な変換タイプがあります。その変換タイプを使用すると、独自の行列を定義して実装した後、その行列を使用して変換を組み合わせることができます。
変換を適用するには、変換プロパティを使用します。変換プロパティには複数の種類があり、それぞれが異なるオブジェクトの種類に適用されます。
したがって、Brush 型を使用するときは、さまざまな方法で変換を定義します。1 つの方法は、ブラシの内容に影響を与えたいときには Brush.Transform プロパティを使用するというものです (たとえば、ImageBrush で使用する前に画像を回転する場合)。もう 1 つの方法は、Brush.RelativeTransform プロパティを使用するものです。このプロパティを使用すると、相対値を使用してブラシを変換できます (たとえば、同じブラシを使用して、サイズが異なる別の領域を塗りつぶす場合の処理)。
Geometry 型を使用しているとき、簡単な変換を適用するには Geometry.Transform プロパティを使用します。ただし、この型は相対変換をサポートしないことに注意してください。
最後に、UI 要素を使用しているときに変換を指定するには、RenderTransform プロパティを使用します。たとえば、楕円を変換する場合は、Ellipse.RenderTransform を使用して目的の変換を定義します。
RotateTransform プロパティを使用して回転する
RotateTransform を使用すると、指定した点を中心にして指定した角度だけ要素を回転できます。回転の角度を設定するには、Angle プロパティを使用して、アイテムを回転する度数を設定します。たとえば、右向きの水平ベクトルを 0 度とすると、回転は時計回りに行われるので、90 度回転した結果は下向きの垂直ベクトルになります。
回転の中心の座標は、CenterX プロパティと CenterY プロパティを使用して指定します。これらのプロパティの既定値は 0.0 であり、既定の回転はコンテナの左上隅を中心にして行われます。
次の XAML の例では、45 度の回転を指定する RotateTransform を含む RenderTransform を使用して、TextBlock を回転しています。
<TextBlock Width="320" Height="40"
Text="This is the text to rotate" TextWrapping="Wrap">
<TextBlock.RenderTransform>
<RotateTransform Angle="45" />
</TextBlock.RenderTransform>
</TextBlock>
図 1 に示すように、画面の左上隅の点 (0,0) を中心としてテキストを回転しています。
.gif)
図 1 RotateTransform プロパティの使用 (クリックすると拡大画像が表示されます)
次の XAML は、CenterX および CenterY を使用して回転の中心として異なる点を指定する方法を示します。この例では、点 (100,200) を中心に回転しています。
<TextBlock Width="320" Height="40"
Text="This is the text to rotate" TextWrapping="Wrap" >
<TextBlock.RenderTransform>
<RotateTransform Angle="45" CenterX="100" CenterY="200" />
</TextBlock.RenderTransform>
</TextBlock>
ScaleTransform プロパティを使用して拡大/縮小する
水平軸と垂直軸のどちらか一方または両方を基にしてオブジェクトのサイズを変更するには、ScaleTransform プロパティを使用します。オブジェクトを拡大/縮小するときは、拡大/縮小の中心にする少なくとも 1 つの軸と、その軸に対して拡大/縮小する大きさを指定する必要があります。
水平軸つまり X 軸上でオブジェクトを拡大/縮小するには ScaleX プロパティを使用し、垂直軸つまり Y 軸上でオブジェクトを拡大/縮小するには ScaleY プロパティを使用します。これらのプロパティには、指定した軸方向でオブジェクトの現在のサイズに乗算する値を表す double 型の値を設定します。したがって、1 より大きい値を指定すると、オブジェクトはその値の倍率で拡大されます。たとえば、ScaleX の値を 2 にすると、オブジェクトの水平方向のサイズが 2 倍になります。1 より小さく 0 より大きい値を指定すると、オブジェクトは縮小されます。たとえば、0.5 に設定すると、指定した軸方向でオブジェクトのサイズが半分になります。
たとえば、次の XAML では、幅が 96 ピクセルで高さが 88 ピクセルの赤い四角形が作成されます。
<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="112" Canvas.Top="72" />
図 2 は、このオブジェクトを Silverlight でレンダリングしたときの表示です。
.gif)
図 2 四角形のレンダリング (クリックすると拡大画像が表示されます)
このオブジェクトに ScaleTransform を適用するには、RenderTransform を使用して、変換として ScaleTransform を指定します。この XAML を次に示します。
<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
Width="96" Height="88" Canvas.Left="112" Canvas.Top="72">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="2" />
</Rectangle.RenderTransform>
</Rectangle>
このようにコーディングすると、この ScaleTransform を使用して四角形の水平方向のサイズが右に向かって拡大するのがわかります。その理由は、拡大/縮小の中心を指定していないからです。拡大/縮小の中心は、水平方向については CenterX プロパティで、垂直方向については CenterY プロパティで指定できます。これらのプロパティでは、拡大/縮小の中心の座標を指定します。この座標は、四角形の左上隅を基準にした値です。また、座標の既定値は 0 で、水平軸については右向きに、垂直軸については下向きに拡大が行われることを意味します。
CenterX プロパティを正の値 (たとえば 50) に設定した場合は、四角形の左端から右方向に 50 ピクセルの X 位置を中心にして拡大/縮小が行われます。結果として、四角形は CenterX が変化しない位置より左側に、あるピクセル数だけ移動したように見えます (ピクセル数は倍率の値に依存します)。これは、拡大はこの点を中心にして行われるので、四角形の左側は左方向へ押され、右側は右方向へ押されるためです。ScaleY と CenterY の値を同様に設定した場合も、同じような効果が得られます。
<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="2"
CenterX="50"/>
</Rectangle.RenderTransform>
</Rectangle>
TranslateTransform プロパティを使用してオブジェクトを移動する
平行移動は、2 次元平面内のある位置から別の位置にオブジェクトを移動する変換です。この変換を定義するには、X 軸方向および Y 軸方向のオブジェクトの動きを定義するベクトルを設定します。設定には、変換の X および Y プロパティを使用します。アイテムを水平方向に 2 単位だけ移動するには (つまり右方向へ移動します)、X プロパティを 2 に設定します。左へ移動するには、負の値 (-2 など) を使用します。同様に、オブジェクトを上下に移動するには Y プロパティを使用します。正の値を指定するとオブジェクトは画面上で下向きに移動し、負の値を指定すると上向きに移動します。
次に示す平行移動変換の例では、上および左へ移動するように X および Y の値を指定することで、これまで見てきた赤い四角形の位置を移動します。結果として、これらの値は変換を決定するベクトルを構成します。
<Rectangle Fill="#FFFF0404"
Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<TranslateTransform X="-50" Y="-50"/>
</Rectangle.RenderTransform>
</Rectangle>
図 3 の結果を参照してください。四角形は、図 2 の四角形の位置に対して、指定した大きさだけ上および左に移動しています。
.gif)
図 3 TranslateTransform プロパティの使用 (クリックすると拡大画像が表示されます)
SkewTransform プロパティを使用してオブジェクトを傾斜させる
オブジェクトを傾斜させると、1 つの軸に沿って一定の割合で徐々にオブジェクトが変化します。正方形や長方形を平行四辺形に変換する効果があります。この視覚的効果は、2 次元の面で奥行感を出すのに役立ちます。
傾斜は、特定の点を中心にして X 軸または Y 軸方向の特定の角度で適用できます。もちろん、これらを組み合わせて同時に両方の軸について傾斜させることもできます。次の XAML では、四角形を X 軸方向に 45 度の角度で傾斜させています。
<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>
</Rectangle>
図 4 に結果を示します。
.gif)
図 4 SkewTransform を使用した四角形の傾斜 (クリックすると拡大画像が表示されます)
傾斜は、グラフィックスで 3 次元の効果をシミュレートするのに便利です。たとえば、3 つの隣接する四角形に対して SkewTransform を適用し、2 つを X 軸方向へ、1 つを Y 軸方向へ傾斜させると、3 次元の奥行の視覚効果を作成できます (図 5 を参照)。
.gif)
図 5 傾斜した 3 つの四角形による奥行のシミュレーション (クリックすると拡大画像が表示されます)
MatrixTransform を使用して変換を定義する
すべての変換の核心部分は、変換行列によってオブジェクトの座標空間を乗算することで行われます。これまで見てきた個々の変換は、よく知られている、明確に定義された変換です。行列の計算および変換の実装方法についてはこの記事では説明しませんが、構文を完全なものにするため、行列を Silverlight XAML で定義する方法を説明します。
MatrixTransform で使用される行列はアフィン行列であることに注意してください。つまり、行列の最下位の行は常に (0 0 1) に設定され、したがってユーザーが設定するのは最初の 2 つの列だけです。その設定には変換の Matrix プロパティを使用します。このプロパティには、最初の 2 行の値をスペースで区切った文字列として指定します。
<Rectangle Fill="#FFFF0404"
Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<MatrixTransform Matrix="1 0 1 2 0 1"/>
</Rectangle.RenderTransform>
</Rectangle>
この行列を使用した変換の結果として、拡大と傾斜が組み合わされた四角形がレンダリングされます。
変換を組み合わせる
前の例で見たように、変換アフィン行列を使用し、MatrixTransform 型を使用して指定することで、複雑な変換を作成できます。ただし、行列の計算に詳しくない場合は、変換を使用するもう 1 つの方法として、TransformGroup 要素を使用して変換を組み合わせることもできます。この方法を使用して複数の変換を指定すると、単純に、各変換を組み合わせた効果がオブジェクトに適用されます。その例を次に示します。
<Rectangle Fill="#FFFF0404" Stroke="#FF000000"
Width="96" Height="88"
Canvas.Left="80" Canvas.Top="80">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.2" ScaleY="1.2" />
<SkewTransform AngleX="30" />
<RotateTransform Angle="45" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
この例では、両方の軸について図形のサイズを 20% 大きくする ScaleTransform、X 軸方向への 30 度の傾斜および 45 度の回転を組み合わせています。
アニメーションという言葉は、文字どおり、"なにものかに生命を与える" ことを意味します。したがって、アニメーションを使用すると、時間経過と共に、またはユーザー アクションに応じて、色、サイズ、不透明度、他のプロパティなどのオブジェクトの属性を変更することで、作成物に生命を与えることができます。
XAML では、アイテムの 1 つ以上のプロパティを時間と共に変化させることで、アイテムをアニメーション化します。この時間は、タイムラインを使用して定義します。たとえば、5 秒間で画面を横断するようにアイテムを移動するには、Canvas.Left プロパティの 0 から画面の幅までの変化をアニメーション化する 5 秒間のタイムラインを指定します。以下のセクションでは、使用できるアニメーションの種類、およびキーフレームを使用してこれらのプロパティをアニメーション化する場合との違いについて説明します。
さまざまなアニメーションの種類を見る前に、アニメーションにはトリガ、EventTrigger、および Storyboard を含むフレームワークがあることを理解しておく必要があります。最初にこれらの基本的な概念について説明した後、さまざまなアニメーションの種類について詳しく検討します。
トリガと EventTrigger を使用する
Silverlight でのアニメーションはイベントに対応して実行され、イベントはトリガを使用して定義します。現在、Silverlight の XAML でサポートされているトリガの種類は EventTrigger だけです。各 UI プロパティには、1 つ以上のトリガ (つまり 1 つ以上の EventTrigger) の定義に使用する Triggers コレクションがあります。
したがって、要素にアニメーションを追加する最初の手順は、Triggers コレクションを定義することです。その後で、作成したコレクションに少なくとも 1 つの EventTrigger を追加する必要があります。たとえば、四角形をアニメーション化する場合、最初の手順である Triggers コレクションの指定は次のようになります。
<Rectangle x:Name="rect" Fill="Red"
Canvas.Top="100" Canvas.Left="100"
Width="100" Height="100">
<Rectangle.Triggers>
</Rectangle.Triggers>
</Rectangle>
次に、コレクションに追加する EventTrigger を定義する必要があります。この EventTrigger では、RoutedEvent プロパティを使用して、アニメーション実行の契機となるイベントを指定します。RoutedEvent がサポートするイベントは Loaded のみであることに注意してください。
四角形が読み込まれると開始するアニメーションを実装するには、次のように EventTrigger を指定します。
<EventTrigger RoutedEvent="Rectangle.Loaded">
</EventTrigger>
このアニメーションを実行するための XAML は次のようになります。
<Rectangle x:Name="rect" Fill="Red" Canvas.Top="100"
Canvas.Left="100" Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
次に、使用するアニメーションを定義します。アニメーションは、Storyboard に含まれています。
BeginStoryboard と Storyboard を使用する
BeginStoryboard は、Storyboard オブジェクトを含むトリガ アクションです。Storyboard オブジェクトには、アニメーションの定義が含まれます。アニメーションを定義するときは、これらのオブジェクトを EventTrigger の定義に埋め込むだけです。次のコードでは、四角形を例にしてこれを実現する方法を示します。
<Rectangle x:Name="rect" Fill="Red"
Canvas.Top="100" Canvas.Left="100"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
アニメーションのパラメータを定義する
アニメーションのフレームワークの設定が完了したので、実行するアニメーションを指定できます。アニメーションの最も基本的なレベルでは、時間によるプロパティの変化を定義します。3 種類のプロパティをアニメーション化できます。どの種類のプロパティも、From 属性で指定した値 (この属性を設定していない場合は現在の値) から、To 属性で指定した値まで、または By 属性で指定した値に従って、アニメーション化されます。
Double 型 : DoubleAnimation または DoubleAnimationUsingKeyFrames を使用してアニメーション化します。このメソッドは、double 値を含むプロパティ (たとえば、Canvas.Left などの寸法や Opacity などのビジュアル属性) のアニメーション化に使用します。
Point 型 : PointAnimiation または PointAnimationUsingKeyFrames を使用してアニメーション化します。このメソッドは、Point 値を含むプロパティ (点を使用して定義されている線分や曲線など) のアニメーション化に使用します。
Color 型 : ColorAnimation または ColorAnimationUsingKeyFrames を使用してアニメーション化します。このメソッドは、色の値を含むプロパティ (たとえば、要素の背景やストローク) のアニメーション化に使用します。
アニメーションの対象を指定する
アニメーションを適用するオブジェクトを定義するには、これらのアニメーションの種類の Storyboard.TargetName プロパティを使用します。このプロパティには対象のオブジェクトの名前を渡す必要があり、オブジェクトの名前は x:Name プロパティを使用して設定します。さらに、Storyboard.TargetProperty を使用して、アニメーション化するプロパティを指定します。複合プロパティまたは添付プロパティ (Canvas.Left など) を指定する場合は、かっこで囲む必要があることに注意してください。したがって、たとえば rect という名前の四角形の Canvas.Left を対象に Double アニメーションを指定する場合、結果の XAML は次のようになります。
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)" />
アニメーションのプロパティを設定する
対象のプロパティがある値から別の値に遷移するのに要する時間を定義するには、Duration プロパティを使用します。期間の定義には HH:MM:SS の形式を使用します。たとえば、持続時間が 5 秒のアニメーションの場合は、00:00:05 または略して 0:0:5 と指定します。
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" />
アニメーションをすぐに開始しない場合は、同じ形式の BeginTime プロパティを使用して、遅延を挿入できます。
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0:0:5" />
また、期間に速度比を乗算することで、アニメーションの動作を調整することもできます。そのためには、SpeedRatio プロパティを使用します。たとえば、前の例では期間を 5 秒に設定しました。速度比を表す SpeedRatio を 2 に設定することでアニメーションを 10 秒間にしたり、SpeedRatio を 0.2 に設定することでアニメーションを 1 秒間に加速したりできます。
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)"
SpeedRatio="2" Duration="0:0:5" />
Silverlight のアニメーションには、アニメーションの一部として行われた変更を反転する機能があります。たとえば、double 型の値を一定の時間をかけて 0 から 500 に変化させた場合、AutoReverse を使用するとアニメーションが 500 から 0 に戻ります。
前の例のようにアニメーションの実行時間を 5 秒に設定した場合、AutoReverse を true に設定すると、アニメーション全体の実行には 10 秒かかることに注意してください。AutoReverse プロパティを含む XAML の例を次に示します。
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)"
AutoReverse="True"
Duration="0:0:5" />
RepeatBehavior プロパティを設定する
アニメーションの実行が終了したら、アニメーションの動作を制御する複数のオプションを適用できます。それらのオプションを指定するには RepeatBehavior プロパティを使用します。このプロパティは、3 種類の値を受け取ることができます。
- 秒単位で定義した時間。タイムラインはこの時間だけ待ってから、再びアニメーションを開始します。
- 連続した反復を指定する Forever。
- 後に "x" を付けて指定する反復回数。たとえば、アニメーションを 3 回実行する場合は、3x と指定します。
図 6 では、四角形を X 軸方向へ 100 から 500 まで移動してから 100 に戻すアニメーションを 3 回繰り返す動作の、完全な XAML を示します。
図 6 アニメーションの反転と反復
<Rectangle x:Name="rect" Fill="Red"
Canvas.Top="100" Canvas.Left="100"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation RepeatBehavior="3x"
Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)"
To="500" Duration="0:0:5"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
アニメーションの各種類について、もう少し詳しく説明します。最初に各種類のアニメーション化に必要な属性を示した後、関連するアニメーションのキーフレームの種類がどのように適合するのかを説明します。
DoubleAnimation を使用して値をアニメーション化する
DoubleAnimation オブジェクトを使用すると、指定したタイムラインでの double 値の変化を指定できます。アニメーションは、時間経過に対するプロパティ値間の線形補間として計算されます。
double をアニメーション化するときは、アニメーションの開始時の値を From 値で指定し、絶対的な目標値を表す To 値または相対的な目標値を表す By 値まで値を変化させます。たとえば、アイテムの Canvas.Left プロパティを 100 (画面の左端近く) から 500 まで変化させるには、From を 100 に設定し、To を 500 に設定するか、または By を 400 に設定します。両方とも設定すると、To プロパティが優先され、By プロパティは無視されます。また、四角形が既に目的の From 位置にある場合は、From プロパティを指定しなくてもかまいません。
上記の XAML は、この動作を表示する例です。四角形は Canvas.Left の値が 100 の位置にあり、DoubleAnimation では To 値を 500 に指定しています。したがって、アニメーションでは値が 100 から 500 まで変化し、四角形が画面上を横切って右に移動します。
ColorAnimation を使用して色をアニメーション化する
ColorAnimation の動作は DoubleAnimation と似ています。時間経過による要素の色の変化を示す値を指定します。アニメーションは、指定した時間に対する色の値どうしの線形補間として計算されます。
色をアニメーション化するときは、From プロパティを使用してアニメーション開始時の値を指定します。この値を指定しない場合、現在の色が使用されます。希望する終了時の色は To 属性を使用して指定します。By 属性を指定することもできます。この属性は、From の色 (つまり開始時の色) の値を By の色に追加することで、終了時の色を指定します。
色ベースのプロパティのアニメーション化では、プロパティの内容を直接アニメーション化することはありません。これは、プロパティの内容は通常、色ではなくブラシであるためです。したがって、たとえば、四角形の塗りつぶしの色をアニメーション化する場合は、四角形の Fill プロパティは対象として使用しません。代わりに、塗りつぶしに使用している SolidBrush の Color プロパティをアニメーション化するように指定します。
図 7 では、色のアニメーションを使用して四角形の色をアニメーション化し、5 秒間で黒から白に変化させる方法の例を示します。コードからわかるように、この XAML では、図形を塗りつぶしている SolidColorBrush の Color プロパティをアニメーションの対象として指定しています。これは、この例のような複雑なプロパティの処理で一般的に使用する XAML 構文です。
図 7 色の変化のアニメーション化
<Rectangle x:Name="rect" Canvas.Top="100"
Canvas.Left="100" Width="100"
Height="100" Fill="Black">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty=
"(Shape.Fill).(SolidColorBrush.Color)"
To="#00000000" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
PointAnimation を使用して点をアニメーション化する
点として定義される値を時間と共に変更するには、PointAnimation 型を使用します。アニメーションは、指定した時間長での値どうしの線形補間として計算されます。
色および Double のアニメーションと同様に、From を使用して開始の値を指定し、相対的な方向 (By を使用) または絶対的な点 (To を使用) として移動先を指定します。図 8 では、ベジエ曲線の終点をアニメーション化する方法の例を示します。この場合、ベジエ曲線は始点 (100,100)、終点 (300,100)、および制御点 (200,0) で定義されます。アニメーションは、パスが読み込まれた後でトリガするように設定され、曲線の終点 (Point2) を 5 秒間で (300,100) から (300,600) まで移動します。
図 8 曲線の終点のアニメーション化
<Path Stroke="Black" >
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="100,100">
<QuadraticBezierSegment x:Name="seg"
Point1="200,0" Point2="300,100" />
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<PointAnimation Storyboard.TargetName="seg"
Storyboard.TargetProperty="Point2"
From="300,100" To="300,600" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
キーフレームを使用する
これまで説明してきた 3 種類のアニメーション ColorAnimation、DoubleAnimation、および PointAnimation はいずれも、定義されているプロパティを、線形補間を使用して時間と共に変化させることで動作します。たとえば、double 値を 5 秒間で 100 から 500 まで移動する場合、値は 1 秒間に 80 ずつ増加します。
どの種類のアニメーションも、キーフレームと呼ばれる一連のマイルストーンを使用して、この遷移を定義できます。開始プロパティから終了プロパティまでのアニメーションの線形動作を変更するには、1 つ以上のキーフレームを挿入するだけです。その後、これらのさまざまなポイント間でアニメーションのスタイルを定義します。
キーフレームは、キー時間を使用して定義します。キー時間は、アニメーションの開始時間を基準にして指定される時間であり、キーフレームの終了時間も指定します。たとえば、一定間隔の 3 つのキーフレームから成る 9 秒のアニメーションが必要な場合は、1 番目のキーフレームが 0:0:3 に終了し、2 番目が 0:0:6 に終了し、3 番目が 0:0:9 に終了するように指定できます。キー時間の長さを指定するのではなく、各キーフレームの終了時間を指定することに注意してください。
もう 1 つの例として、100 から 500 までの範囲の半分を対象とする Double アニメーションについて考えます。このアニメーションは、前半は非常に高速で変化し、後半は非常に低速で変化します。全体の遷移には 6 秒必要です。350 は 100 と 500 の中間点なので、350 の点で開始するようにキーフレームを定義します。始点から中間点まではキー時間 0:0:1 を使用して 1 秒で移動するように指定し、中間点から終点までは第 2 のキー時間 0:0:6 を使用して 5 秒になるように設定します。アイテムは、中間点までは画面をすばやく移動し、残りの道のりはゆっくりと移動します。
この前の例では、アニメーション化されるどちらのセグメントも線形補間されます。柔軟性を高めるため、他に 2 種類のキーフレームが提供されています。不連続なキーフレームでは、2 つの値の間で値が即座に変化し、スプライン キーフレームでは、値は二次曲線で定義される補間を使用して始点と終点の間を移動します。(以下のセクションでは、キーフレームを使用して Double 型のアニメーションを定義する方法を説明します。Point 型および Color 型のアニメーションにも同じ原理が適用されます。)
キーフレームを指定するには、アニメーションに対して UsingKeyFrames という接尾辞を使用します。つまり、Double アニメーションを定義してキーフレームを使用するには、DoubleAnimationUsingKeyFrames を使用して対象とプロパティを指定します (方法は DoubleAnimation と同じです)。DoubleAnimationUsingKeyFrames には、キーフレームの定義が含まれます (既に説明したように、PointAnimationUsingKeyFrames または ColorAnimationUsingKeyFrames についても同じです)。
線形キーフレームを使用する
2 つのプロパティ値の間をアニメーション化する既定の方法は線形補間であり、全体が時間の経過に対して均等に分割されます。LinearKeyFrame 型を使用して、フレーム間の線形ステップを定義することもできます。その場合も線形補間が使用されますが、キーフレームの間に使用されるので、加速/減速効果を実現できます。
図 9 の最初の部分で示されているアニメーション コードについて考えてみましょう。ここでは、DoubleAnimationUsingKeyFrames を使用して 2 つのキーフレームが定義されています。1 つでは、1 秒間に Canvas.Left が 0 から 300 まで変化する線形補間が定義されており、もう 1 つでは、8 秒間に Canvas.Left が 300 から 600 まで変化する線形補間が定義されています。これにより、中間地点までは四角形が高速で移動し、残りの半分は低速で移動する効果が得られます。LinearPointKeyFrame および LinearColorKeyFrame にも同様の原理が適用されます。
図 9 キーフレームによるアニメーション
線形補間
<Rectangle Fill="#FFFF0000" Stroke="#FF000000"
Width="40" Height="40"
Canvas.Top="40" x:Name="rect">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)" >
<LinearDoubleKeyFrame KeyTime="0:0:1" Value="300" />
<LinearDoubleKeyFrame KeyTime="0:0:9" Value="600" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
不連続のキーフレーム
<Rectangle Fill="#FFFF0000" Stroke="#FF000000"
Width="40" Height="40"
Canvas.Top="40" x:Name="rect">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="rect"
Storyboard.TargetProperty="(Canvas.Left)" >
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="300" />
<DiscreteDoubleKeyFrame KeyTime="0:0:9" Value="600" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
不連続のキーフレームを使用する
プロパティをある値から別の値まで変化させ、線形補間を使用しない場合は、不連続のキーフレームを使用できます。これにより、オブジェクトは指定したキーフレーム時間の値にジャンプします。
図 9 の第 2 の部分では、前と同じ例が、不連続なキーフレームを使用して示されています。アニメーションが始まって 1 秒後に、四角形は画面の半分までジャンプします。その後、アニメーションが始まって 9 秒後に、四角形は画面の右端までジャンプします。DiscretePointKeyFrame および DiscreteColorKeyFrame にも同様の原理が適用されます。
スプライン キーフレームを使用する
加速と減速に対応する曲線の値を使用して、プロパティをある値から別の値まで変化させるには、スプライン キーフレームを使用します。そのためには、最初に二次ベジエ曲線を定義した後、その曲線の平行射影により、プロパティがある値から別の値に移動する速度を指定します。
これを視覚的に把握するのが難しい場合は、次のような状況を考えてみてください。太陽は真上にあり、野球で打球が外野に飛びます。ボールの影を目で追います。ボールが上昇している間、影の動きは加速しているように見えます。ボールが頂点に達した時点では、影は減速しています。ボールが落下するときは、捕球されるまで、または地面に落ちるまで、影の速度は再び加速します。
この場合のアニメーションがボールの影で、スプラインがボールの曲線であると想像してみてください。野球ボールの軌跡であるスプラインは、KeySpline を使用して定義します。KeySpline では、二次ベジエ曲線の制御点を定義します。KeySpline は、曲線の 1 番目の点が 0 で、2 番目の点が 1 であるように正規化されます。野球ボールが描く軌跡である放物線の円弧の場合、KeySpline にはコンマで区切られた 2 つの正規化された値が含まれます。
野球ボールの軌跡のような曲線を定義するには、0.3,0 0.6,1 のような KeySpline を使用してスプラインを指定します。この KeySpline は、曲線の 1 番目の点 (0.3,0) と 2 番目の点 (0.6,1) を定義しています。これにより、野球ボールの移動の約 3 分の 1 が完了するまではアニメーションは急速に加速し、ボールの軌跡の約 3 分の 2 に達するまでは一定の速度で移動し、残りの部分は減速するという、地面へのボールの落下をシミュレートするアニメーション効果が得られます。
図 10 では、KeySpline と DoubleAnimationUsingKeyFrames を使用してこのシミュレーションのスプラインを定義する例を示します。この例は、飛んでいるボールを上から見下ろしたときのボールの影をシミュレートするように、画面上を移動する楕円をアニメーション化します。
図 10 KeySpline によるスプラインの定義
<Ellipse Fill="a#FF444444" Stroke="#FF444444"
Width="40" Height="40"
Canvas.Top="40" x:Name="ball">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(Canvas.Left)" >
<SplineDoubleKeyFrame KeyTime="0:0:5"
KeySpline="0.3,0 0.6,1" Value="600" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
アニメーションと Expression Blend
Expression Blend™ を使用すると、アニメーションをグラフィカルに定義できます。アニメーションを実行するための XAML が生成され、異なる種類のアニメーションが自動的に提供されます。
Expression Blend を使用するときは、[ウィンドウ] メニューからアニメーション ワークスペースを選択します。タイムラインをグラフィカルに設計するためのツールが提供され、ビジュアル エディタを使用して変更するプロパティを編集すると、アニメーションの XAML コードが生成されます。
画面の下部には、[オブジェクトとタイムライン] ビューが表示されます。このビューでは、タイムラインを追加した後、キーフレームを視覚的に追加できます。新しいタイムラインを追加するには、[オブジェクトとタイムライン] ビューで [+] ボタンをクリックします。
[+] ボタンをクリックすると、[ストーリーボードの作成] ダイアログ ボックスが表示され、作成するストーリーボードの名前の指定を求められます。次の例では、既定の名前の Storyboard1 を Timeline1 に変更し、[リソースとして作成] チェック ボックスをオフにしています。
Expression Blend を使用すると、キャンバス レベルで、またはリソースとして、アニメーションを作成できます。前者の場合は、キャンバスでのトリガに対する応答としてアニメーションを実行します。次に示すのは、[ストーリーボードの作成] ダイアログ ボックスから Blend によって作成された XAML の例であり、リソースとしてアニメーションを作成しないことが指定されています。
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="Timeline1"/>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
[リソースとして作成] チェック ボックスをオンにすると、ストーリーボードは <Canvas.Resources> 内に作成され、JavaScript から実行する必要があります。
[オブジェクトとタイムライン] ビューに作成したタイムラインが表示されます。図 11 の下部にタイムラインが表示されています。タイムラインの時間 0 にある縦線は、現在の時間を示します (Expression Blend では、この線は黄色で表示されます)。キーフレームを追加するには、この線をキーフレームの時間までドラッグし、[キーフレームの記録] ボタンをクリックします。このボタンは、0:00:000 の左側のタイムラインのすぐ上にあります。
.gif)
図 11 Expression Blend のアニメーション ワークスペース (クリックすると拡大画像が表示されます)
線を 4 秒のマークまでドラッグして、キーフレームを追加します。タイムライン上の小さい楕円として、キーフレームが追加されます。タイムラインが 4 秒のフレーム上にあり、キーフレームを追加したので、四角形の色、位置、不透明度、または形状を編集でき、アニメーションを容易にするために必要な正しい変換が、Blend によって計算されます。最後に、タイムライン インジケータをドラッグすると、アニメーションをプレビューし、特定の時間における表示を確認できます。
この記事では、Silverlight XAML で変換とアニメーションを定義する方法を説明しました。オブジェクトの回転、拡大/縮小、または傾斜に使用するさまざまな種類の変換を紹介し、形状に適用するアフィン行列を使用した自由形式の変換についても説明しました。次に、アニメーションの概要を説明し、XAML トリガに基づいて実行するアニメーションの定義方法を示しました。アニメーションが時間と共にプロパティ値を変更するようすを示し、double、点、および色の値のアニメーション化をサポートする XAML の型を説明しました。アニメーションをきめ細かく制御するためのキーフレームの使用方法を説明しました。最後に、Expression Blend アニメーション デザイナを紹介し、Expression Blend を使用すると簡単にアニメーションを視覚的に生成できることを示しました。
Laurence Moroney は、マイクロソフトで Silverlight を専門にしている上級テクノロジ エバンジェリストです。Silverlight、AJAX、相互運用性、セキュリティなど、コンピューティングに関する多くの本を執筆しています。
blogs.msdn.com/webnext で彼のブログをご覧いただけます。