カスタム アニメーションの概要Custom Animations Overview

このトピックでは、カスタム キー フレームやアニメーション クラスを作成して、またはフレームごとのコールバックを使ってバイパスすることにより、WPFWPF のアニメーション システムを拡張する方法と、それが必要な状況について説明します。This topic describes how and when to extend the WPFWPF animation system by creating custom key frames, animation classes, or by using per-frame callback to bypass it.

必須コンポーネントPrerequisites

このトピックを理解するには、WPFWPF によって提供されるさまざまな種類のアニメーションに精通している必要があります。To understand this topic, you should be familiar with the different types of animations provided by the WPFWPF. 詳しくは、「From/To/By アニメーションの概要」、「キー フレーム アニメーションの概要」、および「パス アニメーションの概要」をご覧ください。For more information, see the From/To/By Animations Overview, the Key-Frame Animations Overview, and the Path Animations Overview.

アニメーション クラスが継承するので、Freezableクラス、知っておくべきでFreezableから継承する方法とオブジェクトFreezableします。Because the animation classes inherit from the Freezable class, you should be familiar with Freezable objects and how to inherit from Freezable. 詳しくは、「Freezable オブジェクトの概要」をご覧ください。For more information, see the Freezable Objects Overview.

アニメーション システムの拡張Extending the Animation System

WPFWPF のアニメーション システムには、使う組み込み機能のレベルに応じて、さまざまな拡張方法があります。There are a number of ways to extend the WPFWPF animation system, depending on the level of built-in functionality you want to use. WPFWPF のアニメーション エンジンには、次の 3 つの主な機能拡張ポイントがあります。There are three primary extensibility points in the WPFWPF animation engine:

  • いずれかから継承することによって、カスタム キー フレーム オブジェクトを作成、 <型 > などのキーフレーム クラスDoubleKeyFrameします。Create a custom key frame object by inheriting from one of the <Type> KeyFrame classes, such as DoubleKeyFrame. この方法では、WPFWPF アニメーション エンジンの組み込み機能のほとんどを使います。This approach uses most of the built-in functionality of the WPFWPF animation engine.

  • 継承することによって、独自のアニメーション クラスを作成するAnimationTimelineまたはのいずれか、 <型 > AnimationBase クラス。Create your own animation class by inheriting from AnimationTimeline or one of the <Type> AnimationBase classes.

  • フレームごとのコールバックを使って、フレームごとにアニメーションを生成します。Use per-frame callback to generate animations on a per-frame basis. この方法は、アニメーションおよびタイミング システムを完全にバイパスします。This approach completely bypasses the animation and timing system.

次の表では、いくつかのアニメーション システム拡張シナリオについて説明します。The following table describes some the scenarios for extending the animation system.

目的...When you want to... 使う方法Use this approach
対応する <Type> AnimationUsingKeyFrames がある型の値の間の補間をカスタマイズするCustomize the interpolation between values of a type that has a corresponding <Type> AnimationUsingKeyFrames カスタム キー フレームを作成します。Create a custom key frame. 詳しくは、「カスタム キー フレームを作成する」セクションをご覧ください。For more information, see the Create a Custom Key Frame section.
対応する <Type> Animation がある型の値の間の補間以外の部分もカスタマイズするCustomize more than just the interpolation between values of a type that has a corresponding <Type> Animation. アニメーション化する型に対応する <Type> AnimationBase クラスを継承するカスタム アニメーション クラスを作成します。Create a custom animation class that inherits from the <Type> AnimationBase class that corresponds to the type you want to animate. 詳しくは、「カスタム アニメーション クラスを作成する」セクションをご覧ください。For more information, see the Create a Custom Animation Class section.
対応する WPFWPF アニメーションがない型をアニメーション化するAnimate a type that has no corresponding WPFWPF animation 使用して、ObjectAnimationUsingKeyFramesから継承するクラスを作成またはAnimationTimelineします。Use an ObjectAnimationUsingKeyFrames or create a class that inherits from AnimationTimeline. 詳しくは、「カスタム アニメーション クラスを作成する」セクションをご覧ください。For more information, see the Create a Custom Animation Class section.
フレームごとに計算され、最後のオブジェクト相互作用セットに基づく値のある、複数のオブジェクトをアニメーション化するAnimate multiple objects with values that are computed each frame and are based on the last set of object interactions フレームごとのコールバックを使います。Use per-frame callback. 詳しくは、「フレームごとのコールバックを使用する」セクションをご覧ください。For more information, see the Create a Use Per-Frame Callback section.

