文章出處
文章列表
使用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曲線變化圖：
文章列表
全站熱搜
留言列表
