アニメーションの概要

2025-05-07

Windows Presentation Foundation (WPF) には、魅力的なユーザーインターフェイスと魅力的なドキュメントを作成できる、強力なグラフィックスとレイアウト機能のセットが用意されています。アニメーションは、魅力的なユーザーインターフェイスをさらに壮大で使いやすいものにすることができます。背景色をアニメーション化するか、アニメーション化された Transformを適用するだけで、劇的な画面切り替えを作成したり、役に立つ視覚的な手掛かりを提供したりできます。

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

アニメーションの概要

アニメーションは、一連の画像をすばやく循環することによって作成される錯覚であり、それぞれが最後とは少し異なります。脳は、画像のグループを単一の変化するシーンとして認識します。フィルムでは、この錯覚は、毎秒多くの写真やフレームを記録するカメラを使用して作成されます。フレームがプロジェクターによって再生されると、視聴者は動く画像を見ます。

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

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

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 アニメーションを使用して依存関係プロパティの値をアニメーション化する方法を示します。 DoubleAnimation値を生成するアニメーションの一種であるDoubleを使用して、OpacityのRectangle プロパティをアニメーション化します。その結果、 Rectangle はフェードインしたり、ビューからフェードアウトしたりします。

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

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

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

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

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型であるため、二重値を生成するアニメーションが必要です。 DoubleAnimationはそのようなアニメーションの 1 つです。 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 でOpacityのRectangle プロパティをターゲットにするようにアニメーションを構成する方法を次に示します。

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

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

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

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

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

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

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

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

<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を追加します。 RoutedEventのEventTrigger プロパティを、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コレクションに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 イベントに登録します。

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

アニメーションの種類

アニメーションはプロパティ値を生成するため、プロパティの種類ごとに異なるアニメーションの種類が存在します。要素のDouble プロパティなど、Widthを受け取るプロパティをアニメーション化するには、Double値を生成するアニメーションを使用します。 Pointを受け取るプロパティをアニメーション化するには、Point値を生成するアニメーションなどを使用します。プロパティの種類が異なるため、 System.Windows.Media.Animation 名前空間には複数のアニメーションクラスがあります。幸いなことに、厳密な名前付け規則に従って区別しやすくします。

< >アニメーション

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

キーフレームアニメーションは、任意の数のターゲット値を指定したり、補間方法を制御したりできるため、From/To/By アニメーションよりも強力です。一部の型は、キーフレームアニメーションでのみアニメーション化できます。キーフレームアニメーションの詳細については、「 Key-Frame アニメーションの概要」を参照してください。
< 型>AnimationUsingPath

パスアニメーションを使用すると、ジオメトリパスを使用してアニメーション化された値を生成できます。
< >AnimationBase

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

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

次の表は、いくつかの一般的なアニメーションの種類と、それらが使用されるいくつかのプロパティを示しています。

プロパティの種類	基本アニメーション (開始/終了/経由) に対応	対応するキーフレームアニメーション	対応する経路アニメーション	使用例
Color	ColorAnimation	ColorAnimationUsingKeyFrames	無し	ColorまたはSolidColorBrushのGradientStopをアニメーション化します。
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	WidthのDockPanelまたはHeightのButtonをアニメーション化します。
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	CenterのEllipseGeometry位置をアニメーション化する。
String	無し	StringAnimationUsingKeyFrames	無し	TextのTextBlockまたはContentのButtonをアニメーション化します。

アニメーションはタイムラインの一部です

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

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

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

持続時間プロパティ

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

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

次の構文は、 Duration プロパティの拡張アプリケーションマークアップ言語 (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を作成し、そのDurationを使用して新しいTimeSpan構造体を宣言することです。

Duration値と完全な拡張アプリケーションマークアップ言語 (XAML) 構文の詳細については、Duration構造体を参照してください。

自動反転

AutoReverseプロパティは、タイムラインがDurationの末尾に達した後に後方に再生するかどうかを指定します。このアニメーションプロパティを true に設定すると、アニメーションは Durationの終わりに達すると反転し、終了値から開始値に戻ります。既定では、このプロパティは false。

リピートビヘイビア

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は、指定したイベントが発生したときに実行するアクションを記述するオブジェクトです。これらのアクションの 1 つは、ストーリーボードの開始に使用する BeginStoryboard アクションです。イベントトリガーは、アプリケーションが特定のイベントに応答する方法を指定できるため、イベントハンドラーの概念に似ています。イベントハンドラーとは異なり、イベントトリガーは XAML で完全に記述できます。他のコードは必要ありません。

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

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

前の例では、イベントが発生したときに 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アニメーションを持つプロパティ値を設定しても効果はないように見えますが、プロパティ値は変更されることに注意してください。詳細については、「アニメーションとタイミングシステムの概要」を参照してください。

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

ほとんどのアニメーションプロパティは、データバインドまたはアニメーション化できます。たとえば、DurationのDoubleAnimation プロパティをアニメーション化できます。ただし、タイミングシステムの動作が原因で、データバインドまたはアニメーション化されたアニメーションは、他のデータバインドオブジェクトやアニメーション化されたオブジェクトと同様に動作しません。動作を理解するために、プロパティにアニメーションを適用する意味を理解するのに役立ちます。

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

タイミングシステムは、DoubleAnimationのクロックを作成し、TargetNameのTargetPropertyとDoubleAnimationで指定されたオブジェクトとプロパティに適用します。この場合、タイミングシステムは、"MyRectangle" という名前のオブジェクトの Opacity プロパティにクロックを適用します。

Storyboard用にクロックも作成されますが、クロックはどのプロパティにも適用されません。その目的は、子クロック ( DoubleAnimation用に作成されるクロック) を制御するためです。

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

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

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

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

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

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

From、To、By アニメーションのターゲット値のサンプル

異なる From/To/By 設定を示します。
アニメーションタイミング動作のサンプル

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

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

次の方法で共有

アニメーションの概要