Silverlight动画学习笔记(三):缓动函数

(一)定义:

      缓动函数:可以将自定义算术公式应用于动画

(二)为什么要用缓动函数:

       您可能希望某一对象逼真地弹回或其行为像弹簧一样。您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低。

(三)实例讲解:

 1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6     mc:Ignorable="d"
 7     d:DesignHeight="300" d:DesignWidth="400">
 8 
 9     <StackPanel x:Name="LayoutRoot" Background="White">
10         <StackPanel.Resources>
11             <!--
12             缓动函数:
13             (1)EasingFunction属性:指定要应用于该动画的缓动函数
14             (2)EasingMode属性:更改缓动函数的行为方式(更改动画的内插方式:EaseIn、EaseOut、EaseInOut )
15             (3) EasingMode的三种内插方式:
16                 EaseIn :内插遵循与缓动函数相关联的算术公式。
17                 EaseOut :内插遵循 100% 内插减去与缓动函数相关联的公式输出。
18                 EaseInOut :内插将 EaseIn 用于动画的前半部分,将 EaseOut 用于动画的后半部分。
19             (4)缓动函数应用范围:
20                 From/To/By 动画
21                 关键帧动画
225)常见的缓动函数:
23                 BackEase :在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
24                 BounceEase :创建弹回效果。
25                 CircleEase :创建使用循环函数加速和/或减速的动画。               
26                 ElasticEase :创建表示弹簧在停止前来回振荡的动画。                
27                 SineEase :创建使用正弦公式加速和/或减速的动画。
28                 ExponentialEase :创建使用指数公式加速和/或减速的动画。  
29                【 PowerEase类动画】创建与使用 Power 属性的 CubicEase、QuadraticEase、QuarticEase 和 QuinticEase 的相同的行为
30                                 PowerEase :创建使用公式 f(t) = tp(其中,p 等于 Power 属性)加速和/或减速的动画。
31                                 CubicEase :创建使用公式 f(t) = t3 加速和/或减速的动画。
32                                 QuadraticEase :创建使用公式 f(t) = t2 加速和/或减速的动画。
33                                 QuarticEase :创建使用公式 f(t) = t4 加速和/或减速的动画。
34                                 QuinticEase :创建使用公式 f(t) = t5 加速和/或减速的动画。
356)通过从 EasingFunctionBase 继承来创建自己的自定义缓动函数
36                  覆盖 EaseInCore 方法,针对缓动函数的行为方式添加您自己的数学逻辑,如下代码:
37                 namespace CustomEasingFunction
38                 {
39                     public class CustomSeventhPowerEasingFunction : EasingFunctionBase
40                     {
41                         public CustomSeventhPowerEasingFunction() : base() 
42                         { 
43                         }              
44                         protected override double EaseInCore(double normalizedTime) 
45                         {                            
46                             return Math.Pow(normalizedTime, 7);
47                         }
48                     }
49             }
50             -->
51             <Storyboard x:Name="myStoryboard">
52                 <DoubleAnimationUsingKeyFrames
53              Storyboard.TargetProperty="Height"
54              Storyboard.TargetName="myRectangle">                 
55                     <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
56                         <EasingDoubleKeyFrame.EasingFunction>
57                             <CubicEase EasingMode="EaseOut"/>
58                         </EasingDoubleKeyFrame.EasingFunction>
59                     </EasingDoubleKeyFrame>
60                     
61                     <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
62                         <EasingDoubleKeyFrame.EasingFunction>
63                             <BounceEase Bounces="5" EasingMode="EaseOut"/>
64                         </EasingDoubleKeyFrame.EasingFunction>
65                     </EasingDoubleKeyFrame>
66                 </DoubleAnimationUsingKeyFrames>
67             </Storyboard>
68         </StackPanel.Resources>
69         <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" 
70      Fill="Blue" Width="200" Height="200" />
71     </StackPanel>
72 </UserControl>

文章转自:http://www.cnblogs.com/Joetao/articles/2054250.html

posted @ 2014-06-30 10:58  银河系上的地球  阅读(287)  评论(0编辑  收藏  举报