タイミング動作の概要

  • [アーティクル]

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

必須コンポーネント

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

タイムラインの型

Timeline は時間のセグメントを表します。 用意されているプロパティを使用して、そのセグメントの長さ、開始時間、繰り返し回数、時間の進行の速度などを指定できます。

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

タイムラインの型 説明
AnimationTimeline プロパティのアニメーション化のための出力値を生成する Timeline オブジェクトの抽象基底クラス。
MediaTimeline メディア ファイルから出力を生成します。
ParallelTimeline 子 Timeline オブジェクトをグループ化し、制御する TimelineGroup の型。
Storyboard 格納している Timeline オブジェクトの対象情報を提供する ParallelTimeline の型。
Timeline タイミング動作を定義する抽象基本クラス。
TimelineGroup 他の Timeline オブジェクトを格納できる Timeline オブジェクトの抽象クラス。

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

Timeline は時間のセグメントを表します。タイムラインの長さはさまざまな方法で示すことができます。 タイムラインの長さを示すいくつかの用語の定義を次の表に示します。

用語 説明 プロパティ
単純継続時間 タイムラインが順方向の反復を 1 回完了するのに要する時間の長さ。 Duration
1 回の繰り返し タイムラインが順方向で 1 回再生され、AutoReverse プロパティが true の場合に逆方向で 1 回再生されるのに要する時間の長さ。 Duration、AutoReverse
アクティブ期間 RepeatBehavior プロパティで指定したすべての繰り返しをタイムラインが完了するのに要する時間の長さ。 Duration、AutoReverse、RepeatBehavior

Duration プロパティ

既に述べたように、タイムラインは時間のセグメントを表します。 そのセグメントの長さはタイムラインの 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 です。これは、最後の子が再生を停止した時点で自動的に終了することを意味します。 Duration が 5 秒 (すべての子 DoubleAnimation オブジェクトの完了に要する時間の長さ) に解決される Storyboard の例を次に示します。

<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 が 3 秒後 (ターゲットの四角形の幅を 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 プロパティ

Timeline コントロールの RepeatBehavior プロパティは、単純継続時間を繰り返す回数を制御します。 RepeatBehavior プロパティを使用して、タイムラインの再生回数 (反復 Count) またはタイムラインの再生時間の合計 (繰り返し Duration) を指定できます。 いずれの場合も、アニメーションは、要求されたカウントまたは期間を満たすのに必要な回数だけ実行を繰り返します。 既定では、タイムラインの反復回数は 1.0 です。です。これは、再生回数が 1 回で、繰り返されないことを意味します。

RepeatBehavior プロパティを使用し、反復カウントを指定して DoubleAnimation の再生時間を単純継続時間の 2 倍にする例を次に示します。

<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 回ずつ含まれます。 次の例では、前の例の DoubleAnimation の RepeatBehavior で Count を 2 に設定します。 その結果、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 の設定によってタイムラインが繰り返されるたびに適用されるわけではないことに注意してください。 BeginTime が 10 秒、RepeatBehavior が Forever に設定されたアニメーションを作成した場合、アニメーションを最初に再生する前に 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 プロパティ

FillBehavior プロパティは、Timeline がアクティブな継続時間全体の末尾に到達したときに、タイムラインを停止するかその最終的な値を保持するかを指定します。 FillBehavior が HoldEnd に設定されたアニメーションは、その出力値を "保持" します。つまり、アニメーション化されているプロパティは、アニメーションの最終的な値を保持します。 値を Stop に設定すると、アニメーションは、終了後にターゲット プロパティへの作用を停止します。

2 つの子 DoubleAnimation オブジェクトを含む Storyboard を作成する例を次に示します。 両方の DoubleAnimation オブジェクトで、Rectangle の Width が 0 から 100 までアニメーション化されます。 アニメーション化されていないときの Rectangle 要素の Width 値は 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 つのプロパティが提供されます。

関連項目