タイミング動作の概要Timing Behaviors Overview

このトピックでは、アニメーション、およびその他のタイミング動作を説明します。Timelineオブジェクト。This topic describes the timing behaviors of animations and other Timeline objects.

必須コンポーネントPrerequisites

このトピックを理解するには、基本的なアニメーション機能に精通している必要があります。To understand this topic, you should be familiar with basic animation features. 詳細については、次を参照してください。、アニメーションの概要します。For more information, see the Animation Overview.

タイムラインの型Timeline Types

ATimeline時間のセグメントを表します。A Timeline represents a segment of time. 用意されているプロパティを使用して、そのセグメントの長さ、開始時間、繰り返し回数、時間の進行の速度などを指定できます。It provides properties that enable you to specify the length of that segment, when it should start, how many times it will repeat, how fast time progresses in that segment, and more.

Timeline クラスを継承するクラスには、アニメーションやメディアの再生などの追加機能が用意されています。Classes that inherit from the timeline class provide additional functionality, such as animation and media playback. WPFWPF 次は、Timeline型。provides the following Timeline types.

タイムラインの型Timeline type 説明Description
AnimationTimeline 抽象基本クラスTimelineプロパティをアニメーション化するための出力値を生成するオブジェクト。Abstract base class for Timeline objects that generate output values for animating properties.
MediaTimeline メディア ファイルから出力を生成します。Generates output from a media file.
ParallelTimeline TimelineGroupそのグループやコントロールの子Timelineオブジェクト。A type of TimelineGroup that groups and controls child Timeline objects.
Storyboard ParallelTimelineが含まれている Timeline オブジェクトの対象とする情報を提供します。A type of ParallelTimeline that provides targeting information for the Timeline objects it contains.
Timeline タイミング動作を定義する抽象基本クラス。Abstract base class that defines timing behaviors.
TimelineGroup 抽象クラスTimeline他を含めることができるオブジェクトTimelineオブジェクト。Abstract class for Timeline objects that can contain other Timeline objects.

タイムラインの長さを制御するプロパティProperties that Control the Length of a Timeline

ATimeline表しますが、時間のセグメントと、タイムラインの長さは、さまざまな方法で記述できます。A Timeline represents a segment of time, and the length of a timeline can be described in different ways. タイムラインの長さを示すいくつかの用語の定義を次の表に示します。The following table defines several terms for describing the length of a timeline.

用語Term 説明Description プロパティProperties
単純継続時間Simple duration タイムラインが順方向の反復を 1 回完了するのに要する時間の長さ。The length of time a timeline takes to make a single forward iteration. Duration
1 回の繰り返しOne repetition タイムラインにする場合とすると、再生にかかる時間の長さ、AutoReverseプロパティが true の場合、旧バージョンと 1 回再生します。The length of time it takes for a timeline to play forward once and, if the AutoReverse property is true, play backwards once. Duration, AutoReverseDuration, AutoReverse
アクティブ期間Active period タイムラインで指定されたすべての繰り返しを完了するにかかる時間の長さ、RepeatBehaviorプロパティ。The length of time it takes for a timeline to complete all the repetitions specified by its RepeatBehavior property. DurationAutoReverseRepeatBehaviorDuration, AutoReverse, RepeatBehavior

Duration プロパティThe Duration Property

既に述べたように、タイムラインは時間のセグメントを表します。As previously mentioned, a timeline represents a segment of time. そのセグメントの長さはタイムラインのによって決まりますDurationします。The length of that segment is determined by the timeline's Duration. タイムラインは、期間の最後に到達すると、再生を停止します。When a timeline reaches the end of its duration, it stops playing. タイムラインに子タイムラインがある場合は、子も再生を停止します。If the timeline has child timelines, they stop playing as well. アニメーションの場合は、Durationアニメーションにかかる時間の遷移の終了値をその開始値から指定します。In the case of an animation, the Duration specifies how long the animation takes to transition from its starting value to its ending value. タイムラインの継続時間とも呼ばれますその単純継続時間、1 つのイテレーションの期間と繰り返しを含む、アニメーションの再生に要する時間の長さの合計とを区別します。A timeline's duration is sometimes called its simple duration, to distinguish between the duration of a single iteration and the total length of time the animation plays including repetitions. 有限の時間値または特殊な値を使用して期間を指定することができますAutomaticまたはForeverします。You can specify a duration using a finite time value or the special values Automatic or Forever. アニメーションの継続時間に解決する必要があります、TimeSpan値、値の間を遷移できるようにします。An animation's duration should resolve to a TimeSpan value, so it can transition between values.

次の例は、DoubleAnimationで、 Duration 5 秒間です。The following example shows a DoubleAnimation with a Duration of five seconds.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

コンテナー タイムラインなどStoryboardParallelTimelineの既定の時間が指定されてAutomatic、つまり、これらは、最後の子が停止したときに自動的に終了します。Container timelines, such as Storyboard and ParallelTimeline, have a default duration of Automatic, which means they automatically end when their last child stops playing. 次の例は、StoryboardDuration5 秒間、すべての子にかかる時間の長さに解決されるDoubleAnimationオブジェクトが完了します。The following example shows a Storyboard whose Duration resolves to five seconds, the length of time it takes all its child DoubleAnimation objects to complete.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

設定して、Durationをコンテナー タイムラインのTimeSpan値、その子でなかったりの再生を強制できますTimelineオブジェクトで再生します。By setting the Duration of a container timeline to a TimeSpan value, you can force to play longer or shorter than its child Timeline objects would play. 設定した場合、Durationをコンテナー タイムラインの子の長さよりも小さい値にTimelineオブジェクト、子Timelineオブジェクトが場合は、コンテナー タイムラインの再生を停止します。If you set the Duration to a value that's smaller than the length of the container timeline's child Timeline objects, the child Timeline objects stop playing when the container timeline does. 次の例のセット、DurationStoryboardを 3 秒に前の例から。The following example sets the Duration of the Storyboard from the preceding examples to three seconds. その結果、最初のDoubleAnimationターゲットの四角形の幅を 60 にアニメーション化すると、3 秒後に処理を停止します。As a result, the first DoubleAnimation stops progressing after three seconds, when it has animated the target rectangle's width to 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

RepeatBehavior プロパティThe RepeatBehavior Property

RepeatBehaviorのプロパティをTimeline単純継続時間が繰り返される回数を制御します。The RepeatBehavior property of a Timeline controls how many times it repeats its simple duration. 使用して、RepeatBehaviorプロパティ、何回、タイムラインの再生を指定することができます (イテレーションCount) または再生時間の長さの合計 (繰り返しDuration)。Using the RepeatBehavior property, you can specify how many times the timeline plays (an iteration Count) or the total length of time it should play (a repeat Duration). いずれの場合も、アニメーションは、要求されたカウントまたは期間を満たすのに必要な回数だけ実行を繰り返します。In either case, the animation goes through as many beginning-to-end runs as necessary to fill the requested count or duration. 既定では、タイムラインがあるの反復カウント1.0つまり、1 回再生され、まったく、繰り返されない。By default, timelines have an iteration count of 1.0, which means they play once and do not repeat at all.

次の例では、RepeatBehaviorプロパティをDoubleAnimation反復カウントを指定することで、単純な期間 2 倍の再生します。The following example uses the RepeatBehavior property to make a DoubleAnimation play for twice its simple duration by specifying an iteration count.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

次の例では、RepeatBehaviorプロパティをDoubleAnimation単純継続時間を半分を再生します。The next example uses the RepeatBehavior property to make the DoubleAnimation play for half its simple duration.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

設定した場合、RepeatBehaviorのプロパティをTimelineForeverTimeline対話形式で、またはタイミング システムによって停止されるまで繰り返されます。If you set the RepeatBehavior property of a Timeline to Forever, the Timeline repeats until stopped interactively or by the timing system. 次の例では、RepeatBehaviorプロパティをDoubleAnimation無限に再生します。The following example uses the RepeatBehavior property to make the DoubleAnimation play indefinitely.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

たとえば、次を参照してください。アニメーションを反復するします。For an additional example, see Repeat an Animation.

AutoReverse プロパティThe AutoReverse Property

AutoReverseプロパティを指定するかどうかをTimeline各順方向の反復の最後に逆方向に再生されます。The AutoReverse property specifies whether a Timeline will play backwards at the end of each forward iteration. 次の例の設定AutoReverseのプロパティをDoubleAnimationtrue; その結果、0 から 100、し、100 0 からまでアニメーション化されます。The following example sets to the AutoReverse property of a DoubleAnimation to true; as a result, it animates from zero to 100, and then from 100 to zero. 合計 10 秒間再生されます。It plays for a total of 10 seconds.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

使用する場合、Countを指定する値、RepeatBehaviorTimelineAutoReverseプロパティをTimelinetrue、1 つの 1 つの繰り返しには内を後方に向かって反復処理のいずれかが、順方向の反復が続きます。When you use a Count value to specify the RepeatBehavior of a Timeline and the AutoReverse property of that Timeline is true, a single repetition consists of one forward iteration followed by one backwards iteration. 次の例のセット、RepeatBehaviorDoubleAnimationを前の例から、Countの 2 つです。The following example sets the RepeatBehavior of the DoubleAnimation from the preceding example to a Count of two. 結果として、 DoubleAnimation 20 秒間再生され: 順方向に再度、5 秒間に、5 秒の旧バージョンと、5 秒を転送し、5 秒の旧バージョンとします。As a result, the DoubleAnimation plays for 20 seconds: forward for five seconds, backwards for five seconds, forward for 5 seconds again, and then backwards for five seconds.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

