[源碼下載]
作者: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
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.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
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.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
[源碼下載]