タイミング挙動の概要

このトピックでは、アニメーションやその他の Timeline オブジェクトのタイミング動作について説明します。

前提 条件

このトピックを理解するには、基本的なアニメーション機能について理解している必要があります。 詳細については、「アニメーションの概要」を参照してください。

タイムラインの種類

Timeline は時間のセグメントを表します。 このプロパティを使用すると、そのセグメントの長さ、開始するタイミング、繰り返す回数、そのセグメントでの時間の進行状況などを指定できます。

タイムライン クラスから継承するクラスは、アニメーションやメディア再生などの追加機能を提供します。 WPF には、次の Timeline 型が用意されています。

タイムラインの長さを制御するプロパティ

Timeline は時間のセグメントを表し、タイムラインの長さはさまざまな方法で記述できます。 次の表では、タイムラインの長さを説明するいくつかの用語を定義します。

持続時間プロパティ

前述のように、タイムラインは時間のセグメントを表します。 そのセグメントの長さは、タイムラインの Durationによって決まります。 タイムラインが継続時間の終了に達すると、再生が停止します。 タイムラインに子タイムラインがある場合は、再生も停止します。 アニメーションの場合、Duration はアニメーションの開始値から終了値への切り替えに要する時間を指定します。 タイムラインの期間は、1 回の反復の継続時間とアニメーションの再生時間の合計 (繰り返しを含む) を区別するために、単純な期間と呼ばれることもあります。 期間は、有限の時間値または特殊な値 Automatic または Foreverを使用して指定できます。 アニメーションの継続時間は TimeSpan 値として評価され、値間を遷移できるようにする必要があります。

次の例は、Duration が 5 秒である DoubleAnimation を例示しています。

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

Storyboard や ParallelTimelineなどのコンテナータイムラインには、既定の Automatic期間があります。つまり、最後の子が再生を停止すると自動的に終了します。 次の例は、Storyboard の Duration がその子 DoubleAnimation オブジェクトがすべて完了するのに要する時間である 5 秒に解決されることを示しています。

<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 オブジェクトが再生するよりも長くまたは短く再生するように強制できます。 Duration をコンテナー タイムラインの子 Timeline オブジェクトの長さよりも小さい値に設定すると、コンテナー タイムラインの実行時に子 Timeline オブジェクトの再生が停止します。 次の例では、前の例の Storyboard の Duration を 3 秒に設定します。 その結果、最初の DoubleAnimation は、ターゲットの四角形の幅を 60 にアニメーション化すると、3 秒後に進行を停止します。

<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 プロパティ

Timeline の RepeatBehavior プロパティは、単純な期間を繰り返す回数を制御します。 RepeatBehavior プロパティを使用すると、タイムラインの再生回数 (反復 Count) または再生する合計時間 (繰り返し Duration) を指定できます。 どちらの場合も、アニメーションは必要な数の開始から終了まで実行され、要求されたカウントまたは期間を満たします。 既定では、タイムラインには 1.0の反復回数があります。つまり、1 回再生され、まったく繰り返されません。

次の例では、RepeatBehavior プロパティを使用し、反復回数を指定することで、元の単純な期間の2倍の長さで DoubleAnimation を再生します。

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

次の例では、RepeatBehavior プロパティを使用して、DoubleAnimation をその単純な期間の半分の時間再生します。

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

Timeline の RepeatBehavior プロパティを Foreverに設定すると、Timeline は対話形式で、またはタイミング システムによって停止するまで繰り返されます。 次の例では、RepeatBehavior プロパティを使用して、DoubleAnimation を無期限に再生します。

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

その他の例については、「アニメーションの繰り返し 」を参照してください。

AutoReverse プロパティ

AutoReverse プロパティは、各前方ループの終了時に Timeline を逆再生するかどうかを指定します。 次の例では、DoubleAnimation の AutoReverse プロパティを trueに設定します。その結果、0 から 100、100 から 0 にアニメーション化されます。 合計 10 秒間再生されます。

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

Count 値を使用して Timeline の RepeatBehavior を指定し、その Timeline の AutoReverse プロパティを trueすると、1 回の繰り返しが 1 回の前方反復と 1 回の後方反復で構成されます。 次の例では、前の例の DoubleAnimation の RepeatBehavior を 2 の Count に設定します。 その結果、DoubleAnimation は 20 秒間再生され、5 秒間前方、5 秒間後方、再び5 秒間前方、そして5 秒間後方に再生されます。

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