コンテナー タイムラインに子Timelineオブジェクトの場合は、コンテナー タイムラインが反転します。If a container timeline has child Timeline objects, they reverse when the container timeline does. その他の例では、次を参照してください。を指定するかどうか、タイムラインを自動的に反転します。For additional examples, see Specify Whether a Timeline Automatically Reverses.

BeginTime プロパティThe BeginTime Property

BeginTimeプロパティでは、タイムラインの開始時に指定することができます。The BeginTime property enables you to specify when a timeline starts. タイムラインの開始時間は、親タイムラインを基準とした相対値になります。A timeline's begin time is relative to its parent timeline. 開始時間を 0 秒に設定すると、タイムラインはその親が開始されると直ちに開始されます。その他の値に設定すると、親タイムラインの再生開始時点と子タイムラインの再生時点の間のオフセットが作成されます。A begin time of zero seconds means the timeline starts as soon as it parent starts; any other value creates an offset between when the parent timeline starts playing and when the child timeline plays. たとえば、開始時間を 2 秒に設定すると、タイムラインは、その親が 2 秒の時点に到達すると再生を開始します。For example, a begin time of two seconds means the timeline starts playing when its parent has reached a time of two seconds. 既定では、すべてのタイムラインの開始時間は 0 秒です。By default, all timelines have a begin time of zero seconds. タイムラインを設定することもできます。 開始時刻にnull、タイムラインは開始されませんが。You may also set a timeline's begin time to null, which prevents the timeline from starting. WPFWPFを使用して null を指定する、 X:null マークアップ拡張機能します。In WPFWPF, you specify null using the x:Null Markup Extension.

開始時間がないので注意適用のため、タイムラインが繰り返されるたびにそのRepeatBehavior設定します。Note that the begin time is not applied each time a timeline repeats because of its RepeatBehavior setting. アニメーションを作成する場合、 BeginTime 10 秒間のRepeatBehaviorForever、後続の各繰り返しではなく、最初のアニメーションが再生される前に、10 秒の遅延にするとします。If you were to create an animation with a BeginTime of 10 seconds and a RepeatBehavior of Forever, there would be a 10-second delay before the animation played for the first time, but not for each successive repetition. ただし、アニメーションの親タイムラインの再開または繰り返しが行われた場合は、10 秒の遅延が発生します。However, if the animation's parent timeline were to restart or repeat, the 10-second delay would occur.

BeginTimeプロパティは、タイムラインをずらす際に役立ちます。The BeginTime property is useful for staggering timelines. 次の例では、作成、 Storyboard 2 つの子を持つDoubleAnimationオブジェクト。The following example creates a Storyboard that has two child DoubleAnimation objects. 最初のアニメーションが、 Duration 、5 秒の 2 番目であり、 Duration 3 秒。The first animation has a Duration of five seconds, and the second has a Duration of 3 seconds. 例のセット、 BeginTime 、2 つ目のDoubleAnimation、5 秒間にそのためその it の再生が開始、最初より後DoubleAnimationが終了します。The example sets the BeginTime of the second DoubleAnimation to 5 seconds, so that it begins playing after the first DoubleAnimation ends.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

FillBehavior プロパティThe FillBehavior Property

ときに、Timelineがその合計アクティブ期間の末尾に達すると、FillBehaviorプロパティは、停止するかその最終的な値を保持しているかどうかを指定します。When a Timeline reaches the end of its total active duration, the FillBehavior property specifies whether it stops or holds its last value. アニメーション、FillBehaviorHoldEnd出力値は「保持」: アニメーション化されているプロパティのアニメーションの最後の値を保持します。An animation with a FillBehavior of HoldEnd "holds" its output value: the property being animated retains the last value of the animation. Stop終了後、ターゲット プロパティに影響を与えるアニメーション stop に設定するとします。A value of Stop causes that the animation stop affecting its target property after it ends.

次の例では、作成、 Storyboard 2 つの子を持つDoubleAnimationオブジェクト。The following example creates a Storyboard that has two child DoubleAnimation objects. 両方DoubleAnimationオブジェクトをアニメーション化する、WidthRectangle0 ~ 100 です。Both DoubleAnimation objects animate the Width of a Rectangle from 0 to 100. Rectangle要素がアニメーション化されていないWidth500 [デバイス非依存ピクセル] の値。The Rectangle elements have non-animated Width values of 500 [device independent pixels].

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

タイムラインの速度を制御するプロパティProperties that Control the Speed of a Timeline

Timelineクラスの速度を指定するための 3 つのプロパティを提供します。The Timeline class provides three properties for specifying its speed:

関連項目See also