使用Animation Easing函数可以创造出更具有动感的动画。对比下面两个动画。
普通线性动画:
<Storyboard x:Name="growStoryboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" To="400" Duration="0:0:1.5"></DoubleAnimation> </Storyboard>
使用Easing Function:
<Storyboard x:Name="growStoryboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" To="400" Duration="0:0:1.5"> <DoubleAnimation.EasingFunction> <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard>
通过VS写下这段代码并运行,你就知道加了Easing Function后与之前的显著差别。使用Easing Function,可以让我们很简单的创建效果复杂的动画。
每一个Easing Function都继承自EasingFunctionBase并实现EasingMode。EasingMode有三个值:EaseIn,EaseOut和EaseInOut。
EaseOut变化曲线图:
EaseIn变化曲线图:
Silverlight提供了11种easing functions
- BackEase
- ElasticEase
- BounceEase
- CircleEase
- CubicEase
- QuadraticEase
- QuarticEase
- QuinticEase
- SineEase
- PowerEase
- ExponentialEase
下图是六种比较常用的easing functions曲线变化图: