アニメーションとタイミング システムの概要Animation and Timing System Overview

このトピックでは、タイミング システムがアニメーション、Timeline、および Clock クラスを使用してプロパティをアニメーション化する方法について説明します。This topic describes how the timing system uses the animation, Timeline, and Clock classes to animate properties.

必須コンポーネントPrerequisites

このトピックを理解するには、「アニメーションの概要」で説明されているように、WPFWPF のアニメーションを使ってプロパティをアニメーション化できる必要があります。To understand this topic, you should be able to use WPFWPF animations to animate properties, as described in the Animation Overview. 依存関係プロパティの理解も役に立ちます。詳しくは、「依存関係プロパティの概要」をご覧ください。It also helps to be familiar with dependency properties; for more information, see the Dependency Properties Overview.

タイムラインとクロックTimelines and Clocks

アニメーションの概要」では、Timeline が時間のセグメントを表す方法、およびアニメーションが出力値を生成する Timeline の種類であることを説明しました。The Animation Overview described how a Timeline represents a segment of time, and an animation is a type of Timeline that produces output values. Timeline だけでは、時間のセグメントを記述すること以外何も行われません。By itself, a Timeline, doesn't do anything other than just describe a segment of time. 実際の処理を行うのは、タイムラインの Clock オブジェクトです。It's the timeline's Clock object that does the real work. 同様に、アニメーションは実際にはプロパティをアニメーション化しません。アニメーション クラスでは出力値の計算方法が記述されますが、アニメーションの出力を生成してそれをプロパティに適用するのは、アニメーションに対して作成された Clock です。Likewise, animation doesn't actually animate properties: an animation class describes how output values should be calculated, but it’s the Clock that was created for the animation that drives the animation output and applies it to properties.

Clock は、Timeline に対するタイミング関連の実行時状態を保持する特殊な種類のオブジェクトです。A Clock is a special type of object that maintains timing-related run-time state for the Timeline. これは、アニメーションとタイミング システムに不可欠な 3 つの情報である CurrentTimeCurrentProgressCurrentState を提供します。It provides three bits of information that are essential to the animation and timing system: CurrentTime, CurrentProgress, and CurrentState. Clock は、Timeline によって記述されるタイミング動作を使用して、現在時間、進行状況、状態を決定します (DurationRepeatBehaviorAutoReverse など)。A Clock determines its current time, progress, and state by using the timing behaviors described by its Timeline: Duration, RepeatBehavior, AutoReverse, and so on.

ほとんどの場合、Clock はタイムラインに対して自動的に作成されます。In most cases, a Clock is created automatically for your timeline. Storyboard または BeginAnimation メソッドを使用してアニメーションを作成すると、タイムラインとアニメーションに対してクロックが自動的に作成されて、対象のプロパティに適用されます。When you animate by using a Storyboard or the BeginAnimation method, clocks are automatically created for your timelines and animations and applied to their targeted properties. また、TimelineCreateClock メソッドを使用して Clock を明示的に作成することもできます。You can also create a Clock explicitly by using the CreateClock method of your Timeline. MediaTimeline.CreateClock メソッドは、呼び出された Timeline に対して適切な型のクロックを作成します。The MediaTimeline.CreateClock method creates a clock of the appropriate type for the Timeline on which it is called. Timeline に子タイムラインが含まれる場合は、それらに対しても Clock オブジェクトを作成します。If the Timeline contains child timelines, it creates Clock objects for them as well. 結果の Clock オブジェクトは、作成元の Timeline オブジェクト ツリーの構造と一致するツリーに編成されます。The resulting Clock objects are arranged in trees that match the structure of the Timeline objects tree from which they are created.

異なる型のタイムラインに対して異なる型のクロックがあります。There are different types of clocks for different types of timelines. 次の表では、Timeline の異なる型に対応する Clock の型を示します。The following table shows the Clock types that correspond to some of the different Timeline types.

タイムラインの型Timeline type クロックの型Clock type クロックの目的Clock purpose
Animation (AnimationTimelineから継承)Animation (inherits from AnimationTimeline) AnimationClock 依存関係プロパティの出力値を生成します。Generates output values for a dependency property.
MediaTimeline MediaClock メディア ファイルを処理します。Processes a media file.
ParallelTimeline ClockGroup 子の Clock オブジェクトをグループ化して制御します。Groups and controls its child Clock objects
Storyboard ClockGroup 子の Clock オブジェクトをグループ化して制御します。Groups and controls its child Clock objects

