稳扎稳打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" >

< 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" >

< ComboBox x:Name ="cboTransform" Margin ="5" >

< ComboBoxItem Content ="Translate" IsSelected ="True" />

< ComboBoxItem Content ="Rotate" />

< ComboBoxItem Content ="Scale" />

</ ComboBox >

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

</ 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
[源码下载]

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

相关推荐