Silverlight动画之 Animation Easing

浏览数：33 / 时间：2015年06月09日

使用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曲线变化图：

 

 

Silverlight动画之 Animation Easing,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class java 代码 int src style id t os 使用 el class java 代码 int src style id t os 使用 el

相关文章

随机文章

您可能还喜欢

您可能还喜欢