稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引页]</a>

<a href="http://down.51cto.com/data/100302">[源码下载]</a>

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

介绍

Silverlight 2.0 动画：

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

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

    PointAnimation - 在两个 Point 值之间做线性内插动画处理

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

    动态改变动画 - 通过程序控制，动态地改变动画

在线DEMO

示例

1、ColorAnimation.xaml

&lt;UserControl x:Class="Silverlight20.Animation.ColorAnimation" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;Ellipse x:Name="ellipse" Fill="Red" Width="200" Height="100"&gt; 

                        &lt;Ellipse.Triggers&gt; 

                                &lt;!-- 

                                RoutedEvent - 所属对象的路由事件，仅有Loaded这个事件 

                                --&gt; 

                                &lt;EventTrigger RoutedEvent="Ellipse.Loaded"&gt; 

                                        &lt;BeginStoryboard x:Name="beginStoryboard"&gt; 

                                                &lt;Storyboard x:Name="storyboard"&gt; 

                                                        &lt;!--ColorAnimation - 在两个 Color 值之间做线性内插动画处理--&gt; 

                                                        &lt;!-- 

                                                        Storyboard.TargetName - 要进行动画处理的对象的名称 

                                                        Storyboard.TargetProperty - 要进行动画处理的对象的属性 

                                                        BeginTime - 时间线在被触发 BeginTime 的时间后才能开始播放 

                                                                TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]（可为正；可为负；可为空；默认值为 0） 

                                                        From - 动画的起始值 

                                                        To - 动画的结束值 

                                                        By - 动画从起始值开始计算，所需变化的总量（To 优先于 By） 

                                                        Duration - 时间线的持续时间 

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

                                                                Automatic - 自动确定 

                                                                Forever - 无限长 

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

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

                                                                nx - 播放次数。1x, 2x, 3x    

                                                                Forever - 永久播放 

                                                        SpeedRatio - 时间线的速率的倍数。默认值 1 

                                                        FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举] 

                                                                FillBehavior.HoldEnd - 动画结束后，保留动画属性的结束值。默认值 

                                                                FillBehavior.Stop - 动画结束后，恢复动画属性为其初始值 

                                                        --&gt; 

                                                        &lt;ColorAnimation    

                                                                Storyboard.TargetName="ellipse"    

                                                                Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"    

                                                                BeginTime="00:00:0"    

                                                                From="Red"    

                                                                To="Yellow"    

                                                                Duration="Automatic"    

                                                                AutoReverse="True"    

                                                                RepeatBehavior="3x"&gt; 

                                                        &lt;/ColorAnimation&gt; 

                                                &lt;/Storyboard&gt; 

                                        &lt;/BeginStoryboard&gt; 

                                &lt;/EventTrigger&gt; 

                        &lt;/Ellipse.Triggers&gt; 

                &lt;/Ellipse&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

2、DoubleAnimation.xaml

&lt;UserControl x:Class="Silverlight20.Animation.DoubleAnimation" 

                &lt;Rectangle x:Name="rectangle" Width="200" Height="100" Stroke="Black" StrokeThickness="6" RadiusX="25" RadiusY="25"&gt; 

                        &lt;Rectangle.Fill&gt; 

                                &lt;ImageBrush ImageSource="/Silverlight20;component/Images/Logo.jpg" Stretch="Fill" /&gt; 

                        &lt;/Rectangle.Fill&gt; 

                &lt;/Rectangle&gt; 

                &lt;StackPanel.Resources&gt; 

                        &lt;BeginStoryboard x:Name="beginStoryboard"&gt; 

                                &lt;Storyboard x:Name="storyboard"&gt; 

                                        &lt;!--DoubleAnimation - 在两个 Double 值之间做线性内插动画处理--&gt; 

                                        &lt;!-- 

                                        Storyboard.TargetName - 要进行动画处理的对象的名称 

                                        Storyboard.TargetProperty - 要进行动画处理的对象的属性 

                                        BeginTime - 时间线在被触发 BeginTime 的时间后才能开始播放 

                                                TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]（可为正；可为负；可为空；默认值为 0） 

                                        From - 动画的起始值 

                                        To - 动画的结束值 

                                        By - 动画从起始值开始计算，所需变化的总量（To 优先于 By） 

                                        Duration - 时间线的持续时间 

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

                                                Automatic - 自动确定 

                                                Forever - 无限长 

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

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

                                                nx - 播放次数。1x, 2x, 3x    

                                                Forever - 永久播放 

                                        SpeedRatio - 时间线的速率的倍数。默认值 1 

                                        FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举] 

                                                FillBehavior.HoldEnd - 动画结束后，保留动画属性的结束值。默认值 

                                                FillBehavior.Stop - 动画结束后，恢复动画属性为其初始值 

                                        --&gt; 

                                        &lt;DoubleAnimation    

                                                Storyboard.TargetName="rectangle"    

                                                Storyboard.TargetProperty="Width" 

                                                From="100" 

                                                By="100" 

                                                BeginTime="0:0:3" 

                                                Duration="00:00:03" 

                                                AutoReverse="False" 

                                                RepeatBehavior="Forever"&gt; 

                                        &lt;/DoubleAnimation&gt; 

                                &lt;/Storyboard&gt; 

                        &lt;/BeginStoryboard&gt; 

                &lt;/StackPanel.Resources&gt; 

3、PointAnimation.xaml

&lt;UserControl x:Class="Silverlight20.Animation.PointAnimation" 

                &lt;StackPanel Orientation="Horizontal"&gt; 

                        &lt;Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" /&gt; 

                        &lt;Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" /&gt; 

                        &lt;Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" /&gt; 

                        &lt;Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" /&gt; 

                &lt;/StackPanel&gt; 

                &lt;Path Fill="Red"&gt; 

                        &lt;Path.Data&gt; 

                                &lt;EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" /&gt; 

                        &lt;/Path.Data&gt; 

                &lt;/Path&gt; 

                        &lt;Storyboard x:Name="storyboard"&gt; 

                                &lt;!--PointAnimation - 在两个 Point 值之间做线性内插动画处理--&gt; 

                                Storyboard.TargetName - 要进行动画处理的对象的名称 

                                Storyboard.TargetProperty - 要进行动画处理的对象的属性 

                                BeginTime - 时间线在被触发 BeginTime 的时间后才能开始播放 

                                        TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]（可为正；可为负；可为空；默认值为 0） 

                                From - 动画的起始值 

                                To - 动画的结束值 

                                By - 动画从起始值开始计算，所需变化的总量（To 优先于 By） 

                                Duration - 时间线的持续时间 

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

                                        Automatic - 自动确定 

                                        Forever - 无限长 

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

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

                                        nx - 播放次数。1x, 2x, 3x    

                                        Forever - 永久播放 

                                SpeedRatio - 时间线的速率的倍数。默认值 1 

                                FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举] 

                                        FillBehavior.HoldEnd - 动画结束后，保留动画属性的结束值。默认值 

                                        FillBehavior.Stop - 动画结束后，恢复动画属性为其初始值 

                                &lt;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"&gt; 

                                &lt;/PointAnimation&gt; 

                        &lt;/Storyboard&gt; 

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

        } 

}

<a href="http://webabcd.blog.51cto.com/1787395/343037" target="_blank">未完待续&gt;&gt;</a>

OK

<a href="http://down.51cto.com/data/100302" target="_blank">[源码下载]</a>

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/343038，如需转载请自行联系原作者