編集部注：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のようになります。
| タイプ | ベーシックアニメーション | キーフレームアニメーション | |
|---|---|---|---|
| Color | ColorAnimation | ColorAnimationKeyFrames | |
| Double | DoubleAnimation | DoubleAnimationKeyFrames | |
| Point | PointAnimation | PointAnimationKeyFrames |
アニメーションは時間軸に基づいて値を変化させる
Silverlightにおけるアニメーションはすべてタイムライン（時間軸）に基づいて値を変化させることで定義されています。そのため、アニメーションをタイムラインと呼んで差支えないほど密接な関係にあります。Silverlightでアニメーションを定義するには、必ず3つのオブジェクトを必要とします。それは「イベントトリガ」「ストーリーボード」「アニメーション」の3つのオブジェクトです。
「イベントトリガ」は、通常のJavaScriptや.NETアプリケーションなどのイベント駆動型プログラミングではおなじみのイベントのトリガになります。アニメーションは何らかのイベントを検知することでスタートしますので、そのスタートタイミングを定義するトリガが必要となります。ただし、Silverlight 1.0においては、「Loaded」イベントのみしか定義できません。
「ストーリーボード」は、アニメーションの一連の動作を定義するオブジェクトになります。このストーリーボードの単位がアニメーションの動作の単位になります。このストーリーボードには、表2のようなプログラムからコントロールするためのメソッドが定義されています。
| メソッド | 詳細 | |
|---|---|---|
| Begin | ストーリーボードの開始 | |
| Pause | ストーリーボードの一時停止 | |
| Resume | 一時停止していたストーリーボードの再開 | |
| Stop | ストーリーボードの停止 | |
| Seek | ストーリーボードアニメーションの特定のパートへスキップ |
「アニメーション」は、各アニメーションの定義を行います。アニメーションの単位は、「From」から「To」までの値の変化になり、これをグルーピングしたものがストーリーボードになります。このアニメーションには、表1で示したようなタイプを選択できます。
これらの3つの定義を行って初めてアニメーションとしてプログラムを動作させることができます。簡単な例としては以下のようになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ここでは、Rectangleオブジェクトの透明度を変化させるベーシックアニメーションをサンプルとしています。
最初のEventTriggerオブジェクトの定義では、「RoutedEvent」プロパティにRectangleオブジェクトがロードされたタイミングをトリガとする「Loaded」イベントを設定しています。ほかにEventTriggerオブジェクトに設定できるプロパティは表3のとおりです。
| プロパティ | 詳細 | デフォルト値 | |
|---|---|---|---|
| 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のとおりです。
| プロパティ | 詳細 | デフォルト値 | |
|---|---|---|---|
| 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 |
次のページでは、速度を変化させる「キーフレームアニメーション」について解説し、グローアップアプリケーションに前回学んだグラフィックス機能を追加します。
Copyright © ITmedia, Inc. All Rights Reserved.