ApplyAnimationClock メソッドを使用することで、作成した AnimationClock オブジェクトを互換性のある依存関係プロパティに適用できます。You can apply any AnimationClock objects you create to compatible dependency properties by using the ApplyAnimationClock method.

多数の似たオブジェクトのアニメーション化など、負荷の高いシナリオでは、独自の Clock の使用を管理するとパフォーマンスの利点があります。In performance-intensive scenarios, such as animating large numbers of similar objects, managing your own Clock use can provide performance benefits.

クロックとタイム マネージャーClocks and the Time Manager

WPFWPF でオブジェクトをアニメーション化するとき、タイムラインに対して作成された Clock オブジェクトを管理するのはタイム マネージャーです。When you animate objects in WPFWPF, it’s the time manager that manages the Clock objects created for your timelines. タイム マネージャーは Clock オブジェクトのツリーのルートで、そのツリー内の時間の流れを制御します。The time manager is the root of a tree of Clock objects and controls the flow of time in that tree. タイム マネージャーは各 WPFWPF アプリケーションに自動的に作成され、アプリケーション開発者には表示されません。A time manager is automatically created for each WPFWPF application and is invisible to the application developer. タイム マネージャーは 1 秒間に何度も "タイマーを刻み" ます。1 秒ごとに刻まれるタイマーの実際の数は、使用可能なシステム リソースによって異なります。The time manager "ticks" many times per second; the actual number of ticks that occur each second varies depending on available system resources. これらのティックごとに、タイム マネージャーはタイミング ツリー内のすべての Active Clock オブジェクトの状態を計算します。During each one of these ticks, the time manager computes the state of all Active Clock objects in the timing tree.

次の図では、タイム マネージャー、AnimationClock、およびアニメーション化される依存関係プロパティの間の関係を示します。The following illustration shows the relationship between the time manager, and AnimationClock, and an animated dependency property.

タイミング システムのコンポーネントTiming system components
プロパティのアニメーション化Animating a property

タイム マネージャーは、タイマーを刻むとき、アプリケーション内のすべての Active Clock の時刻を更新します。When the time manager ticks, it updates the time of every Active Clock in the application. ClockAnimationClock の場合は、作成元の AnimationTimelineGetCurrentValue メソッドを使用して、現在の出力値を計算します。If the Clock is an AnimationClock, it uses the GetCurrentValue method of the AnimationTimeline from which it was created to calculate its current output value. AnimationClock は、AnimationTimeline に、現在のローカル時刻、入力値 (通常はプロパティの基本値)、既定の目標値を提供します。The AnimationClock supplies the AnimationTimeline with the current local time, an input value, which is typically the base value of the property, and a default destination value. GetValue メソッドまたはその CLR アクセサーを使用してプロパティによってアニメーション化された値を取得するときは、その AnimationClock の出力を取得します。When you retrieve the value of an animated by property using the GetValue method or its CLR accessor, you get the output of its AnimationClock.

クロック グループClock Groups

前のセクションでは、タイムラインの異なる型に対して Clock オブジェクトの異なる型があることを説明しました。The preceding section described how there are different types of Clock objects for different types of timelines. 次の図では、タイム マネージャー、ClockGroupAnimationClock、およびアニメーション化される依存関係プロパティの間の関係を示します。The following illustration shows the relationship between the time manager, a ClockGroup, an AnimationClock, and an animated dependency property. ClockGroup は、アニメーションと他のタイムラインをグループ化する Storyboard クラスなど、他のタイムラインをグループ化するタイムラインに対して作成されます。A ClockGroup is created for timelines that group other timelines, such as the Storyboard class, which groups animations and other timelines.

タイミング システムのコンポーネントTiming system components
ClockGroupA ClockGroup

コンポジションComposition

