Silverlight之Easing

线性插值动画制作的动画看起来很机械，同时也不能进行模拟真实的动画效果，虽然可以使用键值动画，可是键值动画需要写大量的代码，总是不尽人意，还好在Silverlight中提供了Easing(缓动函数)这个功能，真的是做的少实现的多。

Easing的基类是EasingFunctionBase类:

以下为其实现类:

EasingFunctionBase基类有一个很重要的属性EasingMode，获取或设置用于指定动画内插方式的值，可选值有EaseOut,EaseIn,EaseInOut;

EaseOut,说明特效的弹跳在整个过程的后边;EaseIn,说明特效的弹跳在整个过程的前边；EaseInOut，说明前半部分是EaseIn，后半部分是EaseOut。

在这里有一点必须要注意，由于Easing

下图显示了 EasingMode 的不同值，其中 f(t) 表示动画进度，而 t 表示时间。

动画详解:

一、ElasticEase，创建一个类似于弹簧来回振动直到停止的动画

属性：

EasingMode获取或设置用于指定动画内插方式的值。（继承自 EasingFunctionBase。）公共属性受 Silverlight for Windows Phone 支持

Oscillations获取或设置目标在动画目标位置来回滑动的次数,必须大于等于0，默认值为3。公共属性受 Silverlight for Windows Phone 支持

Springiness获取或设置弹簧的刚度。弹性值越小，弹簧就越硬，且每次振动时弹力在强度方面会减小得越快，默认值为3。

例子:

指定EasingMode为EaseOut

<Storyboard x:Name="growStoryboard">
<DoubleAnimation
Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
To="400" Duration="0:0:1.5">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="10"></ElasticEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>

当EasingMode为EasingOut整个动画的图形示意图如上。

当EasingMode为EasingIn整个动画的图形示意图如上。

当EasingMode为EasingInOut整个动画的图形示意图如上.

二、BackEase,该函数在开始在指示的路径中进行动画处理之前略微收回动画的动作.当设置EasingMode为EasingIn时候，在动画开始之前收回；当设置为EasingOut时候，在动画之后收回

特有属性：

Amplitude，获取或设置与 BackEase 动画相关联的收回幅度,此值必须大于等于 0。默认值为 1。

依赖属性标识符字段： AmplitudeProperty

幅度越大，在动画之前和/或之后的收回幅度就越大。

演示不同的 aplitude 值。

三、BounceEase,表示用于创建动画弹跳效果.

四、CircleEase，该函数使用循环函数创建加速和/或减速的动画。通过指定 EasingMode，您可以控制是使动画加速(EaseIn)、减速(EaseOut)，还是既加速又减速(EaseInOut)。

CircleEase EasingMode 图表。

用于此函数的公式如下所示。

用于 CircleEase 的数学公式

五、CubicEase，表示缓动函数，使用公式 f(t) = t3(3次方) 创建加速和/或减速的动画。

通过指定 EasingMode，您可以控制是使动画加速(EaseIn)、减速(EaseOut)，还是既加速又减速(EaseInOut)。下图显示了 EasingMode 的各个值，其中 f(t) 表示动画进度，而 t 表示时间。

CubicEase EasingMode 图表。

用于此函数的公式如下所示。

f(t) = t3

六、QuadraticEase,表示缓动函数，使用公式 f(t) = t2(2次方) 创建加速和/或减速的动画。

通过指定 EasingMode，您可以控制是使动画加速(EaseIn)、减速(EaseOut)，还是既加速又减速(EaseInOut)。下图显示了 EasingMode 的不同值，其中 f(t) 表示动画进度，而 t 表示时间。

具有不同 easingmode 图表的 QuadraticEase。

用于此函数的公式如下所示。

f(t) = t2

七、QuarticEase,表示缓动函数，使用公式 f(t) = t4(4次方) 创建加速和/或减速的动画。

具有不同 easingmode 图表的 QuarticEase。

用于此函数的公式如下所示。

f(t) = t4

八、QuinticEase,表示缓动函数，使用公式 f(t) = t5(5次方) 创建加速和/或减速的动画。

具有不同 easingmode 图表的 QuinticEase。

用于此函数的公式如下所示。

f(t) = t5

九、SineEase，表示缓动函数，使用正弦公式创建加速和/或减速的动画。

通过指定 EasingMode，您可以控制动画何时加速、减速或实现这两种效果。下图显示了 EasingMode 的各个值，其中 f(t) 表示动画进度，而 t 表示时间。

SineEase 图形。

用于此函数的公式如下所示。

ƒ(t) = 1 - [sin(1 - t)* 2 ]

十、PowerEase,表示缓动函数，该函数使用公式 f(t) = tp(p次方) 创建加速和/或减速的动画，其中 p 等于 Power 属性。

通过指定 EasingMode，您可以控制是使动画加速、减速，还是既加速又减速。下图显示了 EasingMode 的各个值，其中 f(t) 表示动画进度，而 t 表示时间。

CubicEase EasingMode 图表。

通过使用 PowerEase 函数，可以通过指定 Power 属性来指定加速/减速的发生速度。

f(t) = tp，其中 p 等于 Power 属性。

因此，PowerEase 函数可由 QuadraticEase (f(t) = t2)、CubicEase (f(t) = t3)、QuarticEase (f(t) = t4) 和 QuinticEase (f(t) = t5) 替代。例如，如果希望使用 PowerEase 函数来创建与 QuadraticEase 函数 (f(t) = t2) 所创建的行为相同的行为，应将 Power 属性的值指定为 2。

十一、ExponentialEase，表示缓动函数，该函数使用指数公式创建加速和/或减速的动画。

属性：Exponent获取或设置用于确定动画的内插的指数。

具有不同 easingmode 图表的 ExponentialEase。

用于此函数的公式如下所示。

用于 ExponentialEase 的数学公式此处的e为Exponent属性的值.

下图使用上面的公式演示了 Exponent 属性的几个不同值的效果。

Exponent 属性的不同值。

好了，整个Easing就是这样的。