アニメーションの概要

[アーティクル]
08/16/2008

更新 : 2007 年 11 月

Windows Presentation Foundation (WPF) には、魅力的なユーザーインターフェイスやドキュメントを作成できるようにする一連の強力なグラフィックスおよびレイアウトの機能が用意されています。アニメーションを利用すれば、魅力的なユーザーインターフェイスをさらに鮮やかで使いやすくすることができます。背景色をアニメーション化したり、動画の Transform を適用するだけで、画面をドラマチックに変化させたり、役立つ視覚的な合図を提供できます。

この概要は、WPF アニメーションとタイミングシステムについて説明します。特に、ストーリーボードを使用した WPF オブジェクトのアニメーションを重点的に説明します。

このトピックには次のセクションが含まれています。

アニメーションの概要
WPF プロパティアニメーションシステム
例 : 要素のフェードインとフェードアウトの作成
アニメーションの種類
プロパティへのアニメーションの適用
ストーリーボードの対話的な制御
アニメーションの終了後の動作
アニメーションのデータバインディングとアニメーション化
アニメーション化のためのその他の方法
アニメーションのサンプル
関連トピック

アニメーションの概要

アニメーションは、それぞれが 1 つ前のものとわずかに異なる一連のイメージをすばやく切り替えることによって作成される錯覚です。脳は、イメージのグループを 1 つの変化しているシーンとして認識します。フィルムでは、この錯覚は、秒単位で多数の写真またはフレームを記録するカメラを使用して作成されます。このフレームがプロジェクタによって再生されたものが映画です。

コンピュータ上のアニメーションもこれに似ています。たとえば、四角形が画面からフェードアウトさせるプログラムは、次のように動作すると考えられます。

プログラムはタイマを作成します。
プログラムは、経過時間を確認するために、設定された間隔でタイマを確認します。
プログラムはタイマを確認するたびに、経過時間に基づいて四角形の現在の不透明度の値を計算します。
次に、プログラムは新しい値で四角形を更新し、再描画します。

WPF 以前は、Microsoft Windows の開発者は、独自のタイミングシステムを作成および管理するか、特別なカスタムライブラリを使用する必要がありました。WPF には、マネージコードや Extensible Application Markup Language (XAML) を通じて公開されている効率的なタイミングシステムが含まれており、これは WPF フレームワークに強固に統合されています。WPF アニメーションは、コントロールおよびその他のグラフィカルオブジェクトを簡単にアニメーション化できるようにします。

WPF は、タイミングシステムの管理、および効率的な画面の再描画のすべての内部的な機能を処理します。作成する効果を実現する機構ではなく、それらの効果に集中できるようにするタイミングクラスが提供されます。また、WPF は、カスタマイズされたアニメーションを作成するために、継承元にできるアニメーションの基本クラスを公開することによって、独自のアニメーションを簡単に作成できるようにします。これらのカスタムアニメーションは、標準のアニメーションクラスのパフォーマンス上の利点の多くを取得します。

WPF プロパティアニメーションシステム

タイミングシステムに関するいくつかの重要な概念を理解している場合は、WPF アニメーションをより簡単に使用できます。最も重要な点は、WPF では、オブジェクトの個別のプロパティにアニメーションを適用することによってオブジェクトをアニメーション化するということです。たとえば、フレームワーク要素を大きくするには、その Width および Height プロパティをアニメーション化します。オブジェクトをフェードアウトさせるには、その Opacity プロパティをアニメーション化します。

プロパティがアニメーション機能を持つには、次の 3 つの要件を満たす必要があります。

