稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画

[索引页]
[源码下载]

稳扎稳打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
[源码下载]