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

このトピックでは、ストーリーボード、ローカル アニメーション、クロック、フレームごとのアニメーションなど、プロパティをアニメーション化するさまざまなアプローチについて説明します。This topic describes the different approaches for animating properties: storyboards, local animations, clocks, and per-frame animations.

必須コンポーネントPrerequisites

このトピックを理解するには、「アニメーションの概要」で説明されている基本のアニメーション機能に精通している必要があります。To understand this topic, you should be familiar with the basic animation features described in the Animation Overview.

さまざまなアニメーション化方法Different Ways to Animate

プロパティをアニメーション化するには多数のシナリオがあるため、WPFWPF ではプロパティをアニメーション化するいくつかの方法が提供されます。Because there are many different scenarios for animating properties, WPFWPF provides several approaches for animating properties.

それぞれの方法について、インスタンス単位、スタイル内、コントロール テンプレート内、またはデータ テンプレート内で使用できるかどうか、XAMLXAML で使用できるかどうか、およびアニメーションを対話的に制御できるかどうかを次の表に示します。For each approach, the following table indicates whether it can be used per-instance, in styles, in control templates, or in data templates; whether it can be used in XAMLXAML; and whether the approach enables you to interactively control the animation. "インスタンス単位" とは、スタイル、コントロール テンプレート、またはデータ テンプレート内のインスタンスではなく、オブジェクトのインスタンスに直接アニメーションまたはストーリーボードを適用する方法のことです。"Per-Instance" refers to the technique of applying an animation or storyboard directly to instances of an object, rather than in a style, control template, or data template.

アニメーションの手法Animation technique シナリオScenarios XAML のサポートSupports XAML 対話的に制御可能Interactively controllable
ストーリー ボード アニメーションStoryboard animation インスタンスごとのStyleControlTemplateDataTemplatePer-instance, Style, ControlTemplate, DataTemplate [はい]Yes [はい]Yes
ローカル アニメーションLocal animation インスタンス単位Per-instance いいえNo いいえNo
クロック アニメーションClock animation インスタンス単位Per-instance いいえNo [はい]Yes
フレーム単位のアニメーションPer-frame animation インスタンス単位Per-instance いいえNo N/AN/A

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

使用して、Storyboardを定義し、アニメーションを適用する場合XAMLXAML対話形式で、開始、アニメーションの複雑なツリーを作成またはでアニメーション化した後に、アニメーションを制御、 StyleControlTemplateまたはDataTemplateします。Use a Storyboard when you want to define and apply your animations in XAMLXAML, interactively control your animations after they start, create a complex tree of animations, or animate in a Style, ControlTemplate or DataTemplate. によってアニメーション化するオブジェクトのStoryboard、する必要があります、FrameworkElementまたはFrameworkContentElement、設定するために使用する必要がありますか、FrameworkElementまたはFrameworkContentElementします。For an object to be animated by a Storyboard, it must be a FrameworkElement or FrameworkContentElement, or it must be used to set a FrameworkElement or FrameworkContentElement. 詳しくは、「ストーリーボードの概要」をご覧ください。For more details, see the Storyboards Overview.

AStoryboard特殊な種類のコンテナーは、Timelineが含まれているアニメーションのターゲットの情報を提供します。A Storyboard is a special type of container Timeline that provides targeting information for the animations it contains. 使用してアニメーション化、 Storyboard、次の 3 つの手順を完了します。To animate with a Storyboard, you complete the following three steps.

  1. 宣言をStoryboardと 1 つまたは複数のアニメーション。Declare a Storyboard and one or more animations.

  2. 使用して、TargetNameTargetPropertyターゲット オブジェクトを指定するプロパティとそれぞれのアニメーションのプロパティをアタッチします。Use the TargetName and TargetProperty attached properties to specify the target object and property of each animation.

  3. (コードのみ)定義、NameScopeFrameworkElementまたはFrameworkContentElementします。(Code only) Define a NameScope for a FrameworkElement or FrameworkContentElement. 使用してアニメーション化するオブジェクトの名前を登録FrameworkElementまたはFrameworkContentElementします。Register the names of the objects to animate with that FrameworkElement or FrameworkContentElement.

  4. 開始、Storyboardします。Begin the Storyboard.

以降、Storyboardアニメーション化するプロパティにアニメーションを適用し、それらを開始します。Beginning a Storyboard applies animations to the properties they animate and starts them. 開始する 2 つの方法がある、 Storyboard: 使用することができます、Beginメソッドによって提供される、Storyboardクラス、またはを使用できる、BeginStoryboardアクション。There are two ways to begin a Storyboard: you can use the Begin method provided by the Storyboard class, or you can use a BeginStoryboard action. 唯一の方法でアニメーション化するXAMLXAMLを使用して、BeginStoryboardアクション。The only way to animate in XAMLXAML is to use a BeginStoryboard action. ABeginStoryboardでアクションを使用できます、 EventTrigger、プロパティTrigger、またはDataTriggerします。A BeginStoryboard action can be used in an EventTrigger, property Trigger, or a DataTrigger.