依存関係プロパティである必要があります。
DependencyObject から継承し、IAnimatable インターフェイスを実装するクラスに属する必要があります。
互換性のあるアニメーションの種類が利用できる状態でなければなりません。(Windows Presentation Foundation (WPF) によって提供されない場合は、独自のものを作成できます。「カスタムアニメーションの概要」を参照してください。

WPF には、アニメーション化可能なプロパティを持つ多数のオブジェクトが含まれています。Button や TabControl などのコントロール、および Panel および Shape オブジェクトは、DependencyObject から継承します。これらのプロパティのほとんどが依存関係プロパティです。

アニメーションは、スタイルやコントロールテンプレートを含め、ほとんどどこでも使用できます。アニメーションは、視覚的である必要はありません。ユーザーインターフェイスの一部ではないオブジェクトであっても、このセクションで説明する条件を満たしていればアニメーション化できます。

例 : 要素のフェードインとフェードアウトの作成

WPF アニメーションを使用して依存関係プロパティの値をアニメーション化する方法を次の例に示します。ここでは、Double 値を生成するアニメーションの種類である DoubleAnimation を使用して、Rectangle の Opacity プロパティをアニメーション化します。結果として、Rectangle はフェードインおよびフェードアウトします。

この例の最初の部分は、Rectangle 要素を作成し、それを Page で表示します。その次の手順では、アニメーションを作成して、それを四角形の Opacity プロパティに適用する方法を示します。

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);
            
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

第 1 部 : DoubleAnimation の作成

要素のフェードインおよびフェードアウトを行う方法の 1 つは、その要素の Opacity プロパティをアニメーション化することです。Opacity プロパティは Double 型であるため、2 つの値を生成するアニメーションが必要です。このようなアニメーションの 1 つが DoubleAnimation です。DoubleAnimation は、2 つの Double 型の値の間の遷移を作成します。開始値を指定するには、From プロパティを設定します。終了値を指定するには、To プロパティを設定します。

不透明度の値が 1.0 である場合はオブジェクトは完全に不透明になり、不透明度の値が 0.0 である場合はオブジェクトは完全に非表示になります。アニメーション遷移を 1.0 から 0.0 にするには、その From プロパティを 1.0 に設定し、To プロパティを 0.0 に設定します。
```
...
<DoubleAnimation From="1.0" To="0.0"  />        
...
```
[C#]
```
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
```
次に、Duration を指定する必要があります。アニメーションの Duration は、開始値から終点の値までにかかる時間を指定します。次の例では、アニメーションに 5 秒の時間が指定されています。
```
...
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
...

myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
```
前のコードは、1.0 から 0.0 に遷移することによって、対象要素が完全な不透明から完全な非表示にフェードアウトするアニメーションを示しました。要素が消えた後に、もう一度フェードインさせるには、アニメーションの AutoReverse プロパティを true に設定します。このアニメーションを無限に繰り返すようにするには、RepeatBehavior プロパティを Forever に設定します。
```
...
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
...

myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
```

第 2 部 : ストーリーボードの作成

アニメーションをオブジェクトに適用するには、Storyboard を作成し、TargetName および TargetProperty 添付プロパティを使用してアニメーション化するオブジェクトとプロパティを指定します。

Storyboard を作成し、アニメーションをその子として追加します。

...
<Storyboard>
  <DoubleAnimation
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
...

コードで、クラスメンバとして Storyboard を宣言します。

public class RectangleOpacityFadeExample : Page
{ 
    private Storyboard myStoryboard;

次に、Storyboard を初期化し、アニメーションをその子として追加します。

myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

Storyboard は、アニメーションを適用する場所を認識する必要があります。Storyboard.TargetName 添付プロパティを使用して、アニメーション化するオブジェクトを指定します。次のコードでは、DoubleAnimation に MyRectangle というターゲット名を指定します。これがアニメーション化するオブジェクトの名前です。

...
<Storyboard>
  <DoubleAnimation
    Storyboard.TargetName="MyRectangle" 
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
...

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

メモ :
コードでストーリーボードを作成するときは、2 つの追加手順を実行する必要があります。名前のスコープを作成し、アニメーション化するオブジェクトの名前を登録します。このセクションの冒頭にある、ページと四角形を作成したコードは、NameScope を宣言し、四角形の名前も登録していました。名前のスコープが存在しない場合は、SetNameScope メソッドを使用して NameScope を作成します。RegisterName メソッドを使用し、NameScope を作成した対象である要素を含めてターゲットオブジェクトの名前を登録します。登録しなければ、Storyboard はアニメーション化するオブジェクトを検索することができません。他の例については、「方法 : 名前のスコープを定義する」を参照してください。

コードでストーリーボードを作成するときは、2 つの追加手順を実行する必要があります。名前のスコープを作成し、アニメーション化するオブジェクトの名前を登録します。このセクションの冒頭にある、ページと四角形を作成したコードは、NameScope を宣言し、四角形の名前も登録していました。名前のスコープが存在しない場合は、SetNameScope メソッドを使用して NameScope を作成します。RegisterName メソッドを使用し、NameScope を作成した対象である要素を含めてターゲットオブジェクトの名前を登録します。登録しなければ、Storyboard はアニメーション化するオブジェクトを検索することができません。他の例については、「方法 : 名前のスコープを定義する」を参照してください。

TargetProperty 添付プロパティを使用して、アニメーション化するプロパティを指定します。次のコードでは、Rectangle の Opacity プロパティを対象とするようにアニメーションが構成されます。

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

TargetProperty の構文およびその他の例の詳細については、「ストーリーボードの概要」を参照してください。

第 3 部 (XAML) : トリガへのストーリーボードの関連付け

XAML で Storyboard を適用および開始する方法としては、イベントトリガを使用するのが最も簡単です。

BeginStoryboard オブジェクトを作成し、ストーリーボードをそれに関連付けます。BeginStoryboard は、Storyboard を適用および開始する TriggerAction の型の 1 つです。

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

EventTrigger を作成し、BeginStoryboard をその Actions コレクションに追加します。EventTrigger の RoutedEvent プロパティを、Storyboard を開始するルーティングイベントに設定します。ルーティングイベントの詳細については、「ルーティングイベントの概要」を参照してください。

<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

EventTrigger を Rectangle の Triggers コレクションに追加します。

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

第 3 部 (コード) : イベントハンドラへのストーリーボードの関連付け

コードで Storyboard を適用および開始する方法としては、イベントハンドラを使用するのが最も簡単です。

四角形の Loaded イベントを登録します。

[C#]

myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

イベントハンドラを宣言します。イベントハンドラでは、Begin メソッドを使用してストーリーボードを適用します。

[C#]
```
...
public void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}
...
```

コード例全体

フェードインおよびフェードアウトする四角形を作成するためのコード全体を次の例に示します。

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);  

            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }

    }
}

