WPF学习 - 动画基础（1）

1. WPF中的动画（Animation），是一种属性动画。技术上来说，它是让属性从一个值，变化到另一个值的过程。因此，有两条重要的特性：

　　1.1 只能为依赖属性应用动画（因为第二条特性）。
　　1.2 动画只是临时更改属性的值，并不真正的改变属性值。这与依赖属性的工作方式有关。

2. WPF动画，分为三种：插值动画、关键帧动画、路径动画
　　2.1 插值动画：
　　　　1）定义：插值动画是指，属性值从某一个值，经过一段时间后，连续变化值另一个值的动画。
　　　　　　　　例如宽度属性，类型为double，可以设定动画为在1s的时间内，值从0变到10。此时WPF内部会采用插值算法，填充1与10之间的值。
　　　　2）命名规则：数据类型+Animation。例如double类型动画：DoubleAnimation

　　2.2 关键帧动画：
　　　　1）定义：对于属性类型为离散量类型的，因为无法进行插值运算。因此只能填充“帧”。
　　　　　　　　例如Name属性，类型是string。当属性值从“raymond” 变到 “jack”的时候，是无法进行插值运算的。此时就只能用关键帧来代替。在某一个时候，显示“raymond”，然后在下一个时候，显示“jack”。
　　　　2）命名规则：数据类型+AnimationUsingKeyFrames。例如double类型：DoubleAnimationUsingKeyFrames

　　2.3 路径动画：
　　　　1）路径动画，是指让某个元素用来沿着路径的方向进行变换的动画。
　　　　2）命名规则：数据类型+AnimationUsingPath。例如double类型DoubleAnimationUsingPath

3. 动画与数据类型有关。因为针对不同的数据类型，有不同的“填充”方式。例如数值类型，可以采用插值算法调整起始值与中止值之间的间隔，而对于离散量，就得用“帧”来填充。

从下面的Animation类型的继承关系来看，每一种插值动画，都会有一个对应的关键帧动画，少数的几个还具有路径动画。

4. FillBehavior属性：该属性用来指示，当动画结束时，属性的值该如何变化。HoldEnd表示保持最终值，Stop表示属性恢复到原始的值。

 

5.Animation的使用方法

　　以下代码创建一个简单的动画：鼠标点击的时候，btn(Button类型)的宽度由当前值变到到100。代码如下：

 

<!-- xaml代码 -->        
<Button Name="btn" Content="Click Me" HorizontalAlignment="Left" VerticalAlignment="Top" 
                Click="btn_Click"/>

// 后台代码
private void btn_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimation widthAnimation = new()
    {
        From = btn.ActualWidth,
        To = 100,
        Duration = new Duration(TimeSpan.FromMilliseconds(1000))       // 持续1s钟
    };

    // 开始动画：指定要应用动画的属性
    btn.BeginAnimation(Button.WidthProperty,widthAnimation);            
}

 

　　这里需要说明几点：

　　1）Animation不能直接在xaml中写。如果要在xaml中写Animation，则需要结合Storyboard。下一篇文章再介绍。

　　2）要应用动画，需要调用元素的BeginAnimation()方法。需要注意，BeginAnimation()方法由IAnimatable接口定义（只要实现了该接口，都会有这个方法），但只有元素调用这个方法才能应用动画。如果是Animation类的实例调用该方法，没有意义，因为没有指定动画应用于哪个对象。

 

 

Animation类的继承关系：

Object
    DispatcherObject
        DependencyObject
            Freezable
                Animatable
                    Timeline
                        AnimationTimeline
                            BooleanAnimationBase　　　　　　　　　　　　// bool类型的值的动画
                                BooleanAnimationUsingKeyFrames
                            ByteAnimationBase　　　　　　　　　　　　　　// byte类型的值的动画
                                ByteAnimation
                                ByteAnimationUsingKeyFrames
                            CharAnimationBase　　　　　　　　　　　　　　// char类型的值的动画
                                CharAnimationUsingKeyFrames
                            ColorAnimationBase　　　　　　　　　　　　　 // Color类型的值的动画
                                ColorAnimation
                                ColorAnimationUsingKeyFrames
                            DecimalAnimationBase　　　　　　　　　　　　// Decimal类型的值的动画
                                DecimalAnimation
                                DecimalAnimationUsingKeyFrames
                            DoubleAnimationBase　　　　　　　　　　　　　// double类型的值的动画
                                DoubleAnimation
                                DoubleAnimationUsingKeyFrames
                                DoubleAnimationUsingPath  
                            Int16AnimationBase　　　　　　　　　　　　　　// Int16类型的值的动画
                                Int16Animation
                                Int16AnimationUsingKeyFrames
                            Int32AnimationBase　　　　　　　　　　　　　　// Int32类型的值的动画
                                Int32Animation
                                Int32AnimationUsingKeyFrames
                            Int64AnimationBase　　　　　　　　　　　　　　// Int64类型的值的动画
                                Animation.Int64Animation
                                Int64AnimationUsingKeyFrames                        
                            MatrixAnimationBase　　　　　　　　　　　　　　// Matrix类型的值的动画
                                MatrixAnimationUsingKeyFrames
                                MatrixAnimationUsingPath
                            ObjectAnimationBase　　　　　　　　　　　　　　 // Object类型的值的动画
                                ObjectAnimationUsingKeyFrames
                            Point3DAnimationBase　　　　　　　　　　　　　　// Point3D类型的值的动画
                                Point3DAnimation
                                Point3DAnimationUsingKeyFrames
                            PointAnimationBase　　　　　　　　　　　　　　　// Point类型的值的动画
                                PointAnimation
                                PointAnimationUsingKeyFrames
                                PointAnimationUsingPath
                            QuaternionAnimationBase　　　　　　　　　　　　// Quaternion（四元组）类型的值的动画
                                QuaternionAnimation
                                QuaternionAnimationUsingKeyFrames
                            RectAnimationBase　　　　　　　　　　　　　　　　// Rect类型的值的动画
                                RectAnimation
                                RectAnimationUsingKeyFrames
                            Rotation3DAnimationBase　　　　　　　　　　　　// Rotation3D类型的值的动画
                                Rotation3DAnimation
                                Rotation3DAnimationUsingKeyFrames
                            SingleAnimationBase　　　　　　　　　　　　　　 // Single类型的值的动画
                                SingleAnimation
                                SingleAnimationUsingKeyFrames
                            SizeAnimationBase　　　　　　　　　　　　　　　　// Size类型的值的动画
                                SizeAnimation
                                SizeAnimationUsingKeyFrames
                            StringAnimationBase　　　　　　　　　　　　　　 // string类型的值的动画
                                StringAnimationUsingKeyFrames
                            ThicknessAnimationBase　　　　　　　　　　　　 // Thickness类型的值的动画
                                ThicknessAnimation
                                ThicknessAnimationUsingKeyFrames
                            Vector3DAnimationBase　　　　　　　　　　　　　// Vector3D类型的值的动画
                                Vector3DAnimation
                                Vector3DAnimationUsingKeyFrames
                            VectorAnimationBase　　　　　　　　　　　　　　// Vector类型的值的动画
                                VectorAnimation
                                VectorAnimationUsingKeyFrames