KeyFrameAnimation每帧动画效果

实现效果：

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

关注点：

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

2、转换为ImageSource类型的DrawingImage资源：

设置输出区域方框，使用上面的资源作为画刷填充

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

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

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

第二种调试为在xaml中设置Visual属性：在VisualBrush的属性直接绑定元素。

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

二、方框前景边框在方框静态背景内容的相对移动实现：

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

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