稳扎稳打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://webabcd.blog.51cto.com/1787395/342779  


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

 

未完待续>>

OK
[源码下载]