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

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