複数のクロックを 1 つのプロパティと関連付けることができます。その場合、各クロックは前のクロックの出力値を基本値として使います。It's possible to associate multiple clocks with a single property, in which case each clock uses the output value of the preceding clock as its base value. 次の図は、同じプロパティに適用された 3 つの AnimationClock オブジェクトを示したものです。The following illustration shows three AnimationClock objects applied to the same property. Clock1 は、アニメーション化されたプロパティの基本値を入力として使って、出力を生成します。Clock1 uses the base value of the animated property as its input and uses it to generate output. Clock2 は、Clock1 の出力を入力として受け取り、それを使って出力を生成します。Clock2 takes the output from Clock1 as its input and uses it to generate output. Clock3 は、Clock2 の出力を入力として受け取り、それを使って出力を生成します。Clock3 takes the output from Clock2 as its input and uses it to generate output. 複数のクロックが同じプロパティに同時に影響を与える場合、それらはコンポジション チェーン内にあると言います。When multiple clocks affect the same property simultaneously, they are said to be in a composition chain.

タイミング システムのコンポーネントTiming system components
コンポジション チェーンA composition chain

コンポジション チェーン内の AnimationClock オブジェクトの入力と出力の間には関係が作成されますが、それらのタイミング動作は影響を受けません。Clock オブジェクト (AnimationClock オブジェクトを含みます) には、親の Clock オブジェクトに対する階層的依存関係があります。Note that although a relationship is created among the input and output of the AnimationClock objects in the composition chain, their timing behaviors are not affected; Clock objects (including AnimationClock objects) have a hierarchical dependency on their parent Clock objects.

複数のクロックを同じプロパティに適用するには、Storyboard、アニメーション、または AnimationClock を適用するときに、Compose HandoffBehavior を使用します。To apply multiple clocks to the same property, use the Compose HandoffBehavior when applying a Storyboard, animation, or AnimationClock.

ティックとイベントの統合Ticks and Event Consolidation

出力値を計算するだけでなく、タイム マネージャーはティックのたびに他の処理を行います。つまり、クロックの状態を判断し、必要に応じてイベントを発生させます。In addition to calculating output values, the time manager does other work every time it ticks: it determines the state of each clock and raises events as appropriate.

ティックは頻繁に発生しますが、各ティックの間には多くのことが起こる可能性があります。While ticks occur frequently, it's possible for a lot of things to happen between ticks. たとえば、Clock が停止し、開始し、再び停止することがあります。このような場合、CurrentState の値は 3 回変化します。For example, a Clock might be stopped, started, and stopped again, in which case its CurrentState value will have changed three times. 理論的には、1 回のティックで CurrentStateInvalidated イベントを複数回発生させることができます。ただし、タイミング エンジンは、CurrentStateInvalidated イベントがティックごとに多くても 1 回だけ発生するように、イベントを統合します。In theory, the CurrentStateInvalidated event could be raised multiple times in a single tick; however, the timing engine consolidates events, so that the CurrentStateInvalidated event can be raised at most once per tick. これは、すべてのタイミング イベントにあてはまります。特定の Clock オブジェクトに対して生成される各種類のイベントは、多くても 1 回です。This is true for all timing events: at most one event of each type is raised for a given Clock object.

ティックの間に Clock が状態を切り替えて元の状態に戻る場合でも (Active から Stopped になり、Active に戻る場合など)、関連するイベントが発生します。When a Clock switches states and returns back to its original state between ticks (such as changing from Active to Stopped and back to Active), the associated event still occurs.

タイミング イベントについて詳しくは、「タイミング イベントの概要」をご覧ください。For more information about timing events, see the Timing Events Overview.

プロパティの現在値と基本値Current Values and Base Values of Properties

アニメーション化可能なプロパティは、基本値と現在値の 2 つの値を持つことができます。An animatable property can have two values: a base value and a current value. CLR アクセサーまたは SetValue メソッドを使用してプロパティを設定すると、基本値が設定されます。When you set property using its CLR accessor or the SetValue method, you set its base value. プロパティがアニメーション化されない場合は、基本値と現在値は同じです。When a property is not animated, its base and current values are the same.

プロパティをアニメーション化すると、AnimationClock はプロパティの "現在" の値を設定します。When you animate a property, the AnimationClock sets the property's current value. CLR アクセサーまたは GetValue メソッドを使用してプロパティの値を取得すると、AnimationClockActive または Filling であるときの AnimationClock の出力が返されます。Retrieving the property's value through its CLR accessor or the GetValue method returns the output of the AnimationClock when the AnimationClock is Active or Filling. プロパティの基本値は、GetAnimationBaseValue メソッドを使用して取得できます。You can retrieve the property's base value by using the GetAnimationBaseValue method.

関連項目See also