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

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

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