アニメーションの種類

アニメーションによってプロパティ値が生成されるため、さまざまなプロパティ型に対応するさまざまな種類のアニメーションが存在します。Double を受け取るプロパティ (要素の Width プロパティなど) をアニメーション化するには、Double 値を生成するアニメーションを使用します。Point を受け取るプロパティをアニメーション化するには、Point 値を生成するアニメーションを使用します。他も同様です。さまざまなプロパティ型があるため、System.Windows.Media.Animation 名前空間にはいくつかのアニメーションクラスがあります。幸い、これらは互いを区別しやすくする厳密な名前付け規則に従っています。

<<Type>Animation

"From/To/By" または "基本" アニメーションと呼ばれるアニメーションは、開始値と終点の値の間でアニメーション化されるか、開始値にオフセット値を加算することによってアニメーション化されます。
- 開始値を指定するには、アニメーションの From プロパティを設定します。
- 終了値を指定するには、アニメーションの To プロパティを設定します。
- オフセット値を指定するには、アニメーションの By プロパティを設定します。
この概要の例では、最も簡単に使用できるこれらのアニメーションを使います。From/To/By アニメーションの詳細については、「From/To/By アニメーションの概要」を参照してください。
<<Type>AnimationUsingKeyFrames

キーフレームアニメーションは、任意の数のターゲット値を指定でき、それらの補間方式の制御までもできるため、From/To/By アニメーションより強力です。キーフレームアニメーションを使わなければアニメーション化できない型もあります。キーフレームアニメーションの詳細については、「キーフレームアニメーションの概要」を参照してください。
<<Type>AnimationUsingPath

パスアニメーションにより、アニメーション化された値の生成にジオメトリックパスが使用できるようになります。
<<Type>AnimationBase

実装時に、<Type> 値をアニメーション化する抽象クラスです。このクラスは、<Type>Animation および <Type>AnimationUsingKeyFrames クラスの基本クラスとして機能します。独自のカスタムアニメーションを作成する場合は、これらのクラスを直接処理する必要があります。それ以外の場合は、<Type>Animation または KeyFrame<Type>Animation を使用します。

ほとんどの場合、DoubleAnimation や ColorAnimation などの <Type>Animation クラスを使用します。

