稳扎稳打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://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html


示例
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

@H_502_1080@

    

{

        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)

@H_404_3226@

        

{

            ani.Begin();

        }

    }

}

OK
[源码下载]