タイミング イベントの概要Timing Events Overview

このトピックで使用可能な 5 つのタイミング イベントを使用する方法について説明TimelineClockオブジェクト。This topic describes how to use the five timing events available on Timeline and Clock objects.


このトピックを理解するには、アニメーションの作成方法と使用方法について理解している必要があります。To understand this topic, you should understand how to create and use animations. アニメーションを開始するを参照してください。、アニメーションの概要します。To get started with animation, see the Animation Overview.

いくつかの方法でプロパティをアニメーション化WPFWPF:There are multiple ways to animate properties in WPFWPF:

この概要の例を使用して、マークアップとコードで使用することができます、ためStoryboardオブジェクト。Because you can use them in markup and code, the examples in this overview use Storyboard objects. ただし、説明されている概念は、プロパティをアニメーション化するためのその他の方法にも適用できます。However, the concepts described can be applied to the other methods of animating properties.

クロックとはWhat is a clock?

タイムラインは、時間のセグメントについて説明する以外は、それ自身が実際に何かを行うものではありません。A timeline, by itself, doesn't actually do anything other than describe a segment of time. タイムラインのClock実際の処理を行うオブジェクト: タイムラインのタイミングに関連する実行時の状態を保持します。It's the timeline's Clock object that does the real work: it maintains timing-related run-time state for the timeline. 多くの場合(ストーリー ボードを使用する場合など)には、タイムラインに対してクロックが自動的に作成されます。In most cases, such as when using storyboards, a clock is created automatically for your timeline. 作成することも、Clockを使用して明示的に、CreateClockメソッド。You can also create a Clock explicitly by using the CreateClock method. 詳細についてはClock、オブジェクトを参照してください、アニメーションとタイミング システムの概要します。For more information about Clock objects, see the Animation and Timing System Overview.

イベントを使用する理由Why Use Events?

1 つの例外 (最後のティックに配置されたシーク) を除いて、すべての対話型タイミング操作は非同期です。With the exception of one (seek aligned to last tick), all interactive timing operations are asynchronous. これらがいつ実行されるかを正確に知る方法はありません。There is no way for you to know exactly when they will execute. これは、タイミング操作に依存する他のコードが存在する場合に、問題となることがあります。That can be a problem when you have other code that's dependent upon your timing operation. たとえば、四角形をアニメーション化するタイムラインを停止する必要があるとします。Suppose that you wanted to stop a timeline that animated a rectangle. そしてタイムラインを停止した後に、四角形の色を変更するとします。After the timeline stops, you change the color of the rectangle.


// This statement might execute
// before the storyboard has stopped.
myRectangle.Fill = Brushes.Blue;

' This statement might execute
' before the storyboard has stopped.
myRectangle.Fill = Brushes.Blue

上記の例では、ストーリー ボードが停止する前に、2 行目のコードが実行される可能性があります。In the previous example, the second line of code might execute before the storyboard stops. これは、停止が非同期の操作であるためです。That's because stopping is an asynchronous operation. タイムラインやクロックに停止を指示すると、タイミング エンジンの次のティックまで処理されない「停止要求」が作成されます。Telling a timeline or clock to stop creates a "stop request" of sorts that isn't processed until the timing engine's next tick.

タイムラインの完了後にコマンドを実行するには、タイミング イベントを使用します。To execute commands after a timeline completes, use timing events. 次の例では、ストーリー ボードが停止した後に四角形の色が変更されるよう、イベント ハンドラーが使用されています。In the following example, an event handler is used to change the color of a rectangle after the storyboard stops playing.

// Register for the CurrentStateInvalidated timing event.
myStoryboard.CurrentStateInvalidated += new EventHandler(myStoryboard_CurrentStateInvalidated);
' Register for the CurrentStateInvalidated timing event.
AddHandler myStoryboard.CurrentStateInvalidated, AddressOf myStoryboard_CurrentStateInvalidated
// Change the rectangle's color after the storyboard stops. 
void myStoryboard_CurrentStateInvalidated(object sender, EventArgs e)
    Clock myStoryboardClock = (Clock)sender;
    if (myStoryboardClock.CurrentState == ClockState.Stopped)
        myRectangle.Fill = Brushes.Blue;
' Change the rectangle's color after the storyboard stops. 
Private Sub myStoryboard_CurrentStateInvalidated(ByVal sender As Object, ByVal e As EventArgs)
    Dim myStoryboardClock As Clock = CType(sender, Clock)
    If myStoryboardClock.CurrentState = ClockState.Stopped Then
        myRectangle.Fill = Brushes.Blue
    End If
End Sub

詳細な例では、次を参照してください。受信通知時にクロックの状態の変化します。For a more complete example, see Receive Notification When a Clock's State Changes.

