随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


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


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>


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>

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();
        }

    }

}



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>

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();
        }

    }

}



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>

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();
        }

    }

}



OK
[源码下载]