译文：Silverlight 3.0 新功能之二 : 动画缓冲（Animation Easing）

原文：First Look: Microsoft Silverlight 3

缓冲功能设计的目的是可以让你创建和使用多种特殊的动画效果，包括以下会介绍的反弹或叫做“跳跃”效果（bouncing or "spring" effects）。Silverlight 3.0在命名空间System.Windows.Media.Animation namespace下内置了许多缓冲功能。

使用动画缓冲功能可以让你很容易地让对象产生很真实的动画效果而不用你自己去研究物理学。

举个例子，如果你想让你的动画产生一个很真实的“弹跳”，你或者可以自己研究一下物理学然后为它写个程序，或者使用内置的弹跳缓冲（bounce easing）功能，你可以通过使用animation标签的的新的子标签EasingFunction来实现它。

考虑一下这么一个情况。在Silverlight中，如果你想让一个椭圆产生从屏幕顶部到底部的动画，你需要使用一个<Storyboard>对象，里面包含一个<DoubleAnimation>指向椭圆的"Top"属性。要是想给这个动画增加缓冲，你只需要简单地往里添加缓冲功能的定义，如下所示：

<Canvas x:Name="LayoutRoot" Background="White">
   <Canvas.Resources>
      <Storyboard x:Name="bounce">
         <DoubleAnimation From="0" To="300" Duration="0:0:10"
          Storyboard.TargetName="myCircle"
          Storyboard.TargetProperty="(Canvas.Top)">
            <DoubleAnimation.EasingFunction>
                  <BounceEase Bounces="10" EasingMode="EaseOut" Bounciness="2">          
                  </BounceEase>
               </DoubleAnimation.EasingFunction>
         </DoubleAnimation>
      </Storyboard>
   </Canvas.Resources>
   <Ellipse x:Name="myCircle" Width="40" Height="40" Fill="Red" Canvas.Top="0" Canvas.Left="50"></Ellipse>
</Canvas>

 

加粗的EasingFunction的定义包含了你想要使用的缓冲的类型，不同的类型有不同的参数来定义缓冲。举个例子，要模拟一个物体落下时的反弹，你只要指定开始和结束时的位置（Top从'From'0到'To'300），然后使用缓冲来定义弹跳的行为。在这个例子中是被设置成弹跳10次，而且是在动画结束的时候开始弹跳（缓冲模式'EasingMode'被设置成'EaseOut'）。

注意使用缓冲可以有3种方式：EaseIn，在这种模式下会在动画结束的时候开始缓冲；EaseOut，动画开始的时候开始缓冲；EaseInOut，两种情况下都会发生。

所以如果你想象一个弹跳效果就像我们之前看到的在一个值上使用动画让它从0变到100，并使用弹跳缓冲，会发生以下的情况：

• EaseIn：值从0开始向100移动，在到达100之前返回到0，再向100移动，再返回，每次都更接近100，直到到达100.
• EaseOut：值从0开始向100移动，到达100后往0的方向移动，到达0之前返回100，再反弹，每次都离0更远，直到停止在100上。
• EaseInOut：是前2个的奇怪组合，在值超过一半之前按EaseIn的方式弹跳，超过一半后按EaseOut的方式弹跳。

你可以看到在我们之前的例子里我们使用了EaseOut的模式，因为它模拟球落下时的弹跳有更自然地效果。

所有内置的缓冲功能都可以在System.Windows.Media.Animation命名空间下找到。以下的描述是基于EaseIn的模式。但是你可以从它推知EaseOut和EaseInOut中的效果。虽然下面有对这些功能的简单的介绍，但是每个缓冲模式之间的区别可能是非常细微的。最好能够试验一下来体会。

内置的缓冲功能：

• 倒退缓冲（BackEase）：让动画在继续之前往后退一点。这有点象在斜坡上启动汽车，会往后倒退一点然后才前进。
• 弹跳缓冲（BounceEase）：在我们前面的例子中，生成的就是个弹跳反冲。
• 圆缓冲（CircleEase）：基于三角函数（圆函数）来加速动画，一开始的加速度比较慢，越往后加速度越快。
• 立方体缓冲（CubicEase）：与圆缓冲类似，但是是基于立方体函数的时间来产生一个一开始加速度较慢然后越来越快的动画。
• 伸缩缓冲（ElasticEase）：类似于弹跳缓冲（BounceEase），它会让一个值摆动直到停下为止。
• 指数缓冲（ExponentialEase）：类似于圆缓冲和立方体缓冲，只是加速度的值是按照指数来变化的。
• 乘方缓冲（PowerEase）：这是一种指数缓冲，缓冲的值与时间的乘方成比例。
• 平方缓冲（QuadraticEase）：非常类似于CubicEase，除了在这个缓冲中，值是基于时间的平方。
• 四次方缓冲（QuarticEase）：类似于Cubic和Quadratic，只是值是基于时间的立方。
• 五次方缓冲（QuinticEase）：类似于Cubic、Quadratic和Quartic，值基于时间的五次方。
• 正弦缓冲（SineEase）：沿着正弦波来对值进行加速。

注意这些缓冲功能每个都有自己相关联的属性可以让你配置和调整。举例来说，如果你用的是弹跳缓冲（BounceEase），你会看到它的属性里包含弹跳的次数和动画的"bounciness"属性（每次改变方向值的变化）。所以，当你要使用缓冲的时候，请仔细地查阅API文档来正确地使用。