プロパティアニメーションの手法の概要

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

このトピックでは、ストーリーボード、ローカルアニメーション、クロック、フレームごとのアニメーションなど、プロパティをアニメーション化するさまざまなアプローチについて説明します。

必須コンポーネント

このトピックを理解するには、「アニメーションの概要」で説明されている基本のアニメーション機能に精通している必要があります。

さまざまなアニメーション化方法

プロパティをアニメーション化するには多数のシナリオがあるため、WPF ではプロパティをアニメーション化するいくつかの方法が提供されています。

それぞれの方法について、インスタンス単位、スタイル内、コントロールテンプレート内、またはデータテンプレート内で使用できるかどうか、XAML で使用できるかどうか、およびアニメーションを対話的に制御できるかどうかを次の表に示します。 "インスタンス単位" とは、スタイル、コントロールテンプレート、またはデータテンプレート内のインスタンスではなく、オブジェクトのインスタンスに直接アニメーションまたはストーリーボードを適用する方法のことです。

アニメーションの手法	シナリオ	XAML のサポート	対話的に制御可能
ストーリーボードアニメーション	インスタンス単位、Style、ControlTemplate、 DataTemplate	はい	はい
ローカルアニメーション	インスタンス単位	いいえ	いいえ
クロックアニメーション	インスタンス単位	いいえ	はい
フレーム単位のアニメーション	インスタンス単位	いいえ	N/A

ストーリーボードアニメーション

Storyboard は、XAML でアニメーションを定義および適用する場合、アニメーションを開始後に対話的に制御する場合、複雑なアニメーションツリーを作成する場合、あるいは Style、ControlTemplate、または DataTemplate でアニメーション化する場合に使用します。 Storyboard によってアニメーション化されるオブジェクトは、FrameworkElement または FrameworkContentElement であるか、FrameworkElement または FrameworkContentElement を設定するために使用される必要があります。詳しくは、「ストーリーボードの概要」をご覧ください。

Storyboard は、特殊な種類のコンテナー Timeline であり、その中に含まれているアニメーションのターゲット情報を提供します。 Storyboard を使用してアニメーション化するには、次の 3 つのステップを実行します。

Storyboard と 1 つ以上のアニメーションを宣言します。
TargetName 添付プロパティおよび TargetProperty 添付プロパティを使用して、各アニメーションのターゲットオブジェクトおよびプロパティを指定します。
(コードのみ) FrameworkElement または FrameworkContentElement の NameScope を定義します。 FrameworkElement または FrameworkContentElement を使用してアニメーション化するオブジェクトの名前を登録します。
Storyboard を開始します。

Storyboard を開始すると、アニメーションが、アニメーション化されるプロパティに適用され、開始されます。 Storyboard を開始するには、2 つの方法があります。Storyboard クラスによって提供される Begin メソッドを使用するか、BeginStoryboard アクションを使用します。 XAML でアニメーション化する唯一の方法は、BeginStoryboard アクションを使用することです。 BeginStoryboard アクションは、EventTrigger、Trigger プロパティ、または DataTrigger で使用できます。

次の表は、Storyboard の開始方法それぞれがサポートされているさまざまな場所 (インスタンス単位、スタイル、コントロールテンプレート、データテンプレート) を示しています。

ストーリーボードが開始される場所	インスタンス単位	スタイル	コントロールテンプレート	データテンプレート	例
BeginStoryboard および EventTrigger	はい	イエス	イエス	はい	ストーリーボードを使ってプロパティをアニメーション化する
BeginStoryboard およびプロパティ Trigger	いいえ	イエス	イエス	はい	プロパティ値が変化したときにアニメーションをトリガーする
BeginStoryboard および DataTrigger	いいえ	イエス	イエス	はい	方法: データが変化したときにアニメーションをトリガーする
Begin メソッド	はい	番号	番号	いいえ	ストーリーボードを使ってプロパティをアニメーション化する

Storyboard オブジェクトの詳細については、「ストーリーボードの概要」をご覧ください。

ローカルアニメーション

