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

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

[前提条件]

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

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

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

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

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

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

Storyboardは、コンテナーに含まれるアニメーションのターゲット情報を提供する特殊な種類のコンテナー Timelineです。 Storyboardでアニメーション化するには、次の 3 つの手順を実行します。

1. Storyboardと 1 つ以上のアニメーションを宣言します。

2. TargetNameプロパティとTargetProperty添付プロパティを使用して、各アニメーションのターゲット オブジェクトとプロパティを指定します。

3. (コードのみ)NameScopeまたはFrameworkElementのFrameworkContentElementを定義します。 その FrameworkElement または FrameworkContentElementでアニメーション化するオブジェクトの名前を登録します。

4. Storyboardを開始します。

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

次の表に、各 Storyboard の開始手法がサポートされているさまざまな場所 (インスタンスごと、スタイル、コントロール テンプレート、データ テンプレート) を示します。

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

ローカル アニメーション

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

ローカル アニメーションはコードでのみ使用でき、スタイル、コントロール テンプレート、またはデータ テンプレートでは定義できません。 ローカル アニメーションは、開始後に対話形式で制御することはできません。

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

1. AnimationTimeline オブジェクトを作成します。

2. アニメーション化するオブジェクトの 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 オブジェクトを使用します。 Clock オブジェクトを使用すると、任意の Animatable オブジェクトの依存関係プロパティをアニメーション化できます。

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

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

1. AnimationTimeline オブジェクトを作成します。

2. CreateClockを作成するには、AnimationTimelineの AnimationClock メソッドを使用します。

3. アニメーション化するオブジェクトの 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

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

1. ParallelTimelineオブジェクトとAnimationTimelineオブジェクトを使用して、タイミング ツリーを作成します。

2. ルート CreateClockのParallelTimelineを使用して、ClockGroupを作成します。

3. ChildrenのClockGroupを反復処理し、その子Clockオブジェクトを適用します。 子 AnimationClock ごとに、アニメーション化するオブジェクトの ApplyAnimationClock メソッドを使用して、指定したプロパティに AnimationClock を適用します。

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

Per-Frame アニメーション: アニメーションとタイミング システムをバイパスする

この方法は、WPF アニメーション システムを完全にバイパスする必要がある場合に使用します。 このアプローチの 1 つのシナリオは物理アニメーションです。アニメーションの各ステップでは、オブジェクトの最後の相互作用のセットに基づいてオブジェクトを再計算する必要があります。

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

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

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

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

詳細については、 Rendering ページを参照してください。

こちらも参照ください

• アニメーションの概要
• ストーリーボードの概要
• アニメーションとタイミング システムの概要
• 依存関係プロパティの概要