Share via

如何：使用关键帧针对对象进行动画处理

  • 项目

此示例演示如何使用关键帧对对象进行动画处理，在本示例中，该对象是 Page 控件的 Background 属性。

示例

下面的示例使用 ObjectAnimationUsingKeyFrames 类对 Page 控件的 Background 属性的颜色变化进行动画处理。 示例动画会定期更改为其他背景画笔。 此动画使用该 DiscreteObjectKeyFrame 类创建三个不同的关键帧。 动画使用关键帧的方式如下：

  1. 在第一秒结束时，对类的 LinearGradientBrush 实例进行动画处理。 该示例的这一部分对背景色应用了线性渐变，以便颜色从黄色过渡到橙色再到红色。

  2. 在下一秒结束时，对类的 RadialGradientBrush 实例进行动画处理。 该示例的这一部分对背景色应用径向渐变，使颜色从白色过渡到蓝色再到黑色。

  3. 在第三秒结束时，对类的 DrawingBrush 实例进行动画处理。 该示例的这一部分将棋盘图案应用于背景。

  4. 动画再次开始，并无限重复。

注意

DiscreteObjectKeyFrame 是唯一可以与 ObjectAnimationUsingKeyFrames 类一起使用的关键帧类型。 DiscreteObjectKeyFrame 等关键帧的值会突然更改，即此示例中的颜色更改会突然发生。

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

有关完整示例，请参阅关键帧动画示例。

另请参阅