通过

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

  • 项目

在此示例中，通过使用关键帧为对象设置动画，这里的对象是 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>

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

另请参阅