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

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

元に戻す

　演出目的で用いられるアニメーションの多くは、オブジェクトの状態が最終的なプロパティの値に遷移した後、元の状態に戻したいと考えることでしょう。例えば、一瞬だけオブジェクトを強調するアニメーションを考えてみてください。オブジェクトの色が一瞬だけ変化したり、またはオブジェクトのサイズが一瞬だけ大きくなるといった演出が一般的だと思われますが、こうした種類のアニメーションはオブジェクトが一瞬だけ変化し、再び元の状態に戻る必要があります。

　複数のアニメーションを組み合わせて、元の状態に戻るように仕掛ける方法もありますが、そのような面倒な作業をする必要はありません。Timelineオブジェクトには、アニメーションが最終的な値に到達した後、同じ時間をかけて元の状態に復元させるAutoReverseプロパティを持ちます。

<object AutoReverse="Boolean" .../>

　デフォルトでこのプロパティにはfalseが設定されていますが、trueに変更することで、アニメーションを実行した後で逆の手順を踏んでオブジェクトを元の状態に復元させることができます。

Sample06 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"
      To="400" Duration="0:0:2" AutoReverse="true"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample06を実行する

　Sample06をSilverlightで実行すると、Rectangleオブジェクトの幅が初期の100からToプロパティに設定されている400まで進行し、その後AutoReverseプロパティの効果で元の幅に戻っていくことが確認できます。

　AutoReverseプロパティにtrueを設定している場合は、アニメーションが最終的な値に到達すると、同じ時間をかけてアニメーションを逆再生するような形で元の状態に戻りました。アニメーションによる元の状態への復元ではなく、アニメーション終了時に単純にオブジェクトのプロパティを元の状態に復元したい場合はFillBehaviorプロパティを利用します。

Timelineオブジェクト FillVehaviorプロパティ

<object FillBehavior="FillBehavior" .../>

　FillBehaviorプロパティには、アニメーションが終了したときの振舞いを設定します。このプロパティにはFillBehavior列挙体で定められているいずれかの値を設定します。デフォルトでは、最終的なプロパティの値で停止することを表すHoldEndが設定されています。この値をStopに変更することで、Timelineオブジェクトによるアニメーションが終了したときに、アニメーションを開始する直前のプロパティの値に復元することができます。

Sample07 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"
      To="400" Duration="0:0:3"
      FillBehavior="Stop"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample07を実行する

　Sample07では、DoubleAnimationオブジェクトのFillBehaviorプロパティにStopを設定し、アニメーションが終了すると同時に、Rectangleオブジェクトの幅をアニメーションが開始される直前の状態に戻るようにしています。

繰り返す

　アニメーションを一定数だけ繰り返してい実行することも可能です。アニメーションの繰り返しにはTimelineオブジェクトのRepeatBehaviorプロパティを用います。

Timelineオブジェクト RepeartBehaviorプロパティ

<object RepeatBehavior="RepeatBehavior" .../>

　RepeatBehaviorプロパティは、対象のTimelineオブジェクトを何度繰り返すかを設定します。この値には、Durationプロパティと同じように時間を設定する方法と、回数を設定する方法、そして制限なく永久に繰り返すことを表すForeverを設定する3種類があります。

　時間を設定する方法はh;m:s方式で、繰り返す時間を設定します。この時間が経過するとアニメーションが停止します。

　回数を指定する場合は、xという接尾辞を持つ整数を指定します。このプロパティのデフォルトの値は1x、つまり1度だけ実行することを表す値が設定されています。2xであれば2回、3xであれば3回アニメーションを繰り返します。

　Foreverという文字列を与えた場合、Timelineオブジェクトは終了することなく永遠にアニメーションを繰り返し続けます。

Sample08 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"
      To="400" Duration="0:0:1"
      RepeatBehavior="Forever"
     />
    </Storyboard>
   </BeginStoryboard>
  </EventTrigger>
 </Rectangle.Triggers>
</Rectangle>

• Sample08を実行する

　Sample08は、長方形の幅を変更するアニメーションを永遠に繰り返します。DoubleAnimationオブジェクトのRepeatBehaviorの値をForeverに変更することで、アニメーションが終了すると同時に、再び最初からアニメーションが再生されます。AutoReverseプロパティと組み合わせることで、点滅などの演出に利用できるでしょう。