コンテナータイムラインに子であるTimelineオブジェクトが含まれている場合、コンテナータイムラインが反転すると、これらのオブジェクトも反転します。 その他の例については、「タイムラインが自動的にを反転するかどうかを指定する」を参照してください。

BeginTime プロパティ

BeginTime プロパティを使用すると、タイムラインを開始するタイミングを指定できます。 タイムラインの開始時刻は、親タイムラインに対して相対的です。 開始時刻が 0 秒の場合、タイムラインは親が開始するとすぐに開始されます。その他の値を指定すると、親タイムラインの再生が開始されたときと子タイムラインが再生されたときの間のオフセットが作成されます。 たとえば、開始時刻が 2 秒の場合は、親が 2 秒の時間に達したときにタイムラインの再生が開始されます。 既定では、すべてのタイムラインの開始時刻は 0 秒です。 タイムラインの開始時刻を nullに設定することもできます。これにより、タイムラインが開始されなくなります。 WPF では、x:Null マークアップ拡張を使用して null を指定します。

RepeatBehavior 設定のため、タイムラインが繰り返されるたびに開始時刻は適用されないことに注意してください。 10 秒の BeginTime と Foreverの RepeatBehavior でアニメーションを作成する場合、アニメーションが初めて再生されるまでに 10 秒の遅延がありますが、連続する繰り返しごとには遅延しません。 ただし、アニメーションの親タイムラインを再起動または繰り返す場合は、10 秒の遅延が発生します。

BeginTime プロパティは、タイムラインをずらす場合に便利です。 次の例では、2 つの子 DoubleAnimation オブジェクトを持つ Storyboard を作成します。 最初のアニメーションの Duration は 5 秒で、2 番目のアニメーションの Duration は 3 秒です。 次の使用例は、2 番目の DoubleAnimation の BeginTime を 5 秒に設定し、最初の DoubleAnimation が終了した後に再生を開始します。

<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 プロパティ

Timeline がアクティブな期間の合計の終わりに達すると、FillBehavior プロパティは最後の値を停止するか保持するかを指定します。 FillBehaviorHoldEnd のアニメーションは出力値を "保持" します: アニメーション化されるプロパティは、アニメーションの最後の値を維持します。 Stop 値を指定すると、アニメーションが終了した後にターゲット プロパティへの影響が停止します。

次の例では、2 つの子 DoubleAnimation オブジェクトを持つ Storyboard を作成します。 どちらの DoubleAnimation オブジェクトも、Rectangle の Width を 0 から 100 までアニメーション化します。 Rectangle 要素には、アニメーション化されていない Width 値が 500 [デバイスに依存しないピクセル] があります。

• 最初の DoubleAnimation の FillBehavior プロパティは、既定値である HoldEndに設定されます。 その結果、四角形の幅は、DoubleAnimation が終了した後も 100 のままです。

• 2 番目の DoubleAnimation の FillBehavior プロパティは Stopに設定されます。 その結果、2 番目の Rectangle の Width は、DoubleAnimation が終了すると 500 に戻ります。

<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>

タイムラインの速度を制御するプロパティ

Timeline クラスには、速度を指定するための 3 つのプロパティが用意されています。

• SpeedRatio – 親を基準にして、Timelineの進行状況を示すレートを指定します。 1 より大きい値を指定すると、Timeline とその子 Timeline オブジェクトの速度が向上します。0 ~ 1 の値を指定すると、速度が低下します。 値 1 は、Timeline が親と同じ速度で進行することを示します。 コンテナー タイムラインの SpeedRatio 設定は、すべての子 Timeline オブジェクトにも影響します。

• AccelerationRatio – 加速に費やされたタイムラインの Duration の割合を指定します。 例については、「方法: アニメーションを加速または減速する」を参照してください。

• DecelerationRatio - 減速に費やされたタイムラインの Duration の割合を指定します。 例については、「方法: アニメーションを加速または減速する」を参照してください。

関連項目

• アニメーションの概要
• アニメーションとタイミング システムの概要
• タイミングイベントの概要
• の使い方に関するトピック
• アニメーションタイミング動作のサンプル