Silverlight2.0动画简述--关键帧动画

动画分为关键帧动画和非关键帧动画(From/To/By动画),本篇我们一起学习非关键帧动画。

先补充个知识，关键帧简单来说就是动画发生改变的那一帧（不知这样说是否准确）。

非关键帧动画创建两个值之间的过渡，关键帧动画可以创建任意数量的目标值之间的过渡。

关键帧动画类型

属性类型	对应的关键帧动画类	支持的内插方法
Color	ColorAnimationUsingKeyFrames	离散、线性、样条
Double	DoubleAnimationUsingKeyFrames	离散、线性、样条
Point	PointAnimationUsingKeyFrames	离散、线性、样条
Object	ObjectAnimationUsingKeyFrames	离散

内插方法：

离散：DiscreteDoubleKeyFrame，动画函数将从一个值跳到下一个没有内插的值；

线性：LinearDoubleKeyFrame，动画将以段持续期间内的固定速度来播放；

样条：SplineDoubleKeyFrame，贝塞尔曲线

我们通过一个实例来具体学习一下关键帧动画的用法：

本例中我们做一个200*100的矩形，鼠标移上去后旋转90度

在Grid中添加一个矩形，用于我们要旋转矩形，所以添加矩形的RenderTransform

<Grid>
 <Rectangle HorizontalAlignment="Center" VerticalAlignment="Center" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
    Fill="Red" Width="200" Height="100" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform  x:Name="MyAnimatedTranslateTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>
</Grid>

添加时间线，由于我们要让矩形转动所以用DoubleAnimationUsingKeyFrames，然后添加线性内插方法

<Storyboard x:Name="myStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform"  Storyboard.TargetProperty="Angle"
 Duration="0:0:4" >

    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>

    <LinearDoubleKeyFrame KeyTime="0:0:4" Value="90"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

这里我们的动画时长4秒，第一个关键帧从0秒开始到第四秒结束。

完整代码:

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="Silverlight2Test.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
    <Grid>
        <Grid.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="MyAnimatedTranslateTransform"
        Storyboard.TargetProperty="Angle"
        Duration="0:0:4" >
                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:4" Value="90"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Rectangle HorizontalAlignment="Center" VerticalAlignment="Center" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
    Fill="Red" Width="200" Height="100" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform  x:Name="MyAnimatedTranslateTransform"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

</UserControl>

CS代码：

   private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            myStoryboard.Begin();
        }

快动手试一下吧!