动画缓冲或叫缓动函数（Animation Easing）

之前的博客我介绍过如何做一个动画，以及渐变风格动画，关键帧动画。我们如果仅仅使用这些知识做一个模拟现实的动画，仍然是比较复杂的，比如：我们要实现一个篮球掉下再弹起，再掉下，再弹起的动画。或者我们要实现一个类似钟摆的动画效果，它需要我们去研究物理学，数学的知识，Silverlight 3 内置了11中Animation Easing，它可以让我们更容易的实现一些常见的动画效果。

这内置的11种Animation Easing 动画效果是：

• 倒退缓冲（BackEase）：让动画在继续之前往后退一点。这有点象在斜坡上启动汽车，会往后倒退一点然后才前进。
• 弹跳缓冲（BounceEase）：有弹回效果的动画，类似我们前面提到的篮球落下，弹起，再落下，即弹跳反冲。
• 圆缓冲（CircleEase）：创建使用循环函数加速和/或减速的动画。 基于三角函数（圆函数）来加速动画，一开始的加速度比较慢，越往后加速度越快。
• 立方体缓冲（CubicEase）：创建使用公式  加速和/或减速的动画。 与圆缓冲类似，但是是基于立方体函数的时间来产生一个一开始加速度较慢然后越来越快的动画。
• 伸缩缓冲（ElasticEase）：创建表示弹簧在停止前来回振荡的动画。类似于弹跳缓冲（BounceEase），它会让一个值摆动直到停下为止。
• 指数缓冲（ExponentialEase）：创建使用指数公式加速和/或减速的动画。类似于圆缓冲和立方体缓冲，只是加速度的值是按照指数来变化的。
• 乘方缓冲（PowerEase）：创建使用公式 （其中，p 等于 PowerEase.Power  属性）加速和/或减速的动画。这是一种指数缓冲，缓冲的值与时间的乘方成比例。
• 平方缓冲（QuadraticEase）：创建使用公式 加速和/或减速的动画。非常类似于CubicEase，除了在这个缓冲中，值是基于时间的平方。
• 四次方缓冲（QuarticEase）：创建使用公式 加速和/或减速的动画。类似于Cubic和Quadratic，只是值是基于时间的立方。
• 五次方缓冲（QuinticEase）：创建使用公式 加速和/或减速的动画。类似于Cubic、Quadratic和Quartic，值基于时间的五次方。
• 正弦缓冲（SineEase）：创建使用正弦公式加速和/或减速的动画。沿着正弦波来对值进行加速。

另外 Animation Easing 还有一个缓动模式，它是下面三个枚举之一，用于决定Animation Easing 的行为方式，参看：
http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.easingmode(VS.95).aspx：

• EasingMode.EaseIn：内插遵循与缓动函数相关联的算术公式。
• EasingMode.EaseOut（默认值）：内插遵循 100% 内插减去与缓动函数相关联的公式输出。
• EasingMode.EaseInOut：内插将 EaseIn 用于动画的前半部分，将 EaseOut 用于动画的后半部分。

 

下面是一个经典的演示这11中动画效果的例子，例子来自： http://www.shinedraw.com/animation-effect/11-storyboard-animation-easing-demonstration/ 那里也有这个例子的源码下载：

在下面，点击每种动画对应的图标，根据选择的动画类型，持续时间就会演示这个动画。

 

参考资料：

译文：Silverlight 3.0 新功能之二 : 动画缓冲（Animation Easing）
http://www.cnblogs.com/arthur008/archive/2009/05/21/1466417.html

稳扎稳打Silverlight(37) - 3.0动画之Easing（缓动效果）
http://www.cnblogs.com/webabcd/archive/2009/08/20/1550334.html

Silverlight动画概述
http://msdn.microsoft.com/zh-cn/library/cc189019(VS.95).aspx

微软官方网站Animation Easing的例子
http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html

Silverlight 3's New Animation Easing
http://www.wintellect.com/CS/blogs/jprosise/archive/2009/03/26/silverlight-3-s-new-animation-easing.aspx

Easing in Silverlight and WPF
http://www.kirupa.com/blend_silverlight/easing_sl_wpf_pg1.htm

Silverlight 3.0: Easing Functions
http://www.silverlightplayground.org/post/2009/03/18/Silverlight3-Easing-Functions.aspx

Silverlight 3 Quick Tip #3: Creating custom easing for Silverlight animations
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/03/19/silverlight-3-quick-tip-3-creating-custom-easing-for-silverlight-animations.aspx

Easing animations in Expression Blend
http://simplesilverlight.wordpress.com/2008/03/18/easing-animations-in-blend/

11 Storyboard Animation Easing Demonstration
http://www.shinedraw.com/animation-effect/11-storyboard-animation-easing-demonstration/

Easing Function In Blend 3 In Silverlight 3
http://www.c-sharpcorner.com/UploadFile/dpatra/EasingFunctionInBlend307102009134910PM/EasingFunctionInBlend3.aspx