パブリック イベントPublic Events

TimelineClockクラスはどちらもが 5 つのタイミング イベントを提供します。The Timeline and Clock classes both provide five timing events. 次の表は、これらのイベントと、それらをトリガーする条件を示したものです。The following table lists these events and the conditions that trigger them.

eventEvent 対話型操作のトリガーTriggering interactive operation その他のトリガーOther triggers
CompletedCompleted 塗りつぶしまでスキップSkip to fill 時計が完了する。The clock completes.
CurrentGlobalSpeedInvalidatedCurrentGlobalSpeedInvalidated 一時停止、再開、シーク、速度比を設定、塗りつぶしまでスキップ、停止Pause, resume, seek, set speed ratio, skip to fill, stop クロックが反転、加速、開始、または停止する。The clock reverses, accelerates, starts, or stops.
CurrentStateInvalidatedCurrentStateInvalidated 開始、塗りつぶしまでスキップ、停止Begin, skip to fill, stop クロックが開始、停止、または塗りつぶされる。The clock starts, stops, or fills.
CurrentTimeInvalidatedCurrentTimeInvalidated 開始、シーク、塗りつぶしまでスキップ、停止Begin, seek, skip to fill, stop クロックが進行する。The clock progresses.
RemoveRequestedRemoveRequested 削除Remove

ティッキングとイベントの統合Ticking and Event Consolidation

内のオブジェクトをアニメーション化するときにWPFWPF、タイミング エンジン、アニメーションを管理です。When you animate objects in WPFWPF, it’s the timing engine that manages your animations. タイミング エンジンは、時間の進行状況を追跡し、それぞれのアニメーションの状態を計算します。The timing engine tracks the progression of time and computes the state of each animation. これにより、多数の評価パスが瞬時に作成されます。It makes many such evaluation passes in a second. これらの評価パスは「ティック」と呼ばれます。These evaluation passes are known as "ticks."

ティックは頻繁に発生しますが、各ティックの間には多くのことが起こる可能性があります。While ticks occur frequently, it's possible for a lot of things to happen between ticks. たとえば、タイムラインが停止され、開始され、再度停止された場合、その現行状態は 3 回変更されることになります。For example, a timeline might be stopped, started, and stopped again, in which case its current state will have changed three times. 理論上、イベントは 1 つのティックで複数回発生することができますが、タイミング エンジンではイベントが統合されるため、各イベントの発生回数はティックあたり最大で 1回となります。In theory, the event could be raised multiple times in a single tick; however, the timing engine consolidates events, so that each event can be raised at most once per tick.

イベントの登録Registering for Events

タイミング イベントを登録する方法は 2 つあります。 タイムラインに登録する方法と、タイムラインから作成されたクロックに登録する方法です。There are two ways to register for timing events: you can register with the timeline or with the clock created from the timeline. クロックに直接登録する方法は非常に分かりやすいですが、これはコードからのみ実行できます。Registering for an event directly with a clock is fairly straightforward, although it can only be done from code. タイムラインに登録する場合は、マークアップまたはコードからイベントを登録できます。You can register for events with a timeline from markup or code. 次のセクションでは、クロック イベントをタイムラインに登録する方法について説明します。The next section describes how to register for clock events with a timeline.

クロック イベントをタイムラインに登録するRegistering for Clock Events with a Timeline

タイムラインのCompletedCurrentGlobalSpeedInvalidatedCurrentStateInvalidatedCurrentTimeInvalidated、およびRemoveRequested、タイムラインは、これらのイベントが実際にイベント ハンドラーを関連付けますの登録に関連するイベントが表示されます、 Clockタイムラインに対して作成されます。Although a timeline's Completed, CurrentGlobalSpeedInvalidated, CurrentStateInvalidated, CurrentTimeInvalidated, and RemoveRequested events appear to be associated with the timeline, registering for these events actually associates an event handler with the Clock created for the timeline.

登録する場合、Completedタイムライン上のイベント、たとえば、実際には元のシステムに登録する、Completedタイムラインに対して作成される各クロック イベント。When you register for the Completed event on a timeline, for example, you're actually telling the system to register for the Completed event of each clock that is created for the timeline. コードの前にこのイベントに登録する必要があります、 Clock ; このタイムラインの作成は、それ以外の場合、通知を受信できません。In code, you must register for this event before the Clock is created for this timeline; otherwise, you won't receive notification. 自動的にこのようなXAMLXAML; パーサーが自動的に登録する前に、イベント、Clockが作成されます。This happens automatically in XAMLXAML; the parser automatically registers for the event before the Clock is created.

関連項目See also