シンプルで機能的なSilverlightのアニメーションとは？：.NETを知らない人でも分かるSilverlight入門（4）（1/3 ページ）

» 2008年05月07日 00時00分公開

編集部注：Silverlightそのものについて詳しく知りたい読者は、本稿と併せて特集「Silverlightは次世代のJavaScriptフレームワーク？」もご参照ください。

Silverlightのエッセンスを引き立てるスパイス

　第4回となる今回は、前回の「シンプルで機能的なSilverlightのアニメーションとは？」で解説したグラフィックスに続いて、Silverlightのエッセンスを引き立てるスパイスたるアニメーションに焦点を当てて解説していきます。

　Silverlightは、機能的にはシンプルでとても分かりやすいものになっています。その特徴を一言でいってしまえば、「プロパティの値を変えてオブジェクトを動かす」だけです。基本的に、アニメーションを作成する際にはExpression Blendを使用するのですが、コードベースで使用方法を説明するととても複雑になります。

編集部注：Microsoft Expression Blendについて詳しく知りたい読者は、Insider.NETフォーラムの記事「Vista時代のWindowsアプリ・デザイン・ツール」をご参照ください。

　そのため、いつもは各機能に対して徹底的に解説してきましたが、今回はできるだけシンプルに分かりやすく、かつ応用できるような解説をしていこうと思います。

Silverlightのアニメーションタイプ2種

　Silverlightのアニメーションは、大きく2つのカテゴリに分けることができます。1つは「From / To / Byアニメーション」で、もう1つは「キーフレームアニメーション」です。

　「From / To / Byアニメーション」は「ベーシックアニメーション（以後、この名前で呼びます）」とも呼ばれていて、すぐにでも活用できるような構造になっています。使い方は、その名のとおり、「始端（＝From）と終端（＝To）のプロパティ値を設定し、その動作を設定（＝By）」することです。このアニメーションは、始端と終端の間の値を自動的に補完しますので、アニメーションの速度は一定になります。

　「キーフレームアニメーション」は、キーフレームオブジェクトを使用して一連の動作の値を設定することで、その間の動作を変化させることができます。「ベーシックアニメーション」は速度が一定だったのに対して、このアニメーションを使用することでアニメーションの速度を変化させることが可能です。例えば、ボールが落下するようなアニメーションを作る場合、最初はゆっくりで、徐々に加速するようなアニメーションを作成できます。

　Silverlightで使用できるアニメーションのタイプは3つあります。それぞれ、「Color」「Double」「Point」と呼ばれていて、「Color」は色を、「Double」はプロパティの値を、「Point」はオブジェクトの位置を変化させるアニメーションになります。それぞれのカテゴリで使用するオブジェクトは表1のようになります。

**表1　アニメーションタイプに対応するオブジェクト**
タイプ	ベーシックアニメーション	キーフレームアニメーション
Color	ColorAnimation	ColorAnimationKeyFrames
Double	DoubleAnimation	DoubleAnimationKeyFrames
Point	PointAnimation	PointAnimationKeyFrames

アニメーションは時間軸に基づいて値を変化させる

　Silverlightにおけるアニメーションはすべてタイムライン（時間軸）に基づいて値を変化させることで定義されています。そのため、アニメーションをタイムラインと呼んで差支えないほど密接な関係にあります。Silverlightでアニメーションを定義するには、必ず3つのオブジェクトを必要とします。それは「イベントトリガ」「ストーリーボード」「アニメーション」の3つのオブジェクトです。

　「イベントトリガ」は、通常のJavaScriptや.NETアプリケーションなどのイベント駆動型プログラミングではおなじみのイベントのトリガになります。アニメーションは何らかのイベントを検知することでスタートしますので、そのスタートタイミングを定義するトリガが必要となります。ただし、Silverlight 1.0においては、「Loaded」イベントのみしか定義できません。

　「ストーリーボード」は、アニメーションの一連の動作を定義するオブジェクトになります。このストーリーボードの単位がアニメーションの動作の単位になります。このストーリーボードには、表2のようなプログラムからコントロールするためのメソッドが定義されています。

