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

.NETを知らない人でも分かるSilverlight入門(4):シンプルで機能的なSilverlightのアニメーションとは? (1/3)

[松原晋啓,@IT]

編集部注: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 Ellipseオブジェクトサンプル実行例の画像 図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

 次のページでは、速度を変化させる「キーフレームアニメーション」について解説し、グローアップアプリケーションに前回学んだグラフィックス機能を追加します。

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。