方法: キー フレームを使用してオブジェクトをアニメーション化するHow to: Animate an Object by Using Key Frames

この例では、キー フレームを使用して、オブジェクト (この例では、Page コントロールの Background プロパティ) をアニメーション化する方法を示します。This example shows how to animate an object, which in this example is the Background property of a Page control, by using key frames.

Example

次の例では、ObjectAnimationUsingKeyFrames クラスを使用して、Page コントロールの Background プロパティの色の変化をアニメーション化します。The following example uses the ObjectAnimationUsingKeyFrames class to animate color changes for the Background property of a Page control. このアニメーション例は、一定の間隔で別の背景ブラシに変わります。The example animation changes to a different background brush at regular intervals. このアニメーションでは、DiscreteObjectKeyFrame クラスを使用して、3 つの異なるキー フレームを作成します。This animation uses the DiscreteObjectKeyFrame class to create three different key frames. このアニメーションは、次の方法でキー フレームを使用します。The animation uses key frames in the following manner:

  1. 最初の 1 秒の終わりに、LinearGradientBrush クラスのインスタンスをアニメーション化します。At the end of the first second, animates an instance of the LinearGradientBrush class. この例のこの部分では、色が黄色からオレンジ色、そして赤に変化するように、背景色に線状グラデーションを適用します。This section of the example applies a linear gradient to the background color so that the color transitions from yellow to orange to red.

  2. 2 秒目の終わりに、RadialGradientBrush クラスのインスタンスをアニメーション化します。At the end of the next second, animates an instance of the RadialGradientBrush class. この例のこの部分では、色が白から青、そして黒に変化するように背景色に放射状グラデーションを適用します。This section of the example applies a radial gradient to the background color so that the color transitions from white to blue to black.

  3. 3 秒目の終わりに、DrawingBrush クラスのインスタンスをアニメーション化します。At the end of the third second, animates an instance of the DrawingBrush class. この例のこの部分では、背景にチェッカーボード パターンを適用します。This section of the example applies a checkerboard pattern to the background.

  4. アニメーションが再開され、無限に繰り返されます。The animation begins again and repeats indefinitely.

注意

DiscreteObjectKeyFrame は、ObjectAnimationUsingKeyFrames クラスで使用できる唯一の種類のキー フレームです。DiscreteObjectKeyFrame is the only type of key frame that you can use with the ObjectAnimationUsingKeyFrames class. DiscreteObjectKeyFrame のようなキー フレームを使用すると、値が突然変化します。つまり、この例では色の変化が突然発生します。Key frames like DiscreteObjectKeyFrame create sudden changes in values, that is, the color changes in this example occur suddenly.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Page.Triggers>
      <EventTrigger RoutedEvent="Page.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
                 an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
                 swap different brush objects at regular intervals, making the background of the Page
                 change. -->
            <ObjectAnimationUsingKeyFrames
              Storyboard.TargetProperty="Background"
              Duration="0:0:4" RepeatBehavior="Forever">
            <ObjectAnimationUsingKeyFrames.KeyFrames>

              <!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for 
              use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
              a specified timeline. Other types of interpolation are too problematic to apply
              to objects.  -->
              
              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a LinearGradientBrush after the first second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:1">
                <DiscreteObjectKeyFrame.Value>
                  <LinearGradientBrush>
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="Yellow" Offset="0.0" />
                      <GradientStop Color="Orange" Offset="0.5" />
                      <GradientStop Color="Red" Offset="1.0" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
                  
              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a RadialGradientBrush after the second second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                  <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <RadialGradientBrush.GradientStops>
                      <GradientStop Color="White" Offset="0.0" />
                      <GradientStop Color="MediumBlue" Offset="0.5" />
                      <GradientStop Color="Black" Offset="1.0" />
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>

              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly 
                   changes to a DrawingBrush (creates a checkerboard pattern) after the 
                   third second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                  <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
                    <DrawingBrush.Drawing>
                      <DrawingGroup>
                        <DrawingGroup.Children>
                          <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                              <RectangleGeometry Rect="0,0,1,1" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Black"
                           Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
                        </DrawingGroup.Children>
                      </DrawingGroup>
                    </DrawingBrush.Drawing>
                  </DrawingBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>          
            </ObjectAnimationUsingKeyFrames.KeyFrames>
          </ObjectAnimationUsingKeyFrames>        
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>
</Page>

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

関連項目See also