次の表に、さまざまな場所を各Storyboard開始手法がサポートされています: インスタンス単位、スタイル、コントロール テンプレート、およびデータ テンプレート。The following table shows the different places where each Storyboard begin technique is supported: per-instance, style, control template, and data template.

ストーリーボードが開始される場所Storyboard is begun using… インスタンス単位Per-instance スタイルStyle コントロール テンプレートControl template データ テンプレートData template Example
BeginStoryboard および EventTriggerBeginStoryboard and an EventTrigger [はい]Yes はいYes はいYes [はい]Yes ストーリーボードを使ってプロパティをアニメーション化するAnimate a Property by Using a Storyboard
BeginStoryboard プロパティと、 TriggerBeginStoryboard and a property Trigger いいえNo [はい]Yes はいYes [はい]Yes プロパティ値が変化したときにアニメーションをトリガーするTrigger an Animation When a Property Value Changes
BeginStoryboard および DataTriggerBeginStoryboard and a DataTrigger いいえNo [はい]Yes はいYes [はい]Yes 方法: データが変更されたときにアニメーションをトリガーします。How to: Trigger an Animation When Data Changes
Begin メソッドBegin method [はい]Yes ×No ×No いいえNo ストーリーボードを使ってプロパティをアニメーション化するAnimate a Property by Using a Storyboard

詳細についてはStoryboard、オブジェクトを参照してください、ストーリー ボードの概要します。For more information about Storyboard objects, see the Storyboards Overview.

ローカル アニメーションLocal Animations

ローカル アニメーションは、いずれかの依存関係プロパティをアニメーション化する便利な手段を提供Animatableオブジェクト。Local animations provide a convenient way to animate a dependency property of any Animatable object. プロパティに適用するアニメーションが 1 つだけであり、アニメーションを開始後に対話的に制御する必要がない場合は、ローカル アニメーションを使用します。Use local animations when you want to apply a single animation to a property and you don't need to interactively control the animation after it starts. 異なり、Storyboardアニメーション、ローカル アニメーションに関連付けられていないオブジェクトのアニメーションできます、FrameworkElementまたはFrameworkContentElementします。Unlike a Storyboard animation, a local animation can animate an object that isn't associated with a FrameworkElement or a FrameworkContentElement. 定義することも必要はありません、NameScopeこの種類のアニメーション。You also don't have to define a NameScope for this type of animation.

ローカル アニメーションはコードだけで使用できます。スタイル、コントロール テンプレート、またはデータ テンプレート内では定義できません。Local animations may only be used in code, and cannot be defined in styles, control templates, or data templates. ローカル アニメーションは、開始後に対話的に制御できません。A local animation cannot be interactively controlled after it is started.

ローカル アニメーションを使用してアニメーション化するには、次の手順を実行します。To animate using a local animation, complete the following steps.

  1. 作成、AnimationTimelineオブジェクト。Create an AnimationTimeline object.

  2. 使用して、BeginAnimationを適用するアニメーション化するオブジェクトのメソッド、AnimationTimelineを指定するプロパティ。Use the BeginAnimation method of the object that you want to animate to apply the AnimationTimeline to the property that you specify.

次の例の幅と背景色をアニメーション化する方法を示しています、Buttonします。The following example shows how to animate the width and background color of a 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
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 Animations

使用Clockオブジェクトを使用せずにアニメーション化するときに、Storyboard複雑なタイミング ツリーを作成または起動後に、アニメーションを対話的に制御したいとします。Use Clock objects when you want to animate without using a Storyboard and you want to create complex timing trees or interactively control animations after they start. Clock オブジェクトを使用するには任意の依存関係プロパティをアニメーション化Animatableオブジェクト。You can use Clock objects to animate a dependency property of any Animatable object.

使用することはできませんClockテンプレート、またはデータ テンプレートに、直接、スタイルのアニメーション化するコントロールにオブジェクト。You cannot use Clock objects directly to animate in styles, control templates, or data templates. (実際にアニメーションとタイミング システムを使用してClockそれでは、スタイル、コントロール テンプレート、およびデータのテンプレートが、アニメーション化するオブジェクトを作成する必要がありますClockからオブジェクトをStoryboardします。(The animation and timing system actually does use Clock objects to animate in styles, control templates, and data templates, but it must create those Clock objects for you from a Storyboard. 間のリレーションシップの詳細についてはStoryboardオブジェクトとClock、オブジェクトを参照してください、アニメーションとタイミング システムの概要)。For more information about the relationship between Storyboard objects and Clock objects, see the Animation and Timing System Overview.)

