アニメーションの概要

[アーティクル]
05/04/2023

Windows Presentation Foundation (WPF) は、魅力的なユーザーインターフェイスや説得力のあるドキュメントを作成するためのグラフィックスとレイアウト機能の強力なセットを提供します。アニメーションを使うと、魅力的なユーザーインターフェイスをさらに豪華で使いやすいものにすることができます。単に背景色をアニメーション化するか、アニメーション化された Transform を適用するだけで、ドラマチックな画面切り替え効果を演出したり、効果的な視覚的刺激を提供したりできます。

この概要では、WPF アニメーションおよびタイミングシステムを紹介します。ここでは、ストーリーボードを使用した WPF オブジェクトのアニメーションに焦点を当てます。

アニメーションの概要

アニメーションは、それぞれが直前のイメージと少しずつ異なる一連のイメージをすばやく繰り返すことで生み出される錯覚です。脳は、イメージのグループを 1 つの変化するシーンとして認識します。映画では、この錯覚は 1 秒あたりに多数の写真またはフレームを記録するカメラを使って生み出されます。フレームを映写機で再生すると、見る人には動く画像として映ります。

コンピューター上のアニメーションも同様です。たとえば、四角形の描画をビューからフェードアウトするプログラムは次のように動作する可能性があります。

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

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

WPF は、タイミングシステムの管理と画面の効率的な再描画をすべてバックグラウンドで処理します。効果を実現するしくみではなく、作り出す効果に重点を置くことのできるタイミングクラスが提供されます。 WPF では、クラスが継承できるアニメーションの基底クラスを公開しているため、独自のアニメーションを簡単に作成して、カスタマイズされたアニメーションを生成することもできます。これらのカスタムアニメーションは、標準のアニメーションクラスのパフォーマンス上のメリットの多くを得ます。

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

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

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

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

WPF には、IAnimatable プロパティを持つ多数のオブジェクトが含まれています。 Button や TabControl などのコントロール、Panel オブジェクトや Shape オブジェクトは、DependencyObject を継承します。これらのプロパティの大部分は依存関係プロパティです。

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

例:要素の表示のフェードインとフェードアウトを行う

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

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

XAML で StackPanel に Rectangle 要素を作成する方法を次に示します。

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

コードで StackPanel に Rectangle 要素を作成する方法を次に示します。

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var 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;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

第 1 部:DoubleAnimation を作成する

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