カスタム キー フレームを作成するCreate a Custom Key Frame

カスタム キー フレーム クラスの作成は、アニメーション システムを拡張する最も簡単な方法です。Creating a custom key frame class is the simplest way to extend the animation system. キー フレーム アニメーションに対して異なる補間方法が必要なときは、このアプローチを使います。Use this approach when you want to a different interpolation method for a key-frame animation. キー フレーム アニメーションの概要」で説明されているように、キー フレーム アニメーションはキー フレーム オブジェクトを使って出力値を生成します。As described in the Key-Frame Animations Overview, a key-frame animation uses key frame objects to generate its output values. 各キー フレーム オブジェクトは 3 つの機能を実行します。Each key frame object performs three functions:

  • 使用してターゲット値を指定します。 そのValueプロパティ。Specifies a target value using its Value property.

  • これでその値に到達するを使用して時間を指定します、KeyTimeプロパティ。Specifies the time at which that value should be reached using its KeyTime property.

  • InterpolateValueCore メソッドを実装することで、前のキー フレームの値とそれ自体の値の間を補間します。Interpolates between the value of the previous key frame and its own value by implementing the InterpolateValueCore method.

実装の説明Implementation Instructions

<Type> KeyFrame 抽象クラスから派生して、InterpolateValueCore メソッドを実装します。Derive from the <Type> KeyFrame abstract class and implement the InterpolateValueCore method. InterpolateValueCore メソッドは、キー フレームの現在の値を返します。The InterpolateValueCore method returns the current value of the key frame. 2 つのパラメーターとして、前のキー フレームの値と、0 から 1 の範囲の進行状況の値を受け取ります。It takes two parameters: the value of the previous key frame and a progress value that ranges from 0 to 1. 0 の進行状況は、キー フレームが開始され、値 1 には、キー フレームが完了したと、によって指定された値を返す必要がありますを示すことを示します。 そのValueプロパティ。A progress of 0 indicates the key frame has just started, and a value of 1 indicates that the key frame has just completed and should return the value specified by its Value property.

<型 > キーフレーム クラスから継承、Freezableクラスもオーバーライドする必要ありますCreateInstanceCorecore クラスの新しいインスタンスを返します。Because the <Type> KeyFrame classes inherit from the Freezable class, you must also override CreateInstanceCore core to return a new instance of your class. クラスが依存関係プロパティを使ってデータを保存しない場合、または作成の後で追加の初期化が必要な場合は、他のメソッドのオーバーライドが必要な場合があります。詳しくは、「Freezable オブジェクトの概要」をご覧ください。If the class does not use dependency properties to store its data or it requires extra initialization after creation, you might need to override additional methods; see the Freezable Objects Overview for more information.

カスタム <Type> KeyFrame アニメーションを作成した後は、その型の <Type> AnimationUsingKeyFrames でそれを使うことができます。After you've created your custom <Type> KeyFrame animation, you can use it with the <Type> AnimationUsingKeyFrames for that type.

カスタム アニメーション クラスを作成するCreate a Custom Animation Class

