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

概述[索引页] [源码下载] 稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画 作者： webabcd 介绍 Silverlight 2.0 动画：     ColorAnimation - 在两个 Color 值之间做线性内插动画处理     DoubleAnimation - 在 [索引页]
[源码下载]


稳扎稳打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为的秒后的小数]

                                @R_404_6843@matic - 自动确定

                                Forever - 无限长

                            @R_404_6843@Reverse - 动画完成后是否要原路返回。默认值为 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 ="@R_404_6843@matic"  

                                @R_404_6843@Reverse ="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为的秒后的小数]

                        @R_404_6843@matic - 自动确定

                        Forever - 无限长

                    @R_404_6843@Reverse - 动画完成后是否要原路返回。默认值为 false

                    RepeatBehavior - 动画重复播放的时间、次数或类型

                        TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]

                        nx - 播放次数。1x, 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"

                        @R_404_6843@Reverse ="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为的秒后的小数]

                    @R_404_6843@matic - 自动确定

                    Forever - 无限长

                @R_404_6843@Reverse - 动画完成后是否要原路返回。默认值为 false

                RepeatBehavior - 动画重复播放的时间、次数或类型

                    TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]

                    nx - 播放次数。1x, 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"

                    @R_404_6843@Reverse ="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.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.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

@H_453_3270@

{

    public partial class KeyFrame : UserControl

    @H_186_3301@

{

        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)

@H_998_4047@

        

{

            // 鼠标相对与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
[源码下载] 总结

以上是内存溢出为你收集整理的稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画全部内容，希望文章能够帮你解决稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。