WPF：Animation动画--KeyFramesExample帧动画（2）

KeyFrameAnimation每帧动画效果

实现效果：

1. 方框滑块里内容与帧动画时滑块移动位置是相对的，即滑块前景边框在滑块静态背景内容中移动。。
2. 实现帧间动画。

关注点：
一、 滑块方框的背景画刷VisualBrush绑定到Image的几种方法实现？
1、源代码中作为背景方格DrawingBrush的资源实现：DrawingGroup（白底几何矩形（可选）+横竖蓝色边框划线）+图块Viewport贴图

<DrawingBrush x:Key="MyGridBrushResource" Opacity="0.25"
  Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <DrawingGroup.Children>
                <GeometryDrawing Geometry="M0,0 L1,0 1,1 0,1z" Brush="White" />
                <GeometryDrawing Brush="#9999FF">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <RectangleGeometry Rect="0,0,1,0.1" />
                            <RectangleGeometry Rect="0,0.1,0.1,0.9" />
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingGroup.Children>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

2、转换为ImageSource类型的DrawingImage资源：
设置输出区域方框，使用上面的资源作为画刷填充

<DrawingImage x:Key="MyDrawingImageResource">
    <DrawingImage.Drawing>
        <DrawingGroup>
            <DrawingGroup.Children>
                <GeometryDrawing Brush="{StaticResource MyGridBrushResource}">
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,600,300" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingGroup.Children>
        </DrawingGroup>
    </DrawingImage.Drawing>
</DrawingImage>

3、 显示区Border下的Canvas画布包含图像Image，其Source为上面的资源，同时在原后台代码作为滑块方框的Visual绑定源。

<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" Margin="20">
  <Canvas Width="600" Height="300" Background="White" LayoutUpdated="ExampleCanvasLayoutUpdated">

    <Image Width="600" Height="300" Name="myImage"
      Source="{StaticResource MyDrawingImageResource}" />

第一种设置属性方法：页面加载中设置画刷的Visual属性为Image实例元素

public void PageLoaded(object sender, RoutedEventArgs args)
{
    myVisualBrush.Visual = myImage;
}

第二种调试为在xaml中设置Visual属性：在VisualBrush的属性直接绑定元素。
第三种为在语法属性中设置Image，其源Source为目标元素的Source，此时需要设置Path，否则报错，与第二种有区别。
第三种在语法属性中Image的Sourc直接绑定到资源的DrawingImage。

 <!-- The position of this rectangle is animated using a key frame animation. -->
    <Rectangle Name="myRectangle"
      Canvas.Top="100"
      Canvas.Left="10"
      Height="100"
      Width="100"
      Stroke="Black"
      StrokeThickness="5">
      <Rectangle.Fill>
        <DrawingBrush>
          <DrawingBrush.Drawing>
            <DrawingGroup>
              <DrawingGroup.Children>
                <GeometryDrawing Brush="#3333FF">
                  <GeometryDrawing.Geometry>
                    <RectangleGeometry Rect="0,0,100,100" />
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
                <GeometryDrawing>
                  <GeometryDrawing.Geometry>
                    <RectangleGeometry Rect="0,0,100,100" />
                  </GeometryDrawing.Geometry>
                  <GeometryDrawing.Brush>
                    <VisualBrush x:Name="myVisualBrush" ViewboxUnits="Absolute"                                      
                                 Visual="{Binding ElementName=myImage}" >
                        <!--<VisualBrush.Visual>-->
                            <!--<Image Source="{Binding ElementName=myImage,Path=Source}" />-->
                            <!--<Image Source="{StaticResource MyDrawingImageResource}" />-->
                            <!--<Image Source="bg_photo.png"/>-->
                        <!--</VisualBrush.Visual>-->                            
                      <VisualBrush.Transform>
                        <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="0.5" CenterY="0.5" />
                      </VisualBrush.Transform>
                    </VisualBrush>
                  </GeometryDrawing.Brush>
                </GeometryDrawing>
              </DrawingGroup.Children>
            </DrawingGroup>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </Rectangle.Fill>

二、方框前景边框在方框静态背景内容的相对移动实现：
1、因ViewBox、ViewPort的属性Rect为结构，通过后台代码Canvas的LayoutUpdated来显示移动的新Rect值实现。

private void ExampleCanvasLayoutUpdated(object sender, EventArgs args)
{
    myVisualBrush.Viewbox =
        new Rect(
            Canvas.GetLeft(myRectangle),
            Canvas.GetTop(myRectangle),
            myRectangle.ActualWidth,
            myRectangle.ActualHeight
            );
}

三、帧间位置动画及对应同一时间的行字体大小动画
1、对滑块的位置Canvas.Lef设置DoubleAnimationUsingKeyFrames值，类介绍见（1）章
2、针对帧间动画，同时实现TextBolock的行的字体大小普通DoubleAnimation，对应好BeginTime、Duration时间

<Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever">
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="myRectangle"
            Storyboard.TargetProperty="(Canvas.Left)"
            >
            <DoubleAnimationUsingKeyFrames.KeyFrames>
              <LinearDoubleKeyFrame Value="500" KeyTime="0:0:5" />
              <SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="200" KeyTime="0:0:10" />
              <LinearDoubleKeyFrame Value="290" KeyTime="0:0:12" />
              <LinearDoubleKeyFrame Value="300" KeyTime="0:0:13.5" />
              <SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="0" KeyTime="0:0:15" />
            </DoubleAnimationUsingKeyFrames.KeyFrames>
          </DoubleAnimationUsingKeyFrames>

          <!-- Animate the first TextBlock -->
          <DoubleAnimation Storyboard.TargetName="FirstLinearTextBlock" Storyboard.TargetProperty="FontSize"
          From="12" To="16" Duration="0:0:0.2" />
          <DoubleAnimation Storyboard.TargetName="FirstLinearTextBlock" Storyboard.TargetProperty="FontSize"
          From="16" To="12" BeginTime="0:0:5" Duration="0:0:0.2" />

          <!-- Animate the second TextBlock -->
          <DoubleAnimation Storyboard.TargetName="FirstSplineTextBlock" Storyboard.TargetProperty="FontSize"
          From="12" To="16" BeginTime="0:0:5" Duration="0:0:0.2" />
          <DoubleAnimation Storyboard.TargetName="FirstSplineTextBlock" Storyboard.TargetProperty="FontSize"
          From="16" To="12" BeginTime="0:0:10" Duration="0:0:0.2" />

          <!-- Animate the third TextBlock -->
          <DoubleAnimation Storyboard.TargetName="SecondLinearTextBlock" Storyboard.TargetProperty="FontSize"
          From="12" To="16" BeginTime="0:0:10" Duration="0:0:0.2" />
          <DoubleAnimation Storyboard.TargetName="SecondLinearTextBlock" Storyboard.TargetProperty="FontSize"
          From="16" To="12" BeginTime="0:0:12" Duration="0:0:0.2" />

          <!-- Animate the fourth TextBlock -->
          <DoubleAnimation Storyboard.TargetName="ThirdLinearTextBlock" Storyboard.TargetProperty="FontSize"
          From="12" To="16" BeginTime="0:0:12" Duration="0:0:0.2" />
          <DoubleAnimation Storyboard.TargetName="ThirdLinearTextBlock" Storyboard.TargetProperty="FontSize"
          From="16" To="12" BeginTime="0:0:13.5" Duration="0:0:0.2" />

          <!-- Animate the fifth TextBlock -->
          <DoubleAnimation Storyboard.TargetName="SecondSplineTextBlock" Storyboard.TargetProperty="FontSize"
          From="12" To="16" BeginTime="0:0:13.5" Duration="0:0:0.2" />
          <DoubleAnimation Storyboard.TargetName="SecondSplineTextBlock" Storyboard.TargetProperty="FontSize"
          From="16" To="12" BeginTime="0:0:15" Duration="0:0:0.2" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>

  <Rectangle.BitmapEffect>
    <DropShadowBitmapEffect ShadowDepth="5" />
  </Rectangle.BitmapEffect>
</Rectangle>
  </Canvas>
</Border>

<TextBlock xml:space="preserve">
            &lt;DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="myRectangle"
            Storyboard.TargetProperty="(Canvas.Left)"&gt;
              &lt;DoubleAnimationUsingKeyFrames.KeyFrames&gt;
                <TextBlock Name="FirstLinearTextBlock">&lt;LinearDoubleKeyFrame Value="500" KeyTime="0:0:5" /&gt;</TextBlock>
                <TextBlock Name="FirstSplineTextBlock">&lt;SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="200" KeyTime="0:0:10" /&gt;</TextBlock>
                <TextBlock Name="SecondLinearTextBlock">&lt;LinearDoubleKeyFrame Value="290" KeyTime="0:0:12" /&gt;</TextBlock>
                <TextBlock Name="ThirdLinearTextBlock">&lt;LinearDoubleKeyFrame Value="300" KeyTime="0:0:13.5" /&gt;</TextBlock>
                <TextBlock Name="SecondSplineTextBlock">&lt;SplineDoubleKeyFrame KeySpline="0.25,0.5 0.75,1" Value="0" KeyTime="0:0:15" /&gt;</TextBlock>
              &lt;/DoubleAnimationUsingKeyFrames.KeyFrames&gt;
            &lt;/DoubleAnimationUsingKeyFrames&gt;
  </TextBlock>