Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Silverlight入門(4)-アニメーションの作成

Silverlightによるリッチなアニメーション処理

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/01/22 14:00

本稿では、XAMLによって宣言されたアニメーションをSilverlightで再生する方法について解説します。Silverlightのアニメーションは、オブジェクトのプロパティを指定された時間以内に、目的の値に向かって少しずつ変化させることで実現します。

目次

はじめに

 多くの環境では、アニメーションを実現するために専用のプログラムを書く必要があります。描画に関連する情報を繰り返し処理の中で変化させ、時間に合わせながら値を調整するコードを書かなければなりません。しかし、Silverlightであればプログラムコードを書く必要はなくXAMLだけでもアニメーションを実現することができます。

 これまでのWebでも、JavaScriptからHTML DOMオブジェクトを操作することで簡単なアニメーションを表現することができましたが、そのためには相応のスクリプトを書く能力が要求されました。SilverlightであればXMLベースのXAMLを使って、目的のアニメーションをテキストで直接記述できます。

 Silverlightのアニメーションは、特別なロジックを用いたものではなく、一定の時間内に、指定された値から目的の値まで、オブジェクトの対象のプロパティを少しずつ遷移させることで実現しています。例えば、オブジェクトの座標を数秒かけて目的の値まで変更することによって、画面上ではオブジェクトが平行移動しているように見せかけることができます。

 こうした性質から、Silverlightではインスタンスの生成や削除をアニメーションの流れに組み込むことはできません。しかし、デザイナが要求する視覚的な演出を目的としたアニメーションの多くは、Silverlight標準の機能で簡単に実現することができるでしょう。

これまでの記事

トリガ

 アニメーションを開始するには、アニメーションを起動させる必要があります。アニメーションの起動方法をオブジェクトに設定するにはUIElementオブジェクトのTriggersプロパティを使います。

UIElementオブジェクト Triggersプロパティ
<object>
 <object.Triggers>
  oneOrMoreEventTriggers
 </object.Triggers>
</object>

 Triggersプロパティは、TriggerCollectionオブジェクトを返します。TriggerCollectionは、任意の数のEventTriggerオブジェクトを保有するコレクションです。このオブジェクトはXAMLから利用することはありませんが、スクリプトから登録されたオブジェクトを操作するために用いられます。

TriggerCollectionオブジェクト
<TriggerCollection ...>
 oneOrMoreEventTriggers
</TriggerCollection>

 TriggerCollectionオブジェクトに追加するオブジェクトはEventTriggerオブジェクトです。このオブジェクトが、アニメーションを起動する方法を提供します。

EventTriggerオブジェクト
<EventTrigger>
 oneOrMoreBeginStoryboards
</EventTrigger>

 アニメーションを起動させるイベントはRoutedEventプロパティを指定します。ただし、Silverlight 1.0の時点では、親オブジェクトが読み込まれたときに起動することを表すLoadedしかサポートしていません。

EventTriggerオブジェクト RoutedEventプロパティ
<object RoutedEvent="parentObjectType.Loaded" .../>

 parentObjectTypeには、このEventTriggerを保有する親オブジェクトの型を指定します。例えば、Rectangleをアニメーションさせる場合はRectangle.Loadedを指定します。これ以外の種類のイベントに対応するには、スクリプトを部分的に書く必要があります。

 EventTrigger要素の内容となるoneOrMoreBeginStoryboardsには、BeginStoryboard子要素を指定できます。oneOrMoreBeginStoryboardsに指定した子要素は、実質的にはEventTriggerオブジェクトのActionsプロパティが返すTriggerActionCollectionオブジェクトに保有されます。

TriggerActionCollectionオブジェクト
<TriggerActionCollection ...>
 oneOrMoreBeginStoryboards
</TriggerActionCollection>

 ActionsプロパティはXAMLから利用することはできませんが、スクリプトからEventTriggerオブジェクトに指定されているBeginStoryboardオブジェクトを取り出す場合などに利用できます。TriggerActionCollectionオブジェクトは、任意の数のBeginStoryboardオブジェクトを格納するコレクションとして機能します。

 TriggerActionCollectionが保有するBeginStoryboardオブジェクトは、起動するアニメーションを表すStoryboardオブジェクトを保有しています。

BeginStoryboardオブジェクト
<BeginStoryboard>
 <Storyboard .../>
</BeginStoryboard> 

 BeginStoryboardオブジェクトに指定するStoryboardオブジェクトが、起動可能なアニメーションを表しています。BeginStoryboard要素の子要素に指定されたオブジェクトは、Storyboardプロパティに保存されます。Storyboardオブジェクトを、直接Storyboardプロパティから設定することも可能です。

BeginStoryboardオブジェクト Storyboardプロパティ
<object Storyboard="Storyboard" .../>

 Storyboardオブジェクトを作成することができれば、目的のアニメーションを起動できます。これまでの流れを要約すると、次のようになります。

<object ...>
 <object.Triggers>
  <EventTrigger RoutedEvent="object.Loaded">
   <BeginStoryboard>
    <!--任意の Storyboard オブジェクト-->
   </BeginStoryboard>
  </EventTrigger>
 </object.Triggers>
</object>

 上記のXAMLコードは、アニメーションさせるオブジェクトに対してTriggersプロパティを設定していします。ルート要素のobjectとある部分は、任意のUIElementオブジェクトを指定できます。オブジェクトをどのようにアニメーションさせるかについては、BeginStoryboard要素の子要素として指定するStoryboardオブジェクトを設定しなければなりません。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

バックナンバー

連載:Silverlight入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5