方法: キー フレームを使用してサイズの変更をアニメーション化する

  • [アーティクル]

この例では、キー フレームを使用してサイズの変更をアニメーション化する方法を示します。

例

次の例では、SizeAnimationUsingKeyFrames クラスを使用して、ArcSegment の Size プロパティをアニメーション化します。 このアニメーションは、次の方法で 3 つのキー フレームを使用します。

  1. アニメーションの最初の 0.5 秒間は、LinearSizeKeyFrame クラスのインスタンスを使用して、円弧のサイズを徐々に大きくします。LinearSizeKeyFrame のような線形キー フレームは、ある値から次の値への滑らかで直線的な遷移を作成します。

  2. 次の 0.5 秒間の終わりに、DiscreteSizeKeyFrame クラスのインスタンスを使用して、円弧のサイズを突然大きくします。DiscreteSizeKeyFrame のような不連続キー フレームは、ある値から次の値への突然の変化を作成します。つまり、サイズが滑らかに変化するのではなく、急に変化します。

  3. 最後の 2 秒間は、SplineSizeKeyFrame クラスのインスタンスを使用して、円弧のサイズを大きくします。SplineSizeKeyFrame のようなスプライン キー フレームは、KeySpline プロパティの値に従って、ある値から次の値への可変遷移を作成します。 この例では、円弧のサイズは最初はゆっくり大きくなりますが、時間セグメントの終点に向かって急激に大きくなります。

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

サンプル全体については、「キーフレーム アニメーションのサンプル」を参照してください。

関連項目