Silverlight动画学习笔记(二)：关键帧动画

（一）关键帧动画:动画形式显示了目标属性的值,单个关键帧动画可以创建任意数量的目标值之间的过渡.
（二）关键帧动画的优点：
(1)使用关键帧对象描述关键帧动画的目标值
(2)单个关键帧动画可以创建任意数量的目标值之间的过渡
(3)某些关键帧方法除支持多个目标值外，还支持多个内插方法
（三）内插方法：定义了从某个值过渡到下一个值的方式
      （1）离散
      （2）线性
      （3）样条
（四）创建关键帧动画  
 (1)步骤：
    a、 按照对 From/To/By 动画使用的方法声明动画并指定其 Duration。

    b、  对于每一个目标值，创建相应类型的关键帧，设置其值和 KeyTime，并将其添加到动画的 KeyFrames 集合内。

    c、 按照对 From/To/By 动画使用的方法，将动画与属性相关联。

 （2）实例讲解：

<UserControl x:Class="AnimationStudy.AnimationUsingKeyFrames"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Canvas>
        <Canvas.Resources>
            <Storyboard x:Name="myStoryboard">
                <!--
                （一）目标值（关键帧）和关键时间
                       Value（目标值/关键帧）: 指定关键帧的目标值
                       KeyTime（关键时间）: 属性指定到达关键帧的 Value 的时间（在动画的 Duration 之内）
                （二）关键帧的类型
                       _interpolationMethod(内插方法)_type（处理得值类型） KeyFrame
                （三）内插方法：
                      （1）线性（Linear）内插：动画将以段持续期间内的固定速度来播放。
                      （2）离散（Discrete）内插：动画函数将从一个值跳到下一个没有内插的值
                      （3）样条（Spline）内插：样条内插可用于达到更现实的计时效果
                 （四）样条内插中的KeySpline
                       （1）KeySpline作用：获取或设置用于定义此关键帧的动画进度的两个控制点。
                        (2)应用：KeySpline 来模拟下落的水滴或跳动的球等物体的物理轨迹。
                           a)"渐入"和"渐出"效果应用于动画。
                           b) 对于用户交互效果，例如背景淡入/淡出或控制按钮弹跳等
                           c)以便按照特定的方式来提高或降低动画的更改速率
                        (3)在该列中SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00"，这里的两个控制点为
                              (0.6,0.0)和(0.9,0.00)两个控制点
                 (五）组合内插方法：可以在单个关键帧动画中使用具有不同内插类型的关键帧（将以几个内插方法【线性、离散、样条】组合起来）                  
                （六）缓动函数：以将自定义算术公式应用于动画。                
                -->                
                <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyAnimatedTranslateTransform"
                    Storyboard.TargetProperty="X"
                    Duration="0:0:10">
                    <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
                    <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />            
                    <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Canvas.Resources>
        <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="50" Height="50">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="0" Y="0" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</UserControl>