独自のアニメーション型を作成すると、オブジェクトをアニメーション化する方法をいっそう細かく制御できます。Creating your own animation type gives you more control over how an object in animated. 独自のアニメーションの種類を作成する 2 つの推奨される方法があります: から派生させることができます、AnimationTimelineクラスまたは*<型 >* AnimationBase クラス。There are two recommended ways to create your own animation type: you can derive from the AnimationTimeline class or the <Type> AnimationBase class. <Type> Animation クラスまたは <Type> AnimationUsingKeyFrames クラスからの派生は推奨されません。Deriving from the <Type> Animation or <Type> AnimationUsingKeyFrames classes is not recommended.

<Type>AnimationBase から派生するDerive from <Type>AnimationBase

<Type> AnimationBase クラスからの派生は、新しいアニメーション型を作成する最も簡単な方法です。Deriving from a <Type> AnimationBase class is the simplest way to create a new animation type. 対応する <Type> AnimationBase クラスが既にある型の新しいアニメーションを作成する場合は、この方法を使います。Use this approach when you want to create a new animation for type that already has a corresponding <Type> AnimationBase class.

実装の説明Implementation Instructions

<Type> Animation から派生して、GetCurrentValueCore メソッドを実装します。Derive from a <Type> Animation class and implement the GetCurrentValueCore method. GetCurrentValueCore メソッドは、アニメーションの現在の値を返します。The GetCurrentValueCore method returns the current value of the animation. 次の 3 つのパラメーターを受け取ります: 推奨される開始値、推奨される終了値、およびAnimationClockアニメーションの進行状況を判断するために使用します。It takes three parameters: a suggested starting value, a suggested ending value, and an AnimationClock, which you use to determine the progress of the animation.

<型 > AnimationBase クラスから継承、Freezableクラスもオーバーライドする必要ありますCreateInstanceCorecore クラスの新しいインスタンスを返します。Because the <Type> AnimationBase classes inherit from the Freezable class, you must also override CreateInstanceCore core to return a new instance of your class. クラスが依存関係プロパティを使ってデータを保存しない場合、または作成の後で追加の初期化が必要な場合は、他のメソッドのオーバーライドが必要な場合があります。詳しくは、「Freezable オブジェクトの概要」をご覧ください。If the class does not use dependency properties to store its data or it requires extra initialization after creation, you might need to override additional methods; see the Freezable Objects Overview for more information.

詳しくは、アニメーション化する型の <Type> AnimationBase クラスの GetCurrentValueCore メソッドのドキュメントをご覧ください。For more information, see the GetCurrentValueCore method documentation for the <Type> AnimationBase class for the type that you want to animate. 例については、「Custom Animation Sample」(カスタム アニメーションのサンプル) をご覧ください。For an example, see the Custom Animation Sample

別の方法Alternative Approaches

アニメーション値を補間する方法を変更したいだけの場合は、いずれかの <Type> KeyFrame クラスからの派生を検討します。If you simply want to change how animation values are interpolated, considering deriving from one of the <Type> KeyFrame classes. 作成したキー フレームを、WPFWPF によって提供される対応する <Type> AnimationUsingKeyFrames で使うことができます。The key frame you create can be used with the corresponding <Type> AnimationUsingKeyFrames provided by WPFWPF.

AnimationTimeline から派生するDerive from AnimationTimeline

派生、AnimationTimelineクラスを一致するまだ持たない型のアニメーションを作成するときにWPFWPFアニメーション、または厳密に型指定されていないアニメーションを作成します。Derive from the AnimationTimeline class when you want to create an animation for a type that doesn't already have a matching WPFWPF animation, or you want to create an animation that is not strongly typed.

実装の説明Implementation Instructions

