silverlight.2.0:Silverlight(11) - 2.0动画的ColorAnimation DoubleAnimation PointAnimation 内插关键帧动画

　　本文源代码下载地址:

　　http://flashview.ddvip.com/2008_11/Silverlight.rar

　　介绍

　　Silverlight 2.0 动画:

　　ColorAnimation - 在两个 Color 值的间做线性内插动画处理

　　DoubleAnimation - 在两个 Double 值的间做线性内插动画处理

　　PoAnimation - 在两个 Po 值的间做线性内插动画处理

　　内插关键帧动画 - 在 Color 或 Double 或 Po 动画中内插关键帧以做线性, 离散, 3次贝塞尔曲线动画处理

　　动态改变动画 - 通过控制动态地改变动画

　　在线DEMO

　　http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

　　举例

　　1、ColorAnimation.xaml

<UserControl x:Class="Silverlight20.Animation.ColorAnimation"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<Ellipse x:Name="ellipse" Fill="Red" Width="200" Height="100">
　　　　　　<Ellipse.Triggers>
　　　　　　
　　　　　　　　<!--
　　　　　　　　RoutedEvent - 所属对象路由事件仅有Loaded这个事件
　　　　　　　　-->
　　　　　　　　<EventTrigger RoutedEvent="Ellipse.Loaded">
　　　　　　　　　　<BeginStoryboard x:Name="beginStoryboard">
　　　　　　　　　　　　<Storyboard x:Name="storyboard">
　　　　　　　　　　　　
　　　　　　　　　　　　　　<!--ColorAnimation - 在两个 Color 值的间做线性内插动画处理-->
　　　　　　　　　　　　　　<!--
　　　　　　　　　　　　　　Storyboard.TargetName - 要进行动画处理对象名称
　　　　　　　　　　　　　　Storyboard.TargetProperty - 要进行动画处理对象属性
　　　　　　　　　　　　　　BeginTime - 时间线在被触发 BeginTime 时间后才能开始播放
　　　　　　　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数](可为正；可为负；可为空；默认值为 0)
　　　　　　　　　　　　　　From - 动画起始值
　　　　　　　　　　　　　　To - 动画结束值
　　　　　　　　　　　　　　By - 动画从起始值开始计算所需变化总量(To 优先于 By)
　　　　　　　　　　　　　　Duration - 时间线持续时间
　　　　　　　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数]
　　　　　　　　　　　　　　　　Automatic - 自动确定
　　　　　　　　　　　　　　　　Forever - 无限长
　　　　　　　　　　　　　　AutoReverse - 动画完成后是否要原路返回默认值为 false
　　　　　　　　　　　　　　RepeatBehavior - 动画重复播放时间、次数或类型
　　　　　　　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数]
　　　　　　　　　　　　　　　　nx - 播放次数1x, 2x, 3x
　　　　　　　　　　　　　　　　Forever - 永久播放
　　　　　　　　　　　　　　SpeedRatio - 时间线速率倍数默认值 1
　　　　　　　　　　　　　　FillBehavior - 动画结束后行为 [.Windows.Media.Animation.FillBehavior枚举]
　　　　　　　　　　　　　　　　FillBehavior.HoldEnd - 动画结束后保留动画属性结束值默认值
　　　　　　　　　　　　　　　　FillBehavior.Stop - 动画结束后恢复动画属性为其值
　　　　　　　　　　　　　　-->
　　　　　　　　　　　　　　<ColorAnimation
　　　　　　　　　　　　　　　　Storyboard.TargetName="ellipse"
　　　　　　　　　　　　　　　　Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
　　　　　　　　　　　　　　　　BeginTime="00:00:0"
　　　　　　　　　　　　　　　　From="Red"
　　　　　　　　　　　　　　　　To="Yellow"
　　　　　　　　　　　　　　　　Duration="Automatic"
　　　　　　　　　　　　　　　　AutoReverse="True"
　　　　　　　　　　　　　　　　RepeatBehavior="3x">
　　　　　　　　　　　　　　</ColorAnimation>
　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　</BeginStoryboard>
　　　　　　　　</EventTrigger>
　　　　　　</Ellipse.Triggers>
　　　　</Ellipse>
　　
　　</StackPanel>
</UserControl>

　　2、DoubleAnimation.xaml