次の表に、よく使用されるアニメーションの種類とそれらと共に使用されるプロパティの例をいくつか示します。

プロパティの型	対応する基本 (From/To/By) アニメーション	対応するキーフレームアニメーション	対応するパスアニメーション	使用例
Color	ColorAnimation	ColorAnimationUsingKeyFrames	なし	SolidColorBrush または GradientStop の Color をアニメーション化します。
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	DockPanel の Width または Button の Height をアニメーション化します。
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	EllipseGeometry の Center の位置をアニメーション化します。
String	なし	StringAnimationUsingKeyFrames	なし	TextBlock の Text または Button の Content をアニメーション化します。

タイムラインであるアニメーション

すべての種類のアニメーションは、Timeline クラスから継承するため、すべてのアニメーションは特殊な型のタイムラインです。Timeline は時間のセグメントを定義します。タイムラインのタイミング動作を指定できます。この動作には、その Duration、それが繰り返される回数、およびそれに対する時間の進行の速度までも含まれます。

アニメーションは Timeline なので、時間のセグメントも表します。アニメーションは、指定した時間のセグメント (または Duration) にわたってアニメーションが進行する間に、出力値も計算します。アニメーションは進行する、または "再生" されるにつれて、関連付けられているプロパティを更新します。

頻繁に使用されるタイミングプロパティは Duration、AutoReverse、および RepeatBehavior の 3 つです。

Duration プロパティ

前述のように、タイムラインは時間のセグメントを表します。そのセグメントの長さは、通常、TimeSpan 値によって指定されるタイムラインの Duration によって決定されます。タイムラインは、期間の最後に到達すると、反復を完了します。

アニメーションは Duration プロパティを使用して現在の値を決定します。アニメーションに対して Duration 値を指定しない場合、既定値である 1 秒が使用されます。

Duration プロパティに対する Extensible Application Markup Language (XAML) 属性構文を簡略化したものを次に示します。

hours:minutes:seconds

いくつかの Duration の設定およびその結果の値を次の表に示します。

設定	結果の値
0:0:5.5	5.5 秒
0:30:5.5	30 分 5.5 秒
1:30:5.5	1 時間 30 分 5.5 秒

コードで Duration を指定する方法の 1 つは、FromSeconds メソッドを使用して TimeSpan を作成し、その TimeSpan を使用して新しい Duration 構造体を宣言することです。

Duration 値および完全な Extensible Application Markup Language (XAML) の構文の詳細については、Duration 型のページを参照してください。

AutoReverse

AutoReverse プロパティは、タイムラインが Duration の最後に到達した後に逆方向に再生するかどうかを指定します。このアニメーションプロパティを true に設定した場合、アニメーションは、Duration の最後に到達した後に、終了値から開始値まで再生することによって、逆方向に再生されます。既定では、このプロパティは false です。

RepeatBehavior

RepeatBehavior プロパティはタイムラインの再生回数を指定します。既定では、タイムラインの反復カウントは 1.0 です。これは、再生回数が 1 回で、繰り返されないことを意味します。

これらのプロパティおよびその他のプロパティの詳細については、「タイミング動作の概要」を参照してください。

プロパティへのアニメーションの適用

前のセクションでは、さまざまな種類のアニメーションおよびそのタイミングプロパティについて説明しました。ここでは、アニメーション化するプロパティにアニメーションを適用する方法について説明します。Storyboard オブジェクトはプロパティにアニメーションを適用する 1 つの方法を提供します。Storyboard は、含まれる複数のアニメーションの対象情報を持つコンテナタイムラインです。

ターゲットオブジェクトとプロパティ

Storyboard クラスは、TargetName および TargetProperty の添付プロパティを提供します。これらのプロパティをアニメーションで設定することで、そのアニメーションに対して何をアニメーション化するのかを指示します。ただし、アニメーションがオブジェクトをターゲットとして設定するには、通常、そのオブジェクトに名前を指定しておく必要があります。

FrameworkElement に名前を割り当てるのは、Freezable オブジェクトに名前を割り当てることとは異なります。ほとんどのコントロールおよびパネルはフレームワーク要素ですが、ブラシ、変換、ジオメトリなどの最も単純なグラフィカルオブジェクトは、フリーズ可能オブジェクトです。型が FrameworkElement と Freezable のどちらであるか不明な場合は、その型のページの「継承階層」を参照してください。