不透明度の値 1.0 を指定すると、オブジェクトが完全に不透明になり、不透明度の値 0.0 を指定すると、完全に非表示になります。アニメーションを 1.0 から 0.0 に遷移させるには、その From プロパティを 1.0 に、To プロパティを 0.0 に設定します。 XAML で DoubleAnimation を作成する方法を次に示します。
```
<DoubleAnimation From="1.0" To="0.0" />
```
コードで DoubleAnimation を作成する方法を次に示します。
```
var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
```
```
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
```
次に、Duration を指定する必要があります。アニメーションの Duration は、開始値から到達値への移動にかかる時間を指定します。 XAML で Duration を 5 秒に設定する方法を次に示します。
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
```
コードで Duration を 5 秒に設定する方法を次に示します。
```
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
```
```
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
```
前のコードでは、1.0 から 0.0 に遷移するアニメーションを示しました。これにより、ターゲット要素が完全な不透明から完全な非表示に徐々に変化します。要素が見えなくなった後にそれを再び見えるようにするには、アニメーションの AutoReverse プロパティを true に設定します。アニメーションを無限に繰り返すには、その RepeatBehavior プロパティを Forever に設定します。 XAML で AutoReverse プロパティおよび RepeatBehavior プロパティを設定する方法を次に示します。
```
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
```
コードで AutoReverse プロパティおよび RepeatBehavior プロパティを設定する方法を次に示します。
```
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
```
```
myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
```

第 2 部: ストーリーボードを作成する

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

Storyboard を作成し、アニメーションをその子として追加します。 XAML で Storyboard を作成する方法を次に示します。

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

コードで Storyboard を作成するには、クラスレベルで Storyboard 変数を宣言します。

public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

Class MainWindow

    Private myStoryboard As Storyboard

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

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

myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

Storyboard は、アニメーションを適用する場所を認識している必要があります。 Storyboard.TargetName 添付プロパティを使用して、アニメーション化するオブジェクトを指定します。 XAML で DoubleAnimation のターゲット名を MyRectangle に設定する方法を次に示します。
```
<Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
```
コードで DoubleAnimation のターゲット名を MyRectangle に設定する方法を次に示します。
```
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
```
```
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
```

TargetProperty 添付プロパティを使用して、アニメーション化するプロパティを指定します。 XAML で Rectangle の Opacity プロパティをターゲットとするようにアニメーションを構成する方法を次に示します。

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

コードで Rectangle の Opacity プロパティをターゲットとするようにアニメーションを構成する方法を次に示します。

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

Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

TargetProperty 構文とその他の例について詳しくは、「ストーリーボードの概要」をご覧ください。

第 3 部 (XAML):ストーリーボードをトリガーに関連付ける

XAML で Storyboard を適用して開始する最も簡単な方法は、イベントトリガーを使用することです。このセクションでは、XAML で Storyboard をトリガーに関連付ける方法を示します。

BeginStoryboard オブジェクトを作成し、それにストーリーボードを関連付けます。 BeginStoryboard は、Storyboard の一種であり、TriggerAction を適用して開始します。

<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 を作成し、その Actions コレクションに BeginStoryboard を追加します。 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>

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

<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 を適用して開始する最も簡単な方法は、イベントハンドラーを使用することです。このセクションでは、コードで Storyboard をイベントハンドラーに関連付ける方法を示します。

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

myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

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

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

Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

コード例全体

ビューでフェードインおよびフェードアウトする四角形を XAML で作成する方法を次に示します。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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>
    </Grid>
</Window>

ビューでフェードインおよびフェードアウトする四角形をコードで作成する方法を次に示します。

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            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);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As 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.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

アニメーションの種類

アニメーションはプロパティの値を生成するため、異なるプロパティの型ごとに異なるアニメーションの種類が存在します。要素の Width プロパティなど、Double を受け取るプロパティをアニメーション化するには、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	None	SolidColorBrush または GradientStop の Color をアニメーション化します。
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	DockPanel の Width、または Button の Height をアニメーション化します。
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	EllipseGeometryの Center 位置をアニメーション化します。
String	None	StringAnimationUsingKeyFrames	None	TextBlock の Text、または Button の Content をアニメーション化します。

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

すべての種類のアニメーションは Timeline クラスを継承するため、すべてのアニメーションは特殊な種類のタイムラインです。 Timeline は時間のセグメントを定義します。タイムラインの "タイミング動作" (その Duration、繰り返す回数、進行速度) を指定できます。

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

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

Duration プロパティ

既に述べたように、タイムラインは時間のセグメントを表します。そのセグメントの長さは、タイムラインの Duration によって決まります。これは通常、TimeSpan 値を使用して指定されます。タイムラインがその期間の最後に達すると、イテレーションが完了します。

アニメーションは、その Duration プロパティを使用して、現在の値を割り出します。アニメーションの Duration 値を指定しなかった場合は、既定値の 1 秒が使用されます。

次の構文は、Duration プロパティの Extensible Application Markup Language (XAML) 属性構文の簡略化されたバージョンを示しています。

時:分:秒

次の表に、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 オブジェクトへの名前の割り当てとは異なります。ほとんどのコントロールとパネルはフレームワーク要素ですが、ブラシ、変換、ジオメトリなどのほとんどの純粋なグラフィカルオブジェクトは Freezable オブジェクトです。型が FrameworkElement と Freezable のどちらであるかが不明な場合は、そのリファレンスドキュメントの継承階層のセクションを参照してください。

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

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

ストーリーボードの適用と開始

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

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

ストーリーボードを対話的に制御する

前の例では、イベントの発生時に Storyboard を開始する方法を示しました。開始後に Storyboard を対話形式で制御することもできます。つまり、Storyboard を一時停止、再開、停止、その期間の終わりまで前進、シーク、削除できます。 Storyboard を対話的に制御する方法の詳細と例については、「ストーリーボードの概要」をご覧ください。

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

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

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

<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));

Dim myDoubleAnimation As 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 設定を示します。
アニメーションのタイミング動作のサンプル

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

Title	説明
アニメーションとタイミングシステムの概要	タイミングシステムが Timeline クラスおよび Clock クラスを使用してアニメーションを作成する方法について説明します。
アニメーションのヒントとテクニック	パフォーマンスなど、アニメーションでの問題を解決するための役に立つヒントの一覧を示します。
カスタムアニメーションの概要	アニメーションシステムをキーフレーム、アニメーションクラス、またはフレームごとのコールバックで拡張する方法について説明します。
From/To/By アニメーションの概要	2 つの値の間を遷移するアニメーションを作成する方法について説明します。
キーフレームアニメーションの概要	補間メソッドを制御する機能など、複数のターゲット値を持つアニメーションを作成する方法について説明します。
イージング関数	数式をアニメーションに適用してバウンスなどの現実的な動作を実現する方法について説明します。
パスアニメーションの概要	複雑なパスに沿ってオブジェクトを移動または回転する方法について説明します。
プロパティアニメーションの手法の概要	ストーリーボード、ローカルアニメーション、クロック、フレームごとのアニメーションを使ったプロパティのアニメーションについて説明します。
ストーリーボードの概要	複数のタイムラインを持つストーリーボードを使って複雑なアニメーションを作成する方法について説明します。
タイミング動作の概要	アニメーションで使用される Timeline の種類とプロパティについて説明します。
タイミングイベントの概要	開始、一時停止、再開、スキップ、停止など、タイムラインのポイントでコードを実行するために Timeline オブジェクトおよび Clock オブジェクトで使用できるイベントについて説明します。
方法トピック	アプリケーションでアニメーションとタイムラインを使うためのコード例を示します。
クロックに関する「方法」トピック	アプリケーションで Clock オブジェクトを使うためのコード例を示します。
キーフレームに関する「方法」トピック	アプリケーションでキーフレームアニメーションを使うためのコード例を示します。
パスアニメーションに関する「方法」トピック	アプリケーションでパスアニメーションを使うためのコード例を示します。

アニメーションの概要

アニメーションの概要

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

例:要素の表示のフェードインとフェードアウトを行う

第 1 部:DoubleAnimation を作成する

第 2 部: ストーリーボードを作成する

第 3 部 (XAML):ストーリーボードをトリガーに関連付ける

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

コード例全体

アニメーションの種類

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

Duration プロパティ

AutoReverse

RepeatBehavior

プロパティにアニメーションを適用する

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

ストーリーボードの適用と開始

ストーリーボードを対話的に制御する

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

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

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

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

関連項目

フィードバック

その他のリソース

アニメーションの概要

アニメーションの概要

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

例:要素の表示のフェードインとフェードアウトを行う

第 1 部:DoubleAnimation を作成する

第 2 部: ストーリーボードを作成する

第 3 部 (XAML):ストーリーボードをトリガーに関連付ける

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

コード例全体

アニメーションの種類

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

Duration プロパティ

AutoReverse

RepeatBehavior

プロパティにアニメーションを適用する

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

ストーリーボードの適用と開始

ストーリーボードを対話的に制御する

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

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

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

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

関連トピック

関連項目

フィードバック

その他のリソース

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

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

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