プロパティ アニメーション手法の概要
このトピックでは、プロパティをアニメーション化するためのさまざまな方法 (ストーリーボード、ローカル アニメーション、クロック、フレームごとのアニメーション) について説明します。
前提 条件
このトピックを理解するには、「アニメーションの概要」で説明されている基本的なアニメーション機能について理解している必要があります。
アニメーション化のさまざまな方法
プロパティのアニメーション化にはさまざまなシナリオがあるため、WPF にはプロパティをアニメーション化するためのいくつかの方法が用意されています。
次の表は、各方法について、インスタンスごと、スタイル、コントロール テンプレート、またはデータ テンプレートのいずれで使用できるかを示しています。XAML で使用できるかどうか。と、この方法でアニメーションを対話的に制御できるかどうかを示します。 "インスタンスごと" とは、スタイル、コントロール テンプレート、またはデータ テンプレートではなく、オブジェクトのインスタンスにアニメーションまたはストーリーボードを直接適用する手法を指します。
| アニメーション手法 | シナリオ | XAML をサポートします | 対話形式で制御可能 |
|---|---|---|---|
| ストーリーボード アニメーション | インスタンスごと、Style、ControlTemplate、DataTemplate | はい | はい |
| ローカル アニメーション | インスタンスごと | いいえ | いいえ |
| クロック アニメーション | インスタンスごと | いいえ | はい |
| フレームごとのアニメーション | インスタンスごと | いいえ | N/A |
ストーリーボード アニメーション
XAML でアニメーションを定義して適用する場合、アニメーションの開始後に対話形式でアニメーションを制御する場合、アニメーションの複雑なツリーを作成する場合、または Style、ControlTemplate、または DataTemplateでアニメーション化する場合は、Storyboard を使用します。 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
クロック アニメーション
Storyboard を使用せずにアニメーション化する場合や、開始後に複雑なタイミング ツリーを作成したり、アニメーションを対話的に制御したりする場合は、Clock オブジェクトを使用します。 Clock オブジェクトを使用すると、任意の Animatable オブジェクトの依存関係プロパティをアニメーション化できます。
Clock オブジェクトを直接使用して、スタイル、コントロール テンプレート、またはデータ テンプレートでアニメーション化することはできません。 (アニメーションとタイミング システムでは、実際には Clock オブジェクトを使用してスタイル、コントロール テンプレート、およびデータ テンプレートでアニメーション化しますが、Storyboardからそれらの Clock オブジェクトを作成する必要があります。Storyboard オブジェクトと Clock オブジェクトの関係の詳細については、「アニメーションとタイミング システムの概要」を参照してください)。
プロパティに 1 つの Clock を適用するには、次の手順を実行します。
AnimationTimeline オブジェクトを作成します。
AnimationClockを作成するには、AnimationTimeline の CreateClock メソッドを使用します。
アニメーション化するオブジェクトの 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を作成します。
Children を ClockGroup の中で反復処理し、その子供である Clock オブジェクトを適用します。 子 AnimationClock ごとに、アニメーション化するオブジェクトの ApplyAnimationClock メソッドを使用して、指定したプロパティに AnimationClock を適用します。
Clock オブジェクトの詳細については、「アニメーションとタイミング システムの概要」を参照してください。
Per-Frame アニメーション: アニメーションとタイミング システムをバイパスする
この方法は、WPF アニメーション システムを完全にバイパスする必要がある場合に使用します。 このアプローチの 1 つのシナリオは物理アニメーションです。アニメーションの各ステップでは、オブジェクトの最後の相互作用のセットに基づいてオブジェクトを再計算する必要があります。
フレームごとのアニメーションは、スタイル、コントロール テンプレート、またはデータ テンプレート内で定義することはできません。
フレームごとにアニメーション化するには、アニメーション化するオブジェクトを含むオブジェクトの Rendering イベントに登録します。 このイベント ハンドラー メソッドは、フレームごとに 1 回呼び出されます。 WPF がビジュアル ツリー内の永続化されたレンダリング データをコンポジション ツリーにマーシャリングするたびに、イベント ハンドラー メソッドが呼び出されます。
イベント ハンドラーで、アニメーション効果に必要な計算を実行し、アニメーション化するオブジェクトのプロパティをこれらの値で設定します。
現在のフレームのプレゼンテーション時間を取得するには、このイベントに関連付けられている EventArgs を RenderingEventArgsとしてキャストできます。これにより、現在のフレームのレンダリング時間を取得するために使用できる RenderingTime プロパティが提供されます。
詳細については、Rendering ページを参照してください。
関連項目
.NET Desktop feedback