アニメーションの基本
Silverlightでは、アニメーションは大きく次の3つに分けることができます。
- DoubleAnimation……数値（小数含む）を変化させて実現するアニメーション
- PointAnimation……座標のような2つの数値を変化させて実現するアニメーション
- ColorAnimation……色を変化させるアニメーション
なお、DoubleAnimationの「Double」とは「倍精度浮動小数点数」のことです。
ここでは、DoubleAnimationの例として四角形の透明度（Opacity）を変化させるアニメーションを取り上げ、Silverlightでのアニメーションの基本的な記述方法を紹介します。以下がサンプルです。ページが読み込まれると、すぐにアニメーションがスタートします。
http://www.makoto3.net/xaml/silverlight0067/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle x:Name="MyRect" Width="100" Height="100" Fill="red" Canvas.Left="100" Canvas.Top="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRect"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
色で指定した箇所について、1つずつ説明します。
●<Rectangle.Triggers>～</Rectangle.Triggers>
四角形の<Rectangle>～</Rectangle>の最初の子要素として書いてあるのが<Ractangle.Triggers>～</Ractangle.Triggers>です。Triggerの「トリガー」には「きっかけ」とか「引き金」といった意味があるので、""四角形をアニメーションするきっかけを指定する"と理解しておけばよいと思います。
●<EventTrigger RouteEvent="Rectangle.Loaded">～</EventTrigger>
具体的な"きっかけ"をRoutedEvent属性で指定します。ここはRectangle.Loadedなので、"四角形が読み込まれたとき"がアニメーションが始まる"きっかけ"です。
●<BeginStoryBoard>～</BeginStoryBoard>
後述するストーリーボード(Storyboard)を指定するための記述です。ヘルプでは、次のように書かれています。
BeginStoryboard is used as a wrapper around a Storyboard that is being triggered. A BeginStoryboard can only contain one Storyboard, not a collection of them
要するに、<BeginStoryBoard>はストーリーボードを囲むラッパー(wrapper)というもので、<BeginStoryBoard>～</BeginStoryBoard>内には、ストーリーボードを1つだけ書けるということですね。
●<Storyboard>～</Storyboard>
これが「ストーリーボード」で、内部に書くアニメーションの入れ物・土台といった役割を果たします。
●<DoubleAnimation～/>
アニメーションの本体であるDoubleAnimationの指定です。Storyboard.TargetName属性は"動かす要素"の指定です。サンプルでは"MyRect"と指定していますが、これは<Rectangle>のx:Nameで指定した名前なので、この四角形を動かすことになります。
Storyboard.TargetProperty属性は、"変化させる性質（プロパティ）"の指定です。ここでは"Opacity"なので透明度を変化させることになります。
Fromは変化させる数値の開始値、Toは終了値、DurationはFromからToまでの所要時間です（時:分:秒で指定します）。このサンプルの場合、Opacityの値を、1.0から0.0まで3秒で変化させることになります。そして、AutoReverse="True"でアニメーションがの逆転再生を行い、RepeatBehavior="Forever"でそれをページが表示されるていあいだは無限に繰り返します。（このあたりの細かい指定は、また改めて説明します）。
※
だいたい以上が、ページが読み込まれたとき実行するアニメーションの基本です。タグの入れ子関係がちょっと面倒ですが、あまり深い意味は追求しないで、決まったルールと思って覚えてしまうのがよいかと思います。
なお、クリックなどの操作でアニメーションをスタートしたりストップさせたりするには、JavaScriptを使った別の方法が必要になります。詳しくは後述しますが、しばらくはJavaScriptは使わないで、XAMLだけに絞った説明を続けます。
このページは
xfy Blog Editor
を利用して作成されました。
コメント