[源码下载]
稳扎稳打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
{
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 = @H_502_1339@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 = @H_502_1339@0 ;
daTranslateY.To = @H_502_1339@200;
daTranslateY.Duration = TimeSpan.FromSeconds(@H_502_1339@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 = @H_502_1339@1;
daScaleX.To = @H_502_1339@2;
daScaleX.Duration = TimeSpan.FromSeconds(@H_502_1339@3);
DoubleAnimation daScaleY = new DoubleAnimation();
daScaleY.From = @H_502_1339@1;
daScaleY.To = @H_502_1339@2;
daScaleY.Duration = TimeSpan.FromSeconds(@H_502_1339@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 = @H_502_1339@0;
daAngle.To = @H_502_1339@360;
daAngle.Duration = TimeSpan.FromSeconds(@H_502_1339@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)
@H_314_2419@{
// QuinticEase 效果的实现算法
// 假定动画运行的总共时间为 1 秒
// 那么当 normalizedTime 为 0.1 时，动画运行到的位置为无该缓动效果时，0.00001秒后的位置。以此类推
return Math.Pow(normalizedTime, @H_502_1339@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（缓动效果）全部内容，希望文章能够帮你解决稳扎稳打Silverlight(37) - 3.0动画之Easing（缓动效果）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）