FrameworkElement をアニメーションのターゲットにするには、Name プロパティを設定することによって名前を付けます。コードでは、RegisterName メソッドを使用して、属するページと共に要素名も登録する必要があります。
XAML で Freezable オブジェクトをアニメーションターゲットにするには、x:Name 属性を使用してそのオブジェクトに名前を割り当てます。コードでは、単に RegisterName メソッドを使用して、属するページと共にオブジェクトを登録します。

以降のセクションでは、XAML およびコードでの要素の名前付けの例を示します。名前付けとターゲットの設定に関する詳細については、「ストーリーボードの概要」を参照してください。

ストーリーボードの適用および開始

XAML でストーリーボードを開始するには、ストーリーボードを EventTrigger に関連付けます。EventTrigger は指定したイベントが発生した場合に行われるアクションを記述するオブジェクトです。これらのアクションのいずれかは、ストーリーボードを開始するために使用する BeginStoryboard アクションにすることができます。イベントトリガは、アプリケーションが特定のイベントに対してどのように応答するかを指定できるようにするもので、概念としてはイベントハンドラに似ています。イベントハンドラと異なり、イベントトリガは XAML で全体を記述できます。他のコードは必要ありません。

コードで Storyboard を開始するには、EventTrigger を使用するか、Storyboard クラスの Begin メソッドを使用できます。

ストーリーボードの対話的な制御

前の例では、イベントの発生時に Storyboard を開始する方法を示しました。Storyboard は、開始した後に対話的に制御することもできます。Storyboard の一時停止、再開、停止、区間の最後までの前進、シーク、および削除を行うことができます。Storyboard を対話的に制御する方法の詳細や例については、「ストーリーボードの概要」を参照してください。

アニメーションの終了後の動作

FillBehavior プロパティは、タイムラインが終了したときに、どのように動作するかを指定します。既定では、タイムラインは終了したときに Filling を開始します。Filling が指定されているアニメーションは、最終的な出力値を保持します。

前の例の DoubleAnimation は、RepeatBehavior プロパティが Forever に設定されているため終了しません。類似のアニメーションを使用して、四角形をアニメーション化する例を次に示します。前の例とは異なり、このアニメーションの RepeatBehavior プロパティおよび AutoReverse プロパティは、既定値のまま残されます。したがって、アニメーションは 1 から 0 まで 5 秒間をかけて進行してから停止します。

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

FillBehavior は既定値である HoldEnd から変更されなかったため、アニメーションは終了時に最終的な値である 0 を保持しています。したがって、四角形の Opacity は、アニメーションが終了した後に 0 のままになっています。四角形の Opacity を別の値に設定した場合でも、アニメーションは依然として Opacity プロパティに影響を及ぼしているため、コードの変更は何の効果もないように見えます。

コードでアニメーション化されたプロパティの制御を取り戻す 1 つの手段として、BeginAnimation メソッドを使用して AnimationTimeline パラメータに NULL を指定するという方法があります。詳細および使用例ついては、「方法 : ストーリーボードを使用してアニメーション化した後にプロパティを設定する」を参照してください。

Active アニメーションまたは Filling アニメーションを持つプロパティ値を設定しても影響がないように見えても、プロパティ値は変更されていることに注意してください。詳細については、「アニメーションとタイミングシステムの概要」を参照してください。

アニメーションのデータバインディングとアニメーション化

ほとんどのアニメーションプロパティはデータバインドまたはアニメーション化することができます。たとえば、DoubleAnimation の Duration プロパティをアニメーション化できます。ただし、タイミングシステムのしくみが理由で、データバインドまたはアニメーション化されたアニメーションの動作は、データバインドまたはアニメーション化された他のオブジェクトとは異なります。これらの動作を理解するには、プロパティへのアニメーションの適用の意味を理解しておくと役立ちます。

前のセクションの四角形の Opacity をアニメーション化する方法を示す例を参照してください。前の例では、四角形が読み込まれると、そのイベントトリガが Storyboard を適用します。タイミングシステムは、Storyboard のコピーとそのアニメーションを作成します。これらのコピーはフリーズされており (読み取り専用になっている)、これらのコピーから Clock オブジェクトが作成されます。これらのクロックは、対象のプロパティをアニメーション化する実際の処理を実行します。

