次の方法で共有


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

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

必須コンポーネント

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

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

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

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

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

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

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

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

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

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

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

  4. Storyboard を開始します。

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

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

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

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

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

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

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

  2. AnimationTimelineCreateClock メソッドを使用して、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. ルート ParallelTimelineCreateClock を使用して、ClockGroup を作成します。

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

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

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

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

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

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

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

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

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

関連項目