<UserControl x:Class="Silverlight20.Animation.DoubleAnimation"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<Rectangle x:Name="rectangle" Width="200" Height="100" Stroke="Black" StrokeThickness="6" RadiusX="25" RadiusY="25">
　　　　　　<Rectangle.Fill>
　　　　　　　　<ImageBrush ImageSource="/Silverlight20;component/Images/Logo.jpg" Stretch="Fill" />
　　　　　　</Rectangle.Fill>
　　　　</Rectangle>
　　　　
　　　　<StackPanel.Resources>
　　　　　　<BeginStoryboard x:Name="beginStoryboard">
　　　　　　　　<Storyboard x:Name="storyboard">
　　
　　　　　　　　　　<!--DoubleAnimation - 在两个 Double 值的间做线性内插动画处理-->
　　　　　　　　　　<!--
　　　　　　　　　　Storyboard.TargetName - 要进行动画处理对象名称
　　　　　　　　　　Storyboard.TargetProperty - 要进行动画处理对象属性
　　　　　　　　　　BeginTime - 时间线在被触发 BeginTime 时间后才能开始播放
　　　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数](可为正；可为负；可为空；默认值为 0)
　　　　　　　　　　From - 动画起始值
　　　　　　　　　　To - 动画结束值
　　　　　　　　　　By - 动画从起始值开始计算所需变化总量(To 优先于 By)
　　　　　　　　　　Duration - 时间线持续时间
　　　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数]
　　　　　　　　　　　　Automatic - 自动确定
　　　　　　　　　　　　Forever - 无限长
　　　　　　　　　　AutoReverse - 动画完成后是否要原路返回默认值为 false
　　　　　　　　　　RepeatBehavior - 动画重复播放时间、次数或类型
　　　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数]
　　　　　　　　　　　　nx - 播放次数1x, 2x, 3x
　　　　　　　　　　　　Forever - 永久播放
　　　　　　　　　　SpeedRatio - 时间线速率倍数默认值 1
　　　　　　　　　　FillBehavior - 动画结束后行为 [.Windows.Media.Animation.FillBehavior枚举]
　　　　　　　　　　　　FillBehavior.HoldEnd - 动画结束后保留动画属性结束值默认值
　　　　　　　　　　　　FillBehavior.Stop - 动画结束后恢复动画属性为其值
　　　　　　　　　　-->
　　　　　　　　　　<DoubleAnimation
　　　　　　　　　　　　Storyboard.TargetName="rectangle"
　　　　　　　　　　　　Storyboard.TargetProperty="Width"
　　　　　　　　　　　　From="100"
　　　　　　　　　　　　By="100"
　　　　　　　　　　　　BeginTime="0:0:3"
　　　　　　　　　　　　Duration="00:00:03"
　　　　　　　　　　　　AutoReverse="False"
　　　　　　　　　　　　RepeatBehavior="Forever">
　　　　　　　　　　</DoubleAnimation>
　　　　　　　　</Storyboard>
　　　　　　</BeginStoryboard>
　　　　</StackPanel.Resources>
　　　　
　　</StackPanel>
</UserControl>

　　3、PoAnimation.xaml

<UserControl x:Class="Silverlight20.Animation.PoAnimation"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<StackPanel Orientation="Horizontal">
　　
　　　　　　<Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" />
　　
　　　　　　<Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" />
　　
　　　　　　<Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" />
　　
　　　　　　<Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" />
　　　　　　
　　　　</StackPanel>
　　
　　　　<Path Fill="Red">
　　　　　　<Path.Data>
　　　　　　　　<EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
　　　　　　</Path.Data>
　　　　</Path>
　　　　
　　　　<StackPanel.Resources>
　　　　　　<Storyboard x:Name="storyboard">
　　
　　　　　　　　<!--PoAnimation - 在两个 Po 值的间做线性内插动画处理-->
　　　　　　　　<!--
　　　　　　　　Storyboard.TargetName - 要进行动画处理对象名称
　　　　　　　　Storyboard.TargetProperty - 要进行动画处理对象属性
　　　　　　　　BeginTime - 时间线在被触发 BeginTime 时间后才能开始播放
　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数](可为正；可为负；可为空；默认值为 0)
　　　　　　　　From - 动画起始值
　　　　　　　　To - 动画结束值
　　　　　　　　By - 动画从起始值开始计算所需变化总量(To 优先于 By)
　　　　　　　　Duration - 时间线持续时间
　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数]
　　　　　　　　　　Automatic - 自动确定
　　　　　　　　　　Forever - 无限长
　　　　　　　　AutoReverse - 动画完成后是否要原路返回默认值为 false
　　　　　　　　RepeatBehavior - 动画重复播放时间、次数或类型
　　　　　　　　　　TimeSpan - [-][日.]时:分:秒[.1位到7为秒后小数]
　　　　　　　　　　nx - 播放次数1x, 2x, 3x
　　　　　　　　　　Forever - 永久播放
　　　　　　　　SpeedRatio - 时间线速率倍数默认值 1
　　　　　　　　FillBehavior - 动画结束后行为 [.Windows.Media.Animation.FillBehavior枚举]
　　　　　　　　　　FillBehavior.HoldEnd - 动画结束后保留动画属性结束值默认值
　　　　　　　　　　FillBehavior.Stop - 动画结束后恢复动画属性为其值
　　　　　　　　-->
　　　　　　　　<PoAnimation
　　　　　　　　　　Storyboard.TargetName="ellipseGeometry"
　　　　　　　　　　Storyboard.TargetProperty="Center"
　　　　　　　　　　BeginTime="00:00:00"
　　　　　　　　　　From="50,50"
　　　　　　　　　　To="300,500"
　　　　　　　　　　Duration="0:0:3"
　　　　　　　　　　AutoReverse="True"
　　　　　　　　　　RepeatBehavior="00:00:10">
　　　　　　　　</PoAnimation>
　　　　　　</Storyboard>
　　　　</StackPanel.Resources>
　　　　
　　</StackPanel>
</UserControl>

