稳扎稳打Silverlight(37) - 3.0动画之Easing（缓动效果）

[索引页]

[源码下载]

稳扎稳打Silverlight(37) - 3.0动画之Easing（缓动效果）

作者： webabcd


介绍
Silverlight 3.0 动画的缓动效果：

• Easing 可以与 Storyboard 结合实现动画的缓动效果
• Silverlight 3 内置 11 种缓动效果：分别为BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase
• 各个缓动类都继承自 EasingFunctionBase，除了 EasingFunctionBase 提供的功能外，各个缓动类可能还会有各自的属性（懒的写了，查文档吧） 
• EasingFunctionBase 有一个用于设置缓动模式的枚举类型属性 EasingMode （EasingMode.EaseOut(默认值), EasingMode.EaseIn, EasingMode.EaseInOut）

在线DEMO
http://webabcd.blog.51cto.com/1787395/342289


示例
1、Silverlight 3.0 内置的 11 种缓动效果的 Demo
Easing.xaml

<navigation:Page x:Class="Silverlight30.Animation.Easing"    
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                     mc:Ignorable="d" 
                     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
                     d:DesignWidth="640" d:DesignHeight="480" 
                     Title="Easing Page"> 
        <Grid x:Name="LayoutRoot"> 
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> 

                        <!--用于显示各种 Easing 的图例列表--> 
                        <StackPanel Margin="10"> 
                                <ListBox x:Name="lstEasing"> 
                                        <ListBox.ItemTemplate> 
                                                <DataTemplate> 
                                                        <StackPanel Margin="1"> 
                                                                <TextBlock Text="{Binding EasingName}" /> 
                                                                <Image Source="{Binding PicAddress}" Width="300" Height="50" /> 
                                                        </StackPanel> 
                                                </DataTemplate> 
                                        </ListBox.ItemTemplate> 
                                </ListBox> 
                        </StackPanel> 

                        <StackPanel Margin="10, 200"> 
                        
                                <!--分别用 3 种动画来演示各类 Easing--> 
                                <ComboBox x:Name="cboTransform" Margin="5"> 
                                        <ComboBoxItem Content="Translate" IsSelected="True" /> 
                                        <ComboBoxItem Content="Rotate" /> 
                                        <ComboBoxItem Content="Scale" /> 
                                </ComboBox> 
                                 
                                <!--用各种 EasingMode 分别做演示--> 
                                <ComboBox x:Name="cboEasingMode" Margin="5"> 
                                        <ComboBoxItem Content="EaseOut" IsSelected="True" /> 
                                        <ComboBoxItem Content="EaseIn" /> 
                                        <ComboBoxItem Content="EaseInOut" /> 
                                </ComboBox> 

                                <Button x:Name="btnShow" Content="演示" Click="btnShow_Click" Margin="5" /> 

                                <!--用于做动画演示的矩形--> 
                                <Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5"> 
                                        <Rectangle.RenderTransform> 
                                                <TransformGroup> 
                                                        <TranslateTransform x:Name="tt" X="0" Y="0" /> 
                                                        <RotateTransform x:Name="rt" Angle="0" /> 
                                                        <ScaleTransform x:Name="st" ScaleX="1" ScaleY="1" /> 
                                                </TransformGroup> 
                                        </Rectangle.RenderTransform> 
                                </Rectangle> 

                        </StackPanel> 
                </StackPanel> 
        </Grid> 
</navigation:Page>

 

Easing.xaml.cs

/* 
 * Easing - 与 Storyboard 结合实现动画的缓动效果 
 * Silverlight 3 内置 11 种缓动效果：分别为BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, QuinticEase, SineEase 
 * 各个缓动类都继承自 EasingFunctionBase，除了 EasingFunctionBase 提供的功能外，各个缓动类可能还会有各自的属性（懒的写了，查文档吧） 
 * EasingFunctionBase 有一个用于设置缓动模式的枚举类型属性 EasingMode （EasingMode.EaseOut(默认值), EasingMode.EaseIn, EasingMode.EaseInOut） 
 */ 
 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using System.Windows.Navigation; 
 