ローカルアニメーションは、任意の Animatable オブジェクトの依存関係プロパティをアニメーション化する場合に使用すると便利です。プロパティに適用するアニメーションが 1 つだけであり、アニメーションを開始後に対話的に制御する必要がない場合は、ローカルアニメーションを使用します。ローカルアニメーションは、Storyboard アニメーションとは異なり、FrameworkElement にも FrameworkContentElement にも関連付けられていないオブジェクトをアニメーション化できます。また、この種類のアニメーションには NameScope を定義する必要がありません。

ローカルアニメーションはコードだけで使用できます。スタイル、コントロールテンプレート、またはデータテンプレート内では定義できません。ローカルアニメーションは、開始後に対話的に制御できません。

ローカルアニメーションを使用してアニメーション化するには、次の手順を実行します。

AnimationTimeline オブジェクトを作成します。
アニメーション化するオブジェクトの BeginAnimation メソッドを使用して、指定したプロパティに AnimationTimeline を適用します。

次の例は、Button の幅と背景色をアニメーション化する方法を示しています。

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;


namespace Microsoft {
   namespace Samples {
      namespace Animation {
         namespace LocalAnimations {
            // Create the demonstration.
            public ref class LocalAnimationExample : Page {

            public: 
               LocalAnimationExample ()
               {
                  WindowTitle = "Local Animation Example";
                  StackPanel^ myStackPanel = gcnew StackPanel();
                  myStackPanel->Margin = Thickness(20);

                  // Create and set the Button.
                  Button^ aButton = gcnew Button();
                  aButton->Content = "A Button";

                  // Animate the Button's Width.
                  DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
                  myDoubleAnimation->From = 75;
                  myDoubleAnimation->To = 300;
                  myDoubleAnimation->Duration = Duration(TimeSpan::FromSeconds(5));
                  myDoubleAnimation->AutoReverse = true;
                  myDoubleAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the button's Width property.
                  aButton->BeginAnimation(Button::WidthProperty, myDoubleAnimation);

                  // Create and animate a Brush to set the button's Background.
                  SolidColorBrush^ myBrush = gcnew SolidColorBrush();
                  myBrush->Color = Colors::Blue;

                  ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
                  myColorAnimation->From = Colors::Blue;
                  myColorAnimation->To = Colors::Red;
                  myColorAnimation->Duration = Duration(TimeSpan::FromMilliseconds(7000));
                  myColorAnimation->AutoReverse = true;
                  myColorAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the brush's Color property.
                  myBrush->BeginAnimation(SolidColorBrush::ColorProperty, myColorAnimation);
                  aButton->Background = myBrush;

                  // Add the Button to the panel.
                  myStackPanel->Children->Add(aButton);
                  this->Content = myStackPanel;
               };
            };
         }
      }
   }
}

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

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

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page
    {

        public LocalAnimationExample()
        {

            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }
}

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

クロックアニメーション

Clock オブジェクトは、Storyboard を使用せずにアニメーション化するときに、複雑なタイミングツリーを作成する場合またはアニメーションを開始後に対話的に制御する場合に使用します。クロックオブジェクトを使用して、任意の Animatable オブジェクトの依存関係プロパティをアニメーション化できます。

Clock オブジェクトは、スタイル、コントロールテンプレート、またはデータテンプレート内でアニメーション化するために直接使用することはできません。 (アニメーションとタイミングシステムでスタイル、コントロールテンプレート、データテンプレートでアニメーション化する際に、実際には Clock オブジェクトが使われますが、常にそれらの Clock オブジェクトは Storyboard から自動的に作成されます。Storyboard オブジェクトと Clock オブジェクトの関係については、「アニメーションとタイミングシステムの概要」を参照してください。)

1 つの Clock をプロパティに適用するには、次の手順を実行します。

AnimationTimeline オブジェクトを作成します。
AnimationTimeline の CreateClock メソッドを使用して、AnimationClock を作成します。
アニメーション化するオブジェクトの ApplyAnimationClock メソッドを使用して、指定したプロパティに AnimationClock を適用します。

次の例は、AnimationClock を作成して、それを 2 つの類似したプロパティに適用する方法を示しています。

/*
    This example shows how to create and apply
    an AnimationClock.
*/

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

namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;

            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation =
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

'
'    This example shows how to create and apply
'    an AnimationClock.
'


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation


