方法: キー フレームを使用してサイズの変更をアニメーション化するHow to: Animate Size Changes by Using Key Frames

この例では、キー フレームを使用してサイズの変更をアニメーション化する方法を示します。This example shows how to animate size changes by using key frames.

Example

次の例では、SizeAnimationUsingKeyFrames クラスを使用して、ArcSegmentSize プロパティをアニメーション化します。The following example uses the SizeAnimationUsingKeyFrames class to animate the Size property of an ArcSegment. このアニメーションは、次の方法で 3 つのキー フレームを使用します。This animation uses three key frames in the following manner:

  1. アニメーションの最初の 0.5 秒間は、LinearSizeKeyFrame クラスのインスタンスを使用して、円弧のサイズを徐々に大きくします。LinearSizeKeyFrame のような線形キー フレームは、ある値から次の値への滑らかで直線的な遷移を作成します。During the first half second of the animation, uses an instance of the LinearSizeKeyFrame class to gradually increase the size of the arc. Linear key frames like LinearSizeKeyFrame create a smooth linear transition between values.

  2. 次の 0.5 秒間の終わりに、DiscreteSizeKeyFrame クラスのインスタンスを使用して、円弧のサイズを突然大きくします。DiscreteSizeKeyFrame のような不連続キー フレームは、ある値から次の値への突然の変化を作成します。つまり、サイズが滑らかに変化するのではなく、急に変化します。At the end of the next half second, uses an instance of the DiscreteSizeKeyFrame class to suddenly increase the size of the arc. Discrete key frames like DiscreteSizeKeyFrame create sudden jumps between values, that is, the size changes occur suddenly and are not subtle.

  3. 最後の 2 秒間は、SplineSizeKeyFrame クラスのインスタンスを使用して、円弧のサイズを大きくします。SplineSizeKeyFrame のようなスプライン キー フレームは、KeySpline プロパティの値に従って、ある値から次の値への可変遷移を作成します。Over the final two seconds, uses an instance of the SplineSizeKeyFrame class to increase the size of the arc. Spline key frames like SplineSizeKeyFrame create a variable transition between values according to the values of the KeySpline property. この例では、円弧のサイズは最初はゆっくり大きくなりますが、時間セグメントの終点に向かって急激に大きくなります。In this example, the size of the arc increases slowly at first and then increases exponentially toward the end of the time segment.

<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>
                
                <!-- Animating the Size property uses 3 KeyFrames. -->
                <SizeAnimationUsingKeyFrames
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size" >
                  <SizeAnimationUsingKeyFrames.KeyFrames>
                    <!-- Using a LinearSizeKeyFrame, the size of the arc increases
                         gradually over the first half second of the animation. -->
                    <LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />

                    <!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
                    after the first second of the animation. -->
                    <DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />

                    <!-- Using a SplineSizeKeyFrame, the Size increases slowly at first 
                         and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
                    <SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />

                  </SizeAnimationUsingKeyFrames.KeyFrames>
                </SizeAnimationUsingKeyFrames>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。For the complete sample, see KeyFrame Animation Sample.

関連項目See also