タイミングシステムは、DoubleAnimation に対するクロックを作成し、それを DoubleAnimation の TargetName および TargetProperty によって指定されるオブジェクトとプロパティに適用します。この場合、タイミングシステムは "MyRectangle" という名前が付けられているオブジェクトの Opacity プロパティにクロックを適用します。

クロックは Storyboard に対しても作成されますが、このクロックはプロパティには適用されません。その目的は、DoubleAnimation に対して作成されたクロックである子クロックを制御することです。

アニメーションにデータバインディングまたはアニメーションの変更を反映するには、クロックを再生成する必要があります。クロックは自動的に再生成されるわけではありません。アニメーションに変更を反映するには、BeginStoryboard または Begin メソッドを使用することによって、ストーリーボードを再適用します。これらのメソッドのいずれかを使用すると、アニメーションが再起動します。コード内で Seek メソッドを使用すると、ストーリーボードを以前の位置に戻すことができます。

データバインドアニメーションの例については、「キースプラインアニメーションのサンプル」を参照してください。アニメーションとタイミングシステムがどのように動作するかの詳細については、「アニメーションとタイミングシステムの概要」を参照してください。

アニメーション化のためのその他の方法

この概要の例では、ストーリーボードを使用してアニメーション化する方法を示しています。コードを使用する場合、いくつかの他の方法でアニメーション化できます。詳細については、「プロパティアニメーションの手法の概要」を参照してください。

アニメーションのサンプル

以下のサンプルは、アプリケーションへのアニメーションの追加を開始するのに役立ちます。

プロパティのアニメーションのサンプル

フレームワーク要素およびフリーズ可能オブジェクトにアニメーションを適用する方法を示します。
アニメーションのターゲット値 (From、To、および By) のサンプル

さまざまな From/To/By の設定について説明します。
アニメーションのタイミング動作のサンプル

アニメーションのタイミング動作を制御するさまざまな方法を示します。このサンプルでは、アニメーションの終点の値をデータバインドする方法も示します。

参照

概念

From/To/By アニメーションの概要

Windows Presentation Foundation の概要

参照

Timeline

Storyboard

Share via

アニメーションの概要

アニメーションの概要

WPF プロパティアニメーションシステム

例 : 要素のフェードインとフェードアウトの作成

第 1 部 : DoubleAnimation の作成

第 2 部 : ストーリーボードの作成

第 3 部 (XAML) : トリガへのストーリーボードの関連付け

第 3 部 (コード) : イベントハンドラへのストーリーボードの関連付け

コード例全体

アニメーションの種類

タイムラインであるアニメーション

Duration プロパティ

AutoReverse

RepeatBehavior

プロパティへのアニメーションの適用

ターゲットオブジェクトとプロパティ

ストーリーボードの適用および開始

ストーリーボードの対話的な制御

アニメーションの終了後の動作

アニメーションのデータバインディングとアニメーション化

アニメーション化のためのその他の方法

アニメーションのサンプル

参照

概念

参照

その他のリソース

Share via

アニメーションの概要

アニメーションの概要

WPF プロパティ アニメーション システム

例 : 要素のフェード インとフェード アウトの作成

第 1 部 : DoubleAnimation の作成

第 2 部 : ストーリーボードの作成

第 3 部 (XAML) : トリガへのストーリーボードの関連付け

第 3 部 (コード) : イベント ハンドラへのストーリーボードの関連付け

コード例全体

アニメーションの種類

タイムラインであるアニメーション

Duration プロパティ

AutoReverse

RepeatBehavior

プロパティへのアニメーションの適用

ターゲット オブジェクトとプロパティ

ストーリーボードの適用および開始

ストーリーボードの対話的な制御

アニメーションの終了後の動作

アニメーションのデータ バインディングとアニメーション化

アニメーション化のためのその他の方法

アニメーションのサンプル

参照

概念

参照

その他のリソース

WPF プロパティアニメーションシステム

例 : 要素のフェードインとフェードアウトの作成

第 3 部 (コード) : イベントハンドラへのストーリーボードの関連付け

ターゲットオブジェクトとプロパティ

アニメーションのデータバインディングとアニメーション化