Namespace Microsoft.Samples.Animation.TimingBehaviors
    Public Class AnimationClockExample
        Inherits Page

        Private ReadOnly myScaleTransform As ScaleTransform

        Public Sub New()

            WindowTitle = "Opacity Animation Example"
            Background = Brushes.White
            Dim myStackPanel As New StackPanel With {
                .Margin = New Thickness(20)
            }

                ' Create a button that with a ScaleTransform.
                ' The ScaleTransform will animate when the
                ' button is clicked.
            Dim myButton As New Button With {
                .Margin = New Thickness(50),
                .HorizontalAlignment = HorizontalAlignment.Left,
                .Content = "Click Me"
            }
            myScaleTransform = New ScaleTransform(1,1)
            myButton.RenderTransform = myScaleTransform


            ' Associate an event handler with the
            ' button's Click event.
            AddHandler myButton.Click, AddressOf myButton_Clicked

            myStackPanel.Children.Add(myButton)
            Content = myStackPanel
        End Sub

        ' Create and apply and animation when the button is clicked.
        Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)

            ' Create a DoubleAnimation to animate the
            ' ScaleTransform.
            Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
                .AutoReverse = True
            } ' "To" value -  "From" value

            ' Create a clock the for the animation.
            Dim myClock As AnimationClock = myAnimation.CreateClock()

            ' Associate the clock the ScaleX and
            ' ScaleY properties of the button's
            ' ScaleTransform.
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
        End Sub
    End Class
End Namespace

タイミングツリーを作成し、これを使用してプロパティをアニメーション化するには、次の手順を実行します。

ParallelTimeline オブジェクトおよび AnimationTimeline オブジェクトを使用して、タイミングツリーを作成します。
ルート ParallelTimeline の CreateClock を使用して、ClockGroup を作成します。
ClockGroup の Children を反復処理し、その子 Clock オブジェクトを適用します。子 AnimationClock ごとに、アニメーション化するオブジェクトの ApplyAnimationClock メソッドを使用して、指定したプロパティに AnimationClock を適用します

Clock オブジェクトについて詳しくは、「アニメーションとタイミングシステムの概要」をご覧ください。

フレーム単位のアニメーション:アニメーションとタイミングシステムをバイパスする

WPF アニメーションシステムを完全にバイパスする必要があるときは、この方法を使います。この方法の 1 つのシナリオは、アニメーションの各ステップで、オブジェクトの最後の一連のやり取りに基づいてオブジェクトの再計算が必要になる物理アニメーションです。

フレーム単位アニメーションは、スタイル、コントロールテンプレート、またはデータテンプレート内で定義できません。

フレームごとにアニメーション化するには、アニメーション化するオブジェクトを格納しているオブジェクトの Rendering イベントを登録します。このイベントハンドラーメソッドは、フレームごとに 1 回呼び出されます。 WPF がビジュアルツリーの永続化されたレンダリングデータを構成ツリーにマーシャリングするたびに、イベントハンドラーメソッドが呼び出されます。

イベントハンドラーでは、アニメーション効果に必要なあらゆる計算を実行し、これらの値を使用してアニメーション化するオブジェクトのプロパティを設定します。

現在のフレームの表現時間を取得するために、このイベントに関連付けられている EventArgs を、RenderingEventArgs としてキャストできます。これにより、現在のフレームのレンダリング時間を取得するために使用できる RenderingTime プロパティが提供されます。

詳細については、Rendering に関するページをご覧ください。

プロパティアニメーションの手法の概要

必須コンポーネント

さまざまなアニメーション化方法

ストーリーボードアニメーション

ローカルアニメーション

クロックアニメーション

フレーム単位のアニメーション:アニメーションとタイミングシステムをバイパスする

関連項目

フィードバック

その他のリソース

プロパティ アニメーションの手法の概要

必須コンポーネント

さまざまなアニメーション化方法

ストーリー ボード アニメーション

ローカル アニメーション

クロック アニメーション

フレーム単位のアニメーション:アニメーションとタイミング システムをバイパスする

関連項目

フィードバック

その他のリソース

プロパティアニメーションの手法の概要

ストーリーボードアニメーション

ローカルアニメーション

クロックアニメーション

フレーム単位のアニメーション:アニメーションとタイミングシステムをバイパスする