　　PoAnimation.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Animation
{
　　public partial PoAnimation : UserControl
　　{
　　　　public PoAnimation
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　private void Animation_Begin(object sender, RoutedEventArgs e)
　　　　{
　　　　　　// 播放
　　　　　　storyboard.Begin;
　　　　}
　　
　　　　private void Animation_Pause(object sender, RoutedEventArgs e)
　　　　{
　　　　　　// 暂停
　　　　　　storyboard.Pause;
　　　　}
　　
　　　　private void Animation_Resume(object sender, RoutedEventArgs e)
　　　　{
　　　　　　// 继续
　　　　　　storyboard.Resume;
　　　　}
　　
　　　　private void Animation_Stop(object sender, RoutedEventArgs e)
　　　　{
　　　　　　// 停止
　　　　　　storyboard.Stop;
　　　　}
　　}
}

　　4、KeyFrame.xaml

<UserControl x:Class="Silverlight20.Animation.KeyFrame"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<!--
　　　　ColorAnimationUsingKeyFrames - 在组 KeyFrame 中所设置多个 Color 值的间做动画处理
　　　　DoubleAnimationUsingKeyFrames - 在组 KeyFrame 中所设置多个 Double 值的间做动画处理
　　　　PoAnimationUsingKeyFrames - 在组 KeyFrame 中所设置多个 Po 值的间做动画处理
　　　　-->
　　　　
　　　　<!--
　　　　LinearColorKeyFrame - 在前个关键帧 Color 值及其自己 Value 的间进行线性内插动画处理
　　　　DiscreteColorKeyFrame - 在前个关键帧 Color 值及其自己 Value 的间进行离散内插动画处理
　　　　SplineColorKeyFrame - 在前个关键帧 Color 值及其自己 Value 的间按 3次贝塞尔曲线 进行内插动画处理
　　　　
　　　　LinearDoubleKeyFrame - 在前个关键帧 Double 值及其自己 Value 的间进行线性内插动画处理
　　　　DiscreteDoubleKeyFrame - 在前个关键帧 Double 值及其自己 Value 的间进行离散内插动画处理
　　　　SplineDoubleKeyFrame - 在前个关键帧 Double 值及其自己 Value 的间按 3次贝塞尔曲线 进行内插动画处理
　　　　
　　　　LinearPoKeyFrame - 在前个关键帧 Po 值及其自己 Value 的间进行线性内插动画处理
　　　　DiscretePoKeyFrame - 在前个关键帧 Po 值及其自己 Value 的间进行离散内插动画处理
　　　　SplinePoKeyFrame - 在前个关键帧 Po 值及其自己 Value 的间按 3次贝塞尔曲线 进行内插动画处理
　　　　-->
　　　　
　　　　<!--
　　　　Value - 关键帧目标值
　　　　KeyTime - 到达关键帧目标值时间
　　　　KeySpline - 3次贝塞尔曲线两个控制点:x1,y1 x2,y2(该 3次贝塞尔曲线起点为0,0终点为1,1)
　　　　-->
　　
　　　　<Grid Margin="5" >
　　　　　　<Grid.Resources>
　　　　　　　　<Storyboard x:Name="caStoryboard">
　　　　　　　　　　<ColorAnimationUsingKeyFrames
　　　　　　　　　　　　Storyboard.TargetName="caBrush"
　　　　　　　　　　　　Storyboard.TargetProperty="Color"
　　　　　　　　　　　　Duration="0:0:10"
　　　　　　　　　　>
　　　　　　　　　　　　<LinearColorKeyFrame Value="Green" KeyTime="0:0:3" />
　　　　　　　　　　　　<DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:4" />
　　　　　　　　　　　　<SplineColorKeyFrame Value="Red" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
　　　　　　　　　　</ColorAnimationUsingKeyFrames>
　　　　　　　　</Storyboard>
　　　　　　</Grid.Resources>
　　
　　　　　　<Rectangle x:Name="caRectangle" MouseLeftButtonDown="caRectangle_MouseLeftButtonDown" Width="100" Height="50">
　　　　　　　　<Rectangle.Fill>
　　　　　　　　　　<SolidColorBrush x:Name="caBrush" Color="Red" />
　　　　　　　　</Rectangle.Fill>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="5" >
　　　　　　<Grid.Resources>
　　　　　　　　<Storyboard x:Name="daStoryboard">
　　　　　　　　　　<DoubleAnimationUsingKeyFrames
　　　　　　　　　　　　Storyboard.TargetName="daTransform"
　　　　　　　　　　　　Storyboard.TargetProperty="X"
　　　　　　　　　　　　Duration="0:0:10"
　　　　　　　　　　>
　　　　　　　　　　　　<LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
　　　　　　　　　　　　<DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
　　　　　　　　　　　　<SplineDoubleKeyFrame Value="0" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
　　　　　　　　　　</DoubleAnimationUsingKeyFrames>
　　　　　　　　</Storyboard>
　　　　　　</Grid.Resources>
　　
　　　　　　<Rectangle x:Name="daRectangle" MouseLeftButtonDown="daRectangle_MouseLeftButtonDown" Fill="Red" Width="100" Height="50">
　　　　　　　　<Rectangle.RenderTransform>
　　　　　　　　　　<TranslateTransform x:Name="daTransform" X="0" Y="0" />
　　　　　　　　</Rectangle.RenderTransform>
　　　　　　</Rectangle>
　　　　</Grid>
　　
　　　　<Grid Margin="5" >
　　　　　　<Grid.Resources>
　　　　　　　　<Storyboard x:Name="paStoryboard">
　　　　　　　　　　<PoAnimationUsingKeyFrames
　　　　　　　　　　　　Storyboard.TargetName="paGeometry"
　　　　　　　　　　　　Storyboard.TargetProperty="Center"
　　　　　　　　　　　　Duration="0:0:10"
　　　　　　　　　　>
　　　　　　　　　　　　<LinearPoKeyFrame Value="100,100" KeyTime="0:0:3" />
　　　　　　　　　　　　<DiscretePoKeyFrame Value="200,200" KeyTime="0:0:4" />
　　　　　　　　　　　　<SplinePoKeyFrame Value="50,50" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
　　　　　　　　　　</PoAnimationUsingKeyFrames>
　　　　　　　　</Storyboard>
　　　　　　</Grid.Resources>
　　
　　　　　　<Path Fill="Red" MouseLeftButtonDown="paPath_MouseLeftButtonDown">
　　　　　　　　<Path.Data>
　　　　　　　　　　<EllipseGeometry x:Name="paGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
　　　　　　　　</Path.Data>
　　　　　　</Path>
　　　　</Grid>
　　</StackPanel>
</UserControl>

