アニメーション

手引き: オブジェクトのアニメーション

step 1: アニメーションするものを選ぶ

まず、アニメーションするものが必要です。ここでは Ellipse を使います。 以下の例では、Ellipse を作成して、黒く塗りつぶしています。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black" />
</Canvas>

[hide] [restart]

この楕円には名前が付けられていることに注意してください。

x:Name="ellipse"

この楕円をアニメーションするためには名前が必要なのです。 これでアニメーションさせるオブジェクトが手に入りました。 次のステップは、アニメーションを開始するための EventTrigger の作成です。

step 2: EventTrigger の作成

EventTrigger を何かが始動させると、その動作を実行します。 名前が示すとおり、"何か" とはイベントのことで、その RoutedEvent プロパティで指定されます。 アニメーションを開始するためには EventTrigger が必要であり、 その動作には BeginStoryboard を使います。

また、アニメーションを始動させるイベントを決める必要があります。 今のところ、EventTrigger はひとつのイベント、つまり Loaded イベントしかサポートしていないので、これは簡単なことです。 RoutedEvent プロパティには Canvas.Loaded を割り当てます。 これで、メインの Canvas が読み込まれた（Loaded）ときにアニメーションを開始できます。 以下の例は、これを行うマークアップを示しています。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          
          <!-- Insert Storyboard here. -->
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[hide] [restart]

さあ、これで Storyboard とアニメーションを作成する準備ができました。

step 3: Storyboard とアニメーションの作成

Storyboard は、ひとつ以上のアニメーションを記述し、制御できます。 この例では、ひとつのアニメーションしか使いません。 Silverlight では、アニメーションをプロパティに割り当てて使います。 Ellipse の Canvas.Left プロパティを アニメーションさせるために DoubleAnimation を使います。 DoubleAnimation を使うのはアニメーションさせるプロパティ、 Canvas.Left が Double （倍精度浮動小数点数）型だからです。

アニメーションを処理するために、対象となる名前(Storyboard.TargetName="ellipse")、 対象プロパティ(Storyboard.TargetProperty="(Canvas.Left)")を与え、 アニメーションする間隔（Duration）と終了値(To="300")を指定します。 Duration プロパティは、アニメーションが開始値から終了値まで遷移する時間の 長さを指定するものです。 0:0:1 という値は、1秒という Duration（間隔）をあらわします。

（必要なら "restart" をクリックしてください。クイックスタートのアニメーションは、このページの以前のサンプルを見た時に、すでに開始されているかもしれないためです。Duration と RepeatBehavior の設定を変えることで、コードを再読み込みして再開するまでアニメーションが開始しないようにできます。）

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation 
              Storyboard.TargetName="ellipse"
              Storyboard.TargetProperty="(Canvas.Left)"
              To="300" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[hide] [restart]

DoubleAnimation を使ったのは、アニメーションした Canvas.Left が Double 型であるためです（Double は倍精度浮動小数点値です）。

おめでとう! これで最初の Silverlight アニメーションが作成できました。 Silverlight のアニメーション機構をもっと知るために、続けて以下をお読みください。

その他のアニメーション

Silverlight は、色のアニメーション(ColorAnimation)や座標のアニメーション(PointAnimation)もサポートしています。色をアニメーションするときは、「色」と SolidColorBrush の違いを覚えておいてください。 図形の Stroke や Fill プロパティに、色名や16進数を指定すると、Silverlight は文字列を SolidColorBrush に変換します。 図形の Stroke や Fill をアニメーションするためには、 設定するプロパティの SolidColorBrush の Color プロパティを アニメーションする必要があります。 一般に、ブラシを使うプロパティをアニメーションしたい場合は、ブラシを定義するために色名や16進数よりも冗長な構文を使って、 名前を指定する方がよいでしょう。

以下の例は、2つの楕円の色をアニメーションします。最初の楕円の Fill は、 明示的に SolidColorBrush を使って設定されています。 この例は、SolidColorBrush に名前を与えて、Color プロパティを アニメーションします。 2番目のアニメーションは、楕円の Fill は色名を使って設定されているので、もう少し複雑です。 マークアップが実行するとき、システムは適切な色の SolidColorBrush を作成し、 楕円を塗りつぶすために使います。名前をつけるのに <SolidColorBrush> というタグはないので、 システムが生成した SolidColorBrush は、対象となるプロパティを間接的に使うことで アニメーションされます。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Red" To="Blue" Duration="0:0:5" />
            <ColorAnimation 
               Storyboard.TargetName="e2"
               Storyboard.TargetProperty="(Fill).(Color)"
               From="Red" To="Blue" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse 
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
    <Ellipse.Fill>
      <SolidColorBrush x:Name="e1_brush" Color="black"/>
    </Ellipse.Fill>
  </Ellipse>
  
  <Ellipse x:Name="e2" Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>

