方法: アニメーションの継続時間を設定する

Timelineは時間のセグメントを表し、そのセグメントの長さはタイムラインのDurationによって決定されます。 Timelineが継続時間の終了に達すると、再生が停止します。 Timelineに子タイムラインがある場合は、再生も停止します。 アニメーションの場合、 Duration はアニメーションの開始値から終了値への切り替えに要する時間を指定します。

特定の有限時間を持つ Duration 、または特別な値を Automatic または Forever指定できます。 アニメーションの期間は常に時間値である必要があります。アニメーションは常に定義された有限の長さを持つ必要があるためです。それ以外の場合、アニメーションはターゲット値の間を遷移する方法を認識しません。 TimelineGroupやStoryboardなどのコンテナー タイムライン (ParallelTimeline オブジェクト) には、既定のAutomatic期間があります。つまり、最後の子が再生を停止すると自動的に終了します。

次の例では、 Rectangle の幅、高さ、塗りつぶしの色がアニメーション化されています。 アニメーションとコンテナーのタイムラインに期間が設定され、アニメーションの認識速度を制御したり、子タイムラインの期間をコンテナー タイムラインの期間でオーバーライドしたりするなどのアニメーション効果が得られます。

例

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Margin="20">
  
    <Rectangle Width="100" Height="100" Name="myRectangle">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Black" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
      
        <!-- Animates the rectangle fill to yellow and width to 300. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>

            <!-- By default, TimelineGroup objects like Storyboard and ParallelTimeline have 
            a Duration of "Automatic". A TimelineGroup's automatic duration encompasses its 
            last-ending child. In this example, there is only one child of the Storyboard, the
            ParallelTimeline, so when the ParallelTimeline ends, the Storyboard duration will
            automatically end. -->
            <Storyboard>

              <!-- This ParallelTimeline has overriden its default duration of "Automatic" with
              a finite duration of half a second. This will force this Timeline to end after half a
              second even though its child Timelines have a longer duration (2 and 4 seconds respectively). 
              This cuts off the animation prematurely and the rectangle's fill will not go all the way to 
              yellow nor will the rectangle width get all the way to 300. Again, the default duration of a
              ParallelTimeline is "Automatic" so if you remove the finite duration, the ParallelTimeline
              will wait for its child timelines to end before it ends. -->

              <!-- Note: To specify a finite time in XAML, use the syntax of "days:hours:seconds". As mentioned,
              this ParallelTimeline has a duration of half a second. -->
              <ParallelTimeline Duration="0:0:0.5">

                <!-- For Animation Timelines like DoubleAnimation, the duration is one factor that
                determines the rate at which an animation appears to progress. For example, the DoubleAnimation
                below that animates the rectangle height will complete in only one second while the animation
                that animates the width willwill complete in 2 seconds which is relatively fast compared to the DoubleAnimation
                which animates the rectangle width over 4 seconds. -->
                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Height"
                  To="300" Duration="0:0:1" />

                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Width"
                  To="300" Duration="0:0:4" />

                <ColorAnimation
                  Storyboard.TargetName="MyAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  To="Yellow" Duration="0:0:2" />

              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

こちらも参照ください

• Duration
• アニメーションの概要