　　KeyFrame.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Animation
{
　　public partial KeyFrame : UserControl
　　{
　　　　public KeyFrame
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　private void caRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　caStoryboard.Begin;
　　　　}
　　
　　　　private void daRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　daStoryboard.Begin;
　　　　}
　　
　　　　private void paPath_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　paStoryboard.Begin;
　　　　}
　　}
}

　　5、Programmatically.xaml

<UserControl x:Class="Silverlight20.Animation.Programmatically"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　
　　　　<!--
　　　　MouseLeftButtonDown - 在该Canvas上单击鼠标后所执行事件
　　　　-->
　　　　<Canvas x:Name="canvas" Background="Yellow" Width="640" Height="480" MouseLeftButtonDown="Canvas_MouseLeftButtonDown">
　　　　　　<Path Fill="Red">
　　　　　　　　<Path.Data>
　　　　　　　　　　<EllipseGeometry x:Name="ellipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" />
　　　　　　　　</Path.Data>
　　　　　　</Path>
　　　　</Canvas>
　　
　　　　<StackPanel.Resources>
　　　　　　<Storyboard x:Name="storyboard">
　　　　　　　　<PoAnimation
　　　　　　　　　　x:Name="poAnimation"
　　　　　　　　　　Storyboard.TargetProperty="Center"
　　　　　　　　　　Storyboard.TargetName="ellipseGeometry"
　　　　　　　　　　Duration="0:0:2"/>
　　　　　　</Storyboard>
　　　　</StackPanel.Resources>
　　</StackPanel>
　　
</UserControl>



　　Programmatically.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Animation
{
　　public partial Programmatically : UserControl
　　{
　　　　public Programmatically
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　// 鼠标相对和canvas坐标
　　　　　　double X = e.GetPosition(canvas).X;
　　　　　　double Y = e.GetPosition(canvas).Y;
　　　　　　Po myPo = Po(X, Y);
　　
　　　　　　// 将动画结束值设置为鼠标当前坐标
　　　　　　poAnimation.To = myPo;
　　
　　　　　　// 播放动画
　　　　　　storyboard.Begin;
　　　　}
　　}
}

　　OK

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:学Silverlight 2系列(23):Silverlight和HTML混合的无窗口模式
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放