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

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

                
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <BeginStoryboard x:Name="beginStoryboard">
                        <Storyboard x:Name="storyboard">

                            
                            
                            <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
                        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
                    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">

        

        

        

        <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">

        
        <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
[源码下载]
相关阅读:
倒计时功能的实现
 getElementsByClassName
模拟滚动条
 display:table-cell
gulp相关知识（2）
gulp相关知识（1）
移动端的网页试做
 关于移动端的布局
 伪类before和after
简单时钟——css3
原文地址：https://www.cnblogs.com/webabcd/p/1327758.html