派生、AnimationTimelineクラスし、次のメンバーをオーバーライドします。Derive from the AnimationTimeline class and override the following members:

  • CreateInstanceCore – オーバーライドする必要があります新しいクラスが具象の場合、CreateInstanceCoreクラスの新しいインスタンスを返します。CreateInstanceCore – If your new class is concrete, you must override CreateInstanceCore to return a new instance of your class.

  • GetCurrentValue – アニメーションの現在の値を返すには、このメソッドをオーバーライドします。GetCurrentValue – Override this method to return the current value of your animation. 3 つのパラメーターを受け取ります。 既定値は配信元、変換先の既定値では、およびAnimationClockIt takes three parameters: a default origin value, a default destination value, and an AnimationClock. 使用して、AnimationClockを現在の時刻またはアニメーションの進行状況を取得します。Use the AnimationClock to obtain the current time or progress for the animation. 既定の開始値と終了値を使うかどうかを選択できます。You can choose whether to use the default origin and destination values.

  • IsDestinationDefault – アニメーションがで指定された既定の終了値を使用するかどうかを指定するには、このプロパティのオーバーライド、GetCurrentValueメソッド。IsDestinationDefault – Override this property to indicate whether your animation uses the default destination value specified by the GetCurrentValue method.

  • TargetPropertyType – かを示すには、このプロパティのオーバーライド、Type出力のアニメーションが生成されます。TargetPropertyType – Override this property to indicate the Type of output your animation produces.

クラスが依存関係プロパティを使ってデータを保存しない場合、または作成の後で追加の初期化が必要な場合は、他のメソッドのオーバーライドが必要な場合があります。詳しくは、「Freezable オブジェクトの概要」をご覧ください。If the class does not use dependency properties to store its data or it requires extra initialization after creation, you might need to override additional methods; see the Freezable Objects Overview for more information.

推奨される (WPFWPF アニメーションによって使われる) パラダイムは、2 つの継承レベルを使うことです。The recommended paradigm (used by WPFWPF animations) is to use two inheritance levels:

  1. 作成する抽象*<型 >* AnimationBase クラスから派生したAnimationTimelineします。Create an abstract <Type> AnimationBase class that derives from AnimationTimeline. このクラスをオーバーライドする必要があります、TargetPropertyTypeメソッド。This class should override the TargetPropertyType method. また新しい抽象メソッド GetCurrentValueCore を導入し、オーバーライドする必要がありますGetCurrentValueGetCurrentValueCore を呼び出すし、既定の配信元の値と既定の宛先値パラメーターの型を検証します。It should also introduce a new abstract method, GetCurrentValueCore, and override GetCurrentValue so that it validates the types of the default origin value and default destination value parameters, then calls GetCurrentValueCore.

  2. 継承する別のクラスを作成から、新しい*<型 >* AnimationBase クラスをオーバーライドし、CreateInstanceCoreメソッド、導入した GetCurrentValueCore メソッド、IsDestinationDefaultプロパティ。Create another class that inherits from your new <Type> AnimationBase class and overrides the CreateInstanceCore method, the GetCurrentValueCore method that you introduced, and the IsDestinationDefault property.

別の方法Alternative Approaches

対応するによって/アニメーションまたはキー フレーム アニメーションを持たない型をアニメーション化する場合は、使用を検討して、ObjectAnimationUsingKeyFramesします。If you want to animate a type that has no corresponding From/To/By animation or key-frame animation, consider using an ObjectAnimationUsingKeyFrames. これは弱い型付けであるため、ObjectAnimationUsingKeyFramesあらゆる種類の値をアニメーション化することができます。Because it is weakly typed, an ObjectAnimationUsingKeyFrames can animate any type of value. このアプローチの欠点はObjectAnimationUsingKeyFrames離散補間のみをサポートします。The drawback to this approach is that ObjectAnimationUsingKeyFrames only supports discrete interpolation.

フレームごとのコールバックを使用するUse Per-Frame Callback

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

実装の説明Implementation Instructions

この概要で説明されている他の方法とは異なり、フレームごとのコールバックを使うために、カスタム アニメーション クラスまたはカスタム キー フレーム クラスを作成する必要はありません。Unlike the other approaches described in this overview, to use per-frame callback you don't need to create a custom animation or key frame class.

代わりに、登録、Renderingをアニメーション化するオブジェクトを含むオブジェクトのイベント。Instead, 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 your whatever calculations 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 of 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