首页 > Web开发 > 详细

Silverlight动画之 Animation Easing

时间:2014-04-10 10:39:01      阅读:533      评论:0      收藏:0      [点我收藏+]

使用Animation Easing函数可以创造出更具有动感的动画。对比下面两个动画。

普通线性动画:

bubuko.com,布布扣
<Storyboard x:Name="growStoryboard">
<DoubleAnimation
Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
To="400" Duration="0:0:1.5"></DoubleAnimation>
</Storyboard>
bubuko.com,布布扣

使用Easing Function:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

通过VS写下这段代码并运行,你就知道加了Easing Function后与之前的显著差别。使用Easing Function,可以让我们很简单的创建效果复杂的动画。

每一个Easing Function都继承自EasingFunctionBase并实现EasingMode。EasingMode有三个值:EaseIn,EaseOut和EaseInOut。

EaseOut变化曲线图:

bubuko.com,布布扣

EaseIn变化曲线图:

bubuko.com,布布扣

Silverlight提供了11种easing functions

  • BackEase
  • ElasticEase
  • BounceEase
  • CircleEase
  • CubicEase
  • QuadraticEase
  • QuarticEase
  • QuinticEase
  • SineEase
  • PowerEase
  • ExponentialEase

 下图是六种比较常用的easing functions曲线变化图:

bubuko.com,布布扣

 

 

Silverlight动画之 Animation Easing,布布扣,bubuko.com

Silverlight动画之 Animation Easing

原文:http://www.cnblogs.com/Gyoung/p/3655464.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!