using Silverlight30.Model; 
using System.Xml.Linq; 
 
namespace Silverlight30.Animation 
{ 
         public partial  class Easing : Page 
        { 
                 public Easing() 
                { 
                        InitializeComponent(); 
 
                         this.Loaded +=  new RoutedEventHandler(Easing_Loaded); 
                } 
 
                 // 绑定各种 Easing 的图例列表 
                 void Easing_Loaded( object sender, RoutedEventArgs e) 
                { 
                        XElement root = XElement.Load( "Animation/Easing.xml"); 
                        var easings = from n  in root.Elements( "easing") 
                                                    select  new EasingModel 
                                                    { 
                                                            EasingName = ( string)n.Attribute( "EasingName"), 
                                                            Description = ( string)n.Attribute( "Description"), 
                                                            PicAddress = ( string)n.Attribute( "PicAddress") 
                                                    }; 
 
                        lstEasing.ItemsSource = easings; 
                        lstEasing.SelectedIndex = 0; 
                } 
 
                 private Storyboard _prevStoryboard; 
 
                 private  void btnShow_Click( object sender, RoutedEventArgs e) 
                { 
                         if (_prevStoryboard !=  null) 
                                _prevStoryboard.Stop(); 
 
                         // 实例化用户所选择的 Easing 
                        Type type =  typeof(EasingFunctionBase).Assembly.GetType( "System.Windows.Media.Animation." + ((EasingModel)lstEasing.SelectedItem).EasingName,  false); 
                        EasingFunctionBase easing = Activator.CreateInstance(type)  as EasingFunctionBase; 
 
                         // 根据用户的选择，设置 Easing 的 EasingMode 属性 
                        easing.EasingMode = (EasingMode)Enum.Parse( typeof(EasingMode), ((ComboBoxItem)cboEasingMode.SelectedItem).Content.ToString(),  true); 
 
                        Storyboard sb =  new Storyboard(); 
                        _prevStoryboard = sb; 
 
                        var transformType = ((ComboBoxItem)cboTransform.SelectedItem).Content.ToString(); 
                         switch (transformType) 
                        { 
                                 // 位移动画结合 Easing 的演示 
                                 case  "Translate": 
                                        DoubleAnimation daTranslateY =  new DoubleAnimation(); 
                                        daTranslateY.From = 0 ; 
                                        daTranslateY.To = 200; 
                                        daTranslateY.Duration = TimeSpan.FromSeconds(3); 
 
                                        daTranslateY.EasingFunction = easing; 
 
                                        Storyboard.SetTargetProperty(daTranslateY,  new PropertyPath( "Y")); 
                                        Storyboard.SetTarget(daTranslateY, tt); 
 
                                        sb.Children.Add(daTranslateY); 
 
                                         break; 
                                 // 缩放动画结合 Easing 的演示 
                                 case  "Scale": 
                                        DoubleAnimation daScaleX =  new DoubleAnimation(); 
                                        daScaleX.From = 1; 
                                        daScaleX.To = 2; 
                                        daScaleX.Duration = TimeSpan.FromSeconds(3); 
 
                                        DoubleAnimation daScaleY =  new DoubleAnimation(); 
                                        daScaleY.From = 1; 
                                        daScaleY.To = 2; 
                                        daScaleY.Duration = TimeSpan.FromSeconds(3); 
 
                                        daScaleX.EasingFunction = easing; 
                                        daScaleY.EasingFunction = easing; 
 
                                        Storyboard.SetTargetProperty(daScaleX,  new PropertyPath( "ScaleX")); 
                                        Storyboard.SetTarget(daScaleX, st); 
                                        Storyboard.SetTargetProperty(daScaleY,  new PropertyPath( "ScaleY")); 
                                        Storyboard.SetTarget(daScaleY, st); 
 
                                        sb.Children.Add(daScaleX); 
                                        sb.Children.Add(daScaleY); 
 
                                         break; 
                                 // 旋转动画结合 Easing 的演示 
                                 case  "Rotate": 
                                        DoubleAnimation daAngle =  new DoubleAnimation(); 
                                        daAngle.To = 0; 
                                        daAngle.To = 360; 
                                        daAngle.Duration = TimeSpan.FromSeconds(3); 
 
                                        daAngle.EasingFunction = easing; 
 
                                        Storyboard.SetTargetProperty(daAngle,  new PropertyPath( "Angle")); 
                                        Storyboard.SetTarget(daAngle, rt); 
 
                                        sb.Children.Add(daAngle); 
 
                                         break; 
                        } 
        
                        sb.Begin(); 
                } 
        } 
}

 

 

