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

 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                 关键帧动画
22             （5）常见的缓动函数：
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 加速和/或减速的动画。
35             （6）通过从 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>