アニメーションの概要

[アーティクル]
08/09/2011

更新 : 2010 年 10 月

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 インターフェイスを実装するクラスに属する必要があります。
互換性のあるアニメーションの種類が利用できる状態でなければなりません。 (WPF によって提供されない場合は、独自のものを作成できます。「カスタムアニメーションの概要」を参照してください。

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

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

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

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

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

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

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

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

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

Dim myRectangle As Rectangle = 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

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 を XAML で作成する方法を次に示します。
```
<DoubleAnimation From="1.0" To="0.0" />
```
DoubleAnimation をコードで作成する方法を次に示します。
```
Dim myDoubleAnimation As DoubleAnimation = New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
```
```
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
```
次に、Duration を指定する必要があります。アニメーションの Duration は、開始値から終点の値までにかかる時間を指定します。 Duration を XAML で 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 に設定します。AutoReverse プロパティおよび RepeatBehavior プロパティを XAML で設定する方法を次に示します。
```
<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 を作成し、アニメーションをその子として追加します。 Storyboard を XAML で作成する方法を次に示します。

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

    Private myStoryboard As Storyboard
```
```
public partial class MainWindow : Window
{
    private Storyboard myStoryboard;
```
次に、Storyboard を初期化し、アニメーションをその子として追加します。
```
myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
```
```
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
```
Storyboard は、アニメーションを適用する場所を認識する必要があります。 Storyboard.TargetName 添付プロパティを使用して、アニメーション化するオブジェクトを指定します。 DoubleAnimation のターゲット名を XAML. で 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 添付プロパティを使用して、アニメーション化するプロパティを指定します。 Rectangle の Opacity プロパティを対象とするように XAML でアニメーションを構成する方法を次に示します。

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

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

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

AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

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

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

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

コード例全体

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

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://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>

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

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

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

アニメーションの種類

アニメーションによってプロパティ値が生成されるため、さまざまなプロパティ型に対応するさまざまな種類のアニメーションが存在します。 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>

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

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 の設定について説明します。
アニメーションのタイミング動作のサンプル

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

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

参照

履歴の変更

日付	履歴	理由
2010 年 10 月	Visual Basic スニペットを補足。	カスタマーフィードバック

2010 年 10 月

Visual Basic スニペットを補足。

カスタマーフィードバック

次の方法で共有

アニメーションの概要

アニメーションの概要

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

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

第 1 部 : DoubleAnimation の作成

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

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

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

コード例全体

アニメーションの種類

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

Duration プロパティ

AutoReverse

RepeatBehavior

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

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

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

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

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

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

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

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

関連トピック

参照

履歴の変更

その他のリソース

次の方法で共有

アニメーションの概要

アニメーションの概要

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

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

第 1 部 : DoubleAnimation の作成

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

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

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

コード例全体

アニメーションの種類

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

Duration プロパティ

AutoReverse

RepeatBehavior

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

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

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

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

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

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

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

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

関連トピック

参照

履歴の変更

その他のリソース

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

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

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

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

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