Silverlight入門（4）－アニメーションの作成

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

アニメーションの振舞い

　Sample01のDoubleAnimationオブジェクトによるアニメーションは、Double型のプロパティの値をDoubleAnimationオブジェクトのToプロパティに設定されている値に向かって進行するというものでした。アニメーションの開始時の値は、対象のプロパティに設定されている値が使われました。Sample01の場合はRectangleオブジェクトのWidthプロパティの初期の値である100から、DoubleAnimationオブジェクトのToプロパティに設定されている400に向かって進行します。

　DoubleAnimationオブジェクトには、これとは逆の方向に向かってアニメーションを進行させるFromプロパティも用意されています。

DoubleAnimationオブジェクト Fromプロパティ

<object From="Double" .../>

　Fromプロパティが設定されている場合、Fromプロパティの値から、元の値に向かってアニメーションが進行します。

Sample02 test.xaml

<Rectangle
 xmlns="http://schemas.microsoft.com/client/2007"
 Width="100" Height="100" Fill="Black" Name="rect"
>
 <Rectangle.Triggers>
  <EventTrigger RoutedEvent="Rectangle.Loaded">
   <BeginStoryboard>
    <Storyboard>
     <DoubleAnimation
      Storyboard.TargetName="rect"
      Storyboard.TargetProperty="Width"
      From="400" Duration="0:0:10"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample02を実行する

　Sample02のDoubleAnimation要素はTo属性ではなくFrom属性を指定しています。そのため、このXAMLによって生成されるDoubleAnimationオブジェクトはFrom属性に設定されている値400からアニメーションを開始し、長方形の元の幅100に向かって進行します。

　FromプロパティとToプロパティを組み合わせることも可能です。これらのプロパティのデフォルトの値はnullとなっていますが、null以外の値が設定されている場合はプロパティが有効であると解釈されます。両方のプロパティに値を設定した場合、Fromプロパティに設定されている値からアニメーションが開始し、Toプロパティの値に向かって進行します。

Sample03 test.xaml

<Rectangle
 xmlns="http://schemas.microsoft.com/client/2007"
 Width="100" Height="100" Fill="Black" Name="rect"
>
 <Rectangle.Triggers>
  <EventTrigger RoutedEvent="Rectangle.Loaded">
   <BeginStoryboard>
    <Storyboard>
     <DoubleAnimation
      Storyboard.TargetName="rect"
      Storyboard.TargetProperty="Width"
      From="0" To="400" Duration="0:0:10"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample03を実行する

　Sample03のDoubleAnimationは、From属性とTo属性の両方に値を設定しています。そのため、Rectangleオブジェクトの元のWidthプロパティの値は使われず、Fromプロパティに設定されている0からアニメーションが開始し、Toプロパティの400に向かって進行します。

　アニメーション対象のプロパティの現在の値に加えた相対的な値を最終値とする場合には、Toに代わってByプロパティを利用します。

Sample04オブジェクト Byプロパティ

<DoubleAnimation By="Double" .../>

　Byプロパティが設定されている場合、アニメーション対象のプロパティの現在の値にByプロパティに設定されている値を加えた値が最終値となります。

Sample04 test.xaml

<Rectangle
 xmlns="http://schemas.microsoft.com/client/2007"
 Width="100" Height="100" Fill="Black" Name="rect"
>
 <Rectangle.Triggers>
  <EventTrigger RoutedEvent="Rectangle.Loaded">
   <BeginStoryboard>
    <Storyboard>
     <DoubleAnimation
      Storyboard.TargetName="rect"
      Storyboard.TargetProperty="Width"
      By="100" Duration="0:0:5"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample04を実行する

　Sample04のXAMLコードは、DoubleAnimation要素でToではなくBy属性を指定していします。Silverlightで実行すると、Rectangleオブジェクトの初期の幅100に、Byプロパティの値100を加算した幅200に向かってアニメーションが進行します。

　ToとByを同時に設定することも可能ですが、その場合Toプロパティが優先されByプロパティは無視されます。

　FromプロパティとByプロパティが同時に設定されている場合、Fromプロパティの値を軸にByプロパティの値を加算した値が最終値となります。

Sample05 test.xaml

<Rectangle
 xmlns="http://schemas.microsoft.com/client/2007"
 Width="100" Height="100" Fill="Black" Name="rect"
>
 <Rectangle.Triggers>
  <EventTrigger RoutedEvent="Rectangle.Loaded">
   <BeginStoryboard>
    <Storyboard>
     <DoubleAnimation
      Storyboard.TargetName="rect"
      Storyboard.TargetProperty="Width"
      From="200" By="-100" Duration="0:0:5"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample05を実行する

　Sample05は、DoubleAnimation要素のFrom属性に200、By属性に-100を設定しています。Silverlightで実行すると、Rectangleオブジェクトの幅200からアニメーションが開始され、200に-100を加えた値である100に向かって進行します。