**表2　ストーリーボードをコントロールするためのメソッド**
	メソッド	詳細
	Begin	ストーリーボードの開始
	Pause	ストーリーボードの一時停止
	Resume	一時停止していたストーリーボードの再開
	Stop	ストーリーボードの停止
	Seek	ストーリーボードアニメーションの特定のパートへスキップ

　「アニメーション」は、各アニメーションの定義を行います。アニメーションの単位は、「From」から「To」までの値の変化になり、これをグルーピングしたものがストーリーボードになります。このアニメーションには、表1で示したようなタイプを選択できます。

　これらの3つの定義を行って初めてアニメーションとしてプログラムを動作させることができます。簡単な例としては以下のようになります。

ソース1　ベーシックアニメーションのサンプル

<Rectangle
Name="MyAnimatedRectangle" Width="100"
Height="100"

  Fill="Blue">

  <Rectangle.Triggers>

<!--四角形の透明度を変化させるアニメーション -->

    <EventTrigger RoutedEvent="Rectangle.Loaded">

      <BeginStoryboard>

        <Storyboard>

          <DoubleAnimation

            Storyboard.TargetName="MyAnimatedRectangle"

            Storyboard.TargetProperty="Opacity"

            From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True"

            RepeatBehavior="Forever" />

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

  </Rectangle.Triggers>

</Rectangle>

図1　ベーシックアニメーションサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

　ここでは、Rectangleオブジェクトの透明度を変化させるベーシックアニメーションをサンプルとしています。

　最初のEventTriggerオブジェクトの定義では、「RoutedEvent」プロパティにRectangleオブジェクトがロードされたタイミングをトリガとする「Loaded」イベントを設定しています。ほかにEventTriggerオブジェクトに設定できるプロパティは表3のとおりです。

**表3　EventTriggerオブジェクトの主なプロパティ**
プロパティ	詳細	デフォルト値
Actions	イベントが発生した際に適用されるアクション（ストーリーボード）のコレクションを設定	空のオブジェクト
Name	オブジェクトの名前を設定	空の文字列
RoutedEvent	このトリガを発生させるイベントを設定	空の文字列

　次に、このイベントが発生した際に動作するストーリーボードを設定します（ここで、ストーリーボードを複数発生させる場合は、EventTriggerオブジェクトの「Actions」プロパティを使用します）。

　ストーリーボードの定義には、まずはBeginStoryboardオブジェクトを使用し、その中にStoryboardオブジェクトを設定することになります。Storyboardオブジェクトの中には、動作させたいアニメーションのタイプとその動作を設定します。ここでは、「DoubleAnimation」を使用して「MyAnimatedRectangle」という名前（Storyboard.TargetNameプロパティ）のRectangleオブジェクトのOpacityプロパティの値（Storyboard.TargetPropertyプロパティ）を5秒かけて（Durationプロパティ）「1」（Fromプロパティ）から「0」（Toプロパティ）へ変化させるアニメーションを作成しています。

　また、ここでは繰り返し設定（「AutoReverse」プロパティ）を「True」にし、この繰り返し回数（RepeatBehaviorプロパティ）を「Forever」（永遠）にしています。ほかにStoryboardオブジェクトに設定できるプロパティは表4のとおりです。

**表4　Storyboardオブジェクトの主なプロパティ**
プロパティ	詳細	デフォルト値
AutoReverse	タイムラインの動作を反転するかを設定	false
BeginTime	タイムラインの開始時間を設定	0
Children	子タイムラインオブジェクトのコレクションを設定	空のコレクション
Duration	タイムラインの間隔を設定。値には「h:m:s」文字列か、「Automatic」か、「Forever」のいずれかを定義	null
FillBehavior	実行を終えたタイムラインの振る舞いを設定。値には「HoldEnd」か、「Stop」のいずれかを定義	HoldEnd
Name	オブジェクトの名前を設定	空の文字列
Duration	タイムラインの間隔を設定。値には「h:m:s」文字列か、「Automatic」か、「Forever」のいずれかを定義	空の文字列
RepeatBehavior	タイムラインの繰り返し回数を設定。値には数値か、「Forever」のいずれかを定義	1
SpeedRatio	タイムラインのスピードを設定	1
Storyboard.TargetName	アニメーションを行うオブジェクトの名前を設定	null
Storyboard.TargetProperty	アニメーションを行うオブジェクトのプロパティの名前を設定	null