[hide] [restart]

Timeline のプロパティ

Storyboard と DoubleAnimation は、どちらも Timeline オブジェクトです。Timelines は、便利なプロパティをたくさん持っています。

• Storyboard.TargetName: アニメーションするオブジェクトの名前。 Storyboard.TargetName を指定しないと、タイムラインは親のタイムラインの Storyboard.TargetName を使います。 その親のタイムラインで Storyboard.TargetName が指定されないと、 タイムラインは開始された EventTrigger を所有する要素を指します。
• Storyboard.TargetProperty: アニメーションするプロパティ。 Storyboard.TargetProperty を指定しないと、 タイムラインは親のタイムラインの Storyboard.TargetProperty を使います。 このプロパティの構文は、アニメーションされるプロパティの型に応じて変わります。
  • 付属プロパティを対象にする場合、以下の構文を使います: "(ownerType.propertyName)"。 たとえば、"(Canvas.Top)" は Canvas.Top プロパティを対象にします。
  • 他のプロパティを対象にするためには、以下の構文を使います: "propertyName". たとえば、"Opacity" は Opacity プロパティを対象にします。
• BeginTime: タイムラインの開始する時間。この構文においては、デフォルトの単位が "日" であることに注意してください（単純に、このプロパティを "2" に設定すると、BeginTime は 2日ということになります）。 次の構文は時、分、秒を表します: hours:minutes:seconds。たとえば、"0:0:2" は BeginTime に 2秒（0時間、0分、2秒）を指定します。 BeginTime を指定しないと、プロパティのデフォルト値は 0 秒になります。
• Duration: アニメーションを１回再生するために必要な、タイムラインの時間の長さです。 アニメーションにおいては、これは開始値から終了値までの再生にかかるための時間の長さです。 Duration プロパティは、BeginTime プロパティと同じ構文を使います。 繰り返しますが、秒数を指定しようとして日数を指定しないよう注意してください。 Duration には、"Forever" や "Automatic" という特別な値を指定することもできます。 デフォルト値は、"Automatic" です。 これらの特別な値については Silverlight SDK の Duration を参照してください。
• FillBehavior: タイムラインが再生を終了したときの動作を指定します。 このプロパティは、Stop か HoldEnd のいずれかの値をとります。 "Stop" は、プロパティの値をアニメーションが始まる前の値に戻します。 "HoldEnd" は、アニメーションしたプロパティをアニメーションが終了した値のまま維持します。
• RepeatBehavior: タイムラインが何回繰り返すかを指定します。 このプロパティは、繰り返す回数、時間の値、特別な値（Forever）のいずれかになります。
  • "Forever" は、タイムラインがいつまでも繰り返すことを表します。
  • 時間の値は、指定した時間の長さだけ再生を続けます。たとえば、RepeatBehavior を "0:0:5" に設定すると、Duration が 2.5 秒に設定されたアニメーションは 2回繰り返されることになります。
  • 繰り返す回数が指定された場合、タイムラインはその数だけ再生を繰り返します。 繰り返す回数は、次の構文で指定します: iterationCountx。 たとえば、"4x" はタイムラインを4回繰り返すことを示します。
  デフォルト値は、"1x" で、タイムラインを１回だけ再生します。

以下の例は、これらの Timeline プロパティを示しています。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard 
              Storyboard.TargetName="e1"
              Storyboard.TargetProperty="(Canvas.Left)"
              BeginTime="0:0:1">
            <DoubleAnimation To="300" />
            <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
            <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
            <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
            <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
            <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
            <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="e1" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
  <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
  <Ellipse x:Name="e2" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
  <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
  <Ellipse x:Name="e3" Fill="Purple"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
  <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
  <Ellipse x:Name="e4" Fill="Blue"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
  <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
  <Ellipse x:Name="e5" Fill="Green"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
  <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
  <Ellipse x:Name="e6" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
  <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
  <Ellipse x:Name="e7" Fill="Orange"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
  <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
  <Ellipse x:Name="e8" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
  <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>

[hide] [restart]