1 つを適用するClockプロパティには、次の手順を完了します。To apply a single Clock to a property, you complete the following steps.

  1. 作成、AnimationTimelineオブジェクト。Create an AnimationTimeline object.

  2. 使用して、CreateClockのメソッド、AnimationTimelineを作成する、AnimationClockします。Use the CreateClock method of the AnimationTimeline to create an AnimationClock.

  3. 使用して、ApplyAnimationClockを適用するアニメーション化するオブジェクトのメソッド、AnimationClockを指定するプロパティ。Use the ApplyAnimationClock method of the object that you want to animate to apply the AnimationClock to the property you specify.

次の例を作成する方法を示しています、AnimationClock同様の 2 つのプロパティに適用されます。The following example shows how to create an AnimationClock and apply it to two similar properties.

/*
    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
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 myScaleTransform As ScaleTransform

        Public Sub New()

            Me.WindowTitle = "Opacity Animation Example"
            Me.Background = Brushes.White
            Dim myStackPanel As New StackPanel()
            myStackPanel.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()
            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.
            AddHandler myButton.Click, AddressOf myButton_Clicked

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

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

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

            ' 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

タイミング ツリーを作成し、これを使用してプロパティをアニメーション化するには、次の手順を実行します。To create a timing tree and use it animate properties, you complete the following steps.

  1. 使用ParallelTimelineAnimationTimelineタイミング ツリーを作成するオブジェクト。Use ParallelTimeline and AnimationTimeline objects to create the timing tree.

  2. 使用して、CreateClockルートのParallelTimelineを作成する、ClockGroupします。Use the CreateClock of the root ParallelTimeline to create a ClockGroup.

  3. 反復処理、ChildrenClockGroupし、その子を適用Clockオブジェクト。Iterate through the Children of the ClockGroup and apply its child Clock objects. AnimationClock子を使用して、ApplyAnimationClockを適用するアニメーション化するオブジェクトのメソッド、AnimationClockプロパティを指定します。For each AnimationClock child, use the ApplyAnimationClock method of the object that you want to animate to apply the AnimationClock to the property you specify

Clock オブジェクトについて詳しくは、「アニメーションとタイミング システムの概要」をご覧ください。For more information about Clock objects, see the Animation and Timing System Overview.

フレーム単位アニメーション:アニメーションとタイミング システムをバイパスします。Per-Frame Animation: Bypass the Animation and Timing System

WPFWPF アニメーション システムを完全にバイパスする必要があるときは、この方法を使います。Use this approach when you need to completely bypass the WPFWPF animation system. この方法の 1 つのシナリオは、アニメーションの各ステップで、オブジェクトの最後の一連のやり取りに基づいてオブジェクトの再計算が必要になる物理アニメーションです。One scenario for this approach is physics animations, where each step in the animation requires objects to be recomputed based on the last set of object interactions.

フレーム単位アニメーションは、スタイル、コントロール テンプレート、またはデータ テンプレート内で定義できません。Per-frame animations cannot be defined inside styles, control templates, or data templates.

登録のフレームに、アニメーション化する、Renderingをアニメーション化するオブジェクトを含むオブジェクトのイベント。To animate frame-by-frame, you register for the Rendering event of the object that contains the objects you want to animate. このイベント ハンドラー メソッドは、フレームごとに 1 回呼び出されます。This event handler method gets called once per frame. WPFWPF がビジュアル ツリーの永続化されたレンダリング データを構成ツリーにマーシャリングするたびに、イベント ハンドラー メソッドが呼び出されます。Each time that WPFWPF marshals the persisted rendering data in the visual tree across to the composition tree, your event handler method is called.

イベント ハンドラーでは、アニメーション効果に必要なあらゆる計算を実行し、これらの値を使用してアニメーション化するオブジェクトのプロパティを設定します。In your event handler, perform whatever calculations are necessary for your animation effect and set the properties of the objects you want to animate with these values.

現在のフレームの表現時間を取得する、EventArgsこれに関連付けられているイベントとしてキャストできるRenderingEventArgs、提供、RenderingTime現在のフレームを取得するのに使用できるプロパティの表示時間。To obtain the presentation time for the current frame, the EventArgs associated with this event can be cast as RenderingEventArgs, which provide a RenderingTime property that you can use to obtain the current frame's rendering time.

詳細については、次を参照してください。、Renderingページ。For more information, see the Rendering page.

関連項目See also