稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画
[索引页]
[源码下载]
作者:webabcd
介绍
Silverlight 2.0 动画:
ColorAnimation - 在两个 Color 值之间做线性内插动画处理
DoubleAnimation - 在两个 Double 值之间做线性内插动画处理
PointAnimation - 在两个 Point 值之间做线性内插动画处理
内插关键帧动画 - 在 Color 或 Double 或 Point 动画中内插关键帧,以做线性, 离散, 三次贝塞尔曲线的动画处理
动态改变动画 - 通过程序控制,动态地改变动画
在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html
示例
1、ColorAnimation.xaml
2、DoubleAnimation.xaml
3、PointAnimation.xaml
PointAnimation.xaml.cs
4、KeyFrame.xaml
KeyFrame.xaml.cs
5、Programmatically.xaml
Programmatically.xaml.cs
OK
[源码下载]
[源码下载]
稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画
作者:webabcd
介绍
Silverlight 2.0 动画:
ColorAnimation - 在两个 Color 值之间做线性内插动画处理
DoubleAnimation - 在两个 Double 值之间做线性内插动画处理
PointAnimation - 在两个 Point 值之间做线性内插动画处理
内插关键帧动画 - 在 Color 或 Double 或 Point 动画中内插关键帧,以做线性, 离散, 三次贝塞尔曲线的动画处理
动态改变动画 - 通过程序控制,动态地改变动画
在线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 - 动画结束后的行为 [System.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>
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 - 动画结束后的行为 [System.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 - 动画结束后的行为 [System.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>
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 - 动画结束后的行为 [System.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、PointAnimation.xaml
<UserControl x:Class="Silverlight20.Animation.PointAnimation"
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">
<!--PointAnimation - 在两个 Point 值之间做线性内插动画处理-->
<!--
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 - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举]
FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值
FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值
-->
<PointAnimation
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">
</PointAnimation>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
</UserControl>
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">
<!--PointAnimation - 在两个 Point 值之间做线性内插动画处理-->
<!--
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 - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举]
FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值
FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值
-->
<PointAnimation
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">
</PointAnimation>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
</UserControl>
PointAnimation.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;
namespace Silverlight20.Animation
{
public partial class PointAnimation : UserControl
{
public PointAnimation()
{
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();
}
}
}
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;
namespace Silverlight20.Animation
{
public partial class PointAnimation : UserControl
{
public PointAnimation()
{
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 值之间做动画处理
PointAnimationUsingKeyFrames - 在一组 KeyFrame 中所设置的多个 Point 值之间做动画处理
-->
<!--
LinearColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间进行线性内插动画处理
DiscreteColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间进行离散内插动画处理
SplineColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
LinearDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间进行线性内插动画处理
DiscreteDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间进行离散内插动画处理
SplineDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
LinearPointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间进行线性内插动画处理
DiscretePointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间进行离散内插动画处理
SplinePointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
-->
<!--
Value - 关键帧的目标值
KeyTime - 到达关键帧目标值的时间
KeySpline - 三次贝塞尔曲线的两个控制点:x1,y1 x2,y2(该三次贝塞尔曲线的起点为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">
<PointAnimationUsingKeyFrames
Storyboard.TargetName="paGeometry"
Storyboard.TargetProperty="Center"
Duration="0:0:10"
>
<LinearPointKeyFrame Value="100,100" KeyTime="0:0:3" />
<DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" />
<SplinePointKeyFrame Value="50,50" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
</PointAnimationUsingKeyFrames>
</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>
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 值之间做动画处理
PointAnimationUsingKeyFrames - 在一组 KeyFrame 中所设置的多个 Point 值之间做动画处理
-->
<!--
LinearColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间进行线性内插动画处理
DiscreteColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间进行离散内插动画处理
SplineColorKeyFrame - 在前一个关键帧的 Color 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
LinearDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间进行线性内插动画处理
DiscreteDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间进行离散内插动画处理
SplineDoubleKeyFrame - 在前一个关键帧的 Double 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
LinearPointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间进行线性内插动画处理
DiscretePointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间进行离散内插动画处理
SplinePointKeyFrame - 在前一个关键帧的 Point 值及其自己的 Value 之间按 三次贝塞尔曲线 进行内插动画处理
-->
<!--
Value - 关键帧的目标值
KeyTime - 到达关键帧目标值的时间
KeySpline - 三次贝塞尔曲线的两个控制点:x1,y1 x2,y2(该三次贝塞尔曲线的起点为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">
<PointAnimationUsingKeyFrames
Storyboard.TargetName="paGeometry"
Storyboard.TargetProperty="Center"
Duration="0:0:10"
>
<LinearPointKeyFrame Value="100,100" KeyTime="0:0:3" />
<DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" />
<SplinePointKeyFrame Value="50,50" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
</PointAnimationUsingKeyFrames>
</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 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;
namespace Silverlight20.Animation
{
public partial class 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();
}
}
}
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;
namespace Silverlight20.Animation
{
public partial class 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">
<PointAnimation
x:Name="pointAnimation"
Storyboard.TargetProperty="Center"
Storyboard.TargetName="ellipseGeometry"
Duration="0:0:2"/>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
</UserControl>
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">
<PointAnimation
x:Name="pointAnimation"
Storyboard.TargetProperty="Center"
Storyboard.TargetName="ellipseGeometry"
Duration="0:0:2"/>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
</UserControl>
Programmatically.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;
namespace Silverlight20.Animation
{
public partial class Programmatically : UserControl
{
public Programmatically()
{
InitializeComponent();
}
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// 鼠标相对与canvas的坐标
double newX = e.GetPosition(canvas).X;
double newY = e.GetPosition(canvas).Y;
Point myPoint = new Point(newX, newY);
// 将动画的结束值设置为鼠标的当前坐标
pointAnimation.To = myPoint;
// 播放动画
storyboard.Begin();
}
}
}
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;
namespace Silverlight20.Animation
{
public partial class Programmatically : UserControl
{
public Programmatically()
{
InitializeComponent();
}
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// 鼠标相对与canvas的坐标
double newX = e.GetPosition(canvas).X;
double newY = e.GetPosition(canvas).Y;
Point myPoint = new Point(newX, newY);
// 将动画的结束值设置为鼠标的当前坐标
pointAnimation.To = myPoint;
// 播放动画
storyboard.Begin();
}
}
}
OK
[源码下载]