2、自定义缓动效果的 Demo
MyCustomEasing.cs

using System; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Ink; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
namespace Silverlight30.Animation 
{ 
         /// <summary> 
         /// 自定义缓动效果 
         /// </summary> 
         public  class MyCustomEasing : EasingFunctionBase 
        { 
                 public MyCustomEasing() 
                        :  base() 
                { 
    
                } 
 
                 /// <summary> 
                 /// 实现 EaseIn 模式下的逻辑 
                 /// EaseOut 和 EaseInOut 会自动实现 
                 /// </summary> 
                 /// <param name="normalizedTime">标准时间位（0 - 1之间）。即 动画运行到此的时间 占 动画运行所需的全部时间 的百分比</param> 
                 /// <returns></returns> 
                 protected  override  double EaseInCore( double normalizedTime) 
                { 
                         // QuinticEase 效果的实现算法 
 
                         // 假定动画运行的总共时间为 1 秒 
                         // 那么当 normalizedTime 为 0.1 时，动画运行到的位置为无该缓动效果时，0.00001秒后的位置。以此类推 
                         return Math.Pow(normalizedTime, 5); 
                } 
        } 
}

 

CustomEasing.xaml

<navigation:Page x:Class="Silverlight30.Animation.CustomEasing"    
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                     mc:Ignorable="d" 
                     xmlns:custom="clr-namespace:Silverlight30.Animation" 
                     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
                     d:DesignWidth="640" d:DesignHeight="480" 
                     Title="CustomEasing Page"> 
        <Grid x:Name="LayoutRoot"> 
                <StackPanel> 
                 
                        <StackPanel.Resources> 
                                <Storyboard x:Name="ani"> 
                                        <DoubleAnimation    
                                                Storyboard.TargetName="tt" 
                                                Storyboard.TargetProperty="Y" 
                                                From="0"    
                                                To="200"    
                                                Duration="00:00:03" 
                                        > 
                                                <DoubleAnimation.EasingFunction> 
                                                        <!--使用自定义的缓动效果--> 
                                                        <custom:MyCustomEasing EasingMode="EaseOut" /> 
                                                </DoubleAnimation.EasingFunction> 
                                        </DoubleAnimation> 
                                </Storyboard> 
                        </StackPanel.Resources> 

                        <Button x:Name="btnShow" Content="演示" Margin="5" Click="btnShow_Click" /> 

                        <Rectangle x:Name="rect" Fill="Blue" Width="200" Height="40" Margin="5" RenderTransformOrigin="0.5,0.5"> 
                                <Rectangle.RenderTransform> 
                                        <TransformGroup> 
                                                <TranslateTransform x:Name="tt" X="0" Y="0" /> 
                                        </TransformGroup> 
                                </Rectangle.RenderTransform> 
                        </Rectangle> 
                         
                </StackPanel> 
        </Grid> 
</navigation:Page>

 

CustomEasing.xaml.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using System.Windows.Navigation; 
 
namespace Silverlight30.Animation 
{ 
         public partial  class CustomEasing : Page 
        { 
                 public CustomEasing() 
                { 
                        InitializeComponent(); 
                } 
 
                 private  void btnShow_Click( object sender, RoutedEventArgs e) 
                { 
                        ani.Begin(); 
                } 
        } 
}

 

OK
[源码下载]

      本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342758 ，如需转载请自行联系原作者