アニメーションの概要

  • [アーティクル]

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. 不透明度の値 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

  2. 次に、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))

  3. 前のコードでは、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 添付プロパティを使用して、アニメーション化するオブジェクトおよびプロパティを指定します。

  1. 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)

  2. 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)

  3. 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 をトリガーに関連付ける方法を示します。

  1. 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>

  2. 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>

  3. 四角形の 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 をイベント ハンドラーに関連付ける方法を示します。

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

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. イベント ハンドラーを宣言します。 イベント ハンドラーで、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 メソッドを使用して、ストーリーボードを前の位置に戻すことができます。

データ バインドされたアニメーションの例については、「キー スプライン アニメーションのサンプル」をご覧ください。 アニメーションとタイミング システムのしくみについて詳しくは、「アニメーションとタイミング システムの概要」をご覧ください。

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

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

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

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

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

関連項目