silverlight 2.0 beta 2 之 blend 2.5 (13) 关键帧动画DoubleAnimation,ColorAnimation

大家应该都知道,做动画时我们只能对那些属性值表示双精度数值(Double)，颜色(Color)，点(Point)的属性施加动画。此外，我们还可以通过ObjectAnimationUsingKeyFrames对那些使用了对象的属性施加动画，但是两帧之间不连接,没有过渡动画,第一帧直接跳到第二帧,所以他也只有一种Discrete关键帧形式.

 

属性类型       相应的关键帧动画                 关键帧形式

 

Color           ColorAnimationUsingKeyFrames     Discrete,Linear,Splined
Double          DoubleAnimationUsingKeyFrames    Discrete,Linear,Splined
Point           PointAnimationUsingKeyFrames     Discrete,Linear,Splined
Object          ObjectAnimationUsingKeyFrames    Discrete

 

 

今天我们先来学一下 DoubleAnimation 和ColorAnimation 

 

DoubleAnimationUsingKeyFrames:双精度数值关键帧动画

他有三种关键帧形式: LinearDoubleKeyFrame ， DiscreteDoubleKeyFrame ， SplineDoubleKeyFrame 。

 

LinearDoubleKeyFrame :元件成线性匀速移动;

DiscreteDoubleKeyFrame :两帧之间不连接,没有过渡动画,第一帧直接跳到第二帧

SplineDoubleKeyFrame:可实现加速度

 

下面我们来用工具栏中的Rectangle(快捷键m)画一个矩形.Ok!下面是Xaml文件

 

<Rectangle Height="74" HorizontalAlignment="Left" Margin="93,77,0,0" VerticalAlignment="Top" Width="94" Fill="#FFFF0202" Stroke="#FF000000" x:Name="rectangle" />
    

 

新建一个动画面板,移动矩形,在时间轴上增加关键帧,3个沿X坐标轴移动的坐标点.默认状态势SplineDoubleKeyFrame关键帧形式。

这时我们再返回看矩形的Xaml 代码，他自动增加了几行。这看似没有任何多余的属性在里，但不能删除，删除当下不会报错，当你重新打开动画面板时会提示Storyboard.TargetName属性找不到。

 

<Rectangle Height="67" HorizontalAlignment="Left" Margin="53,71,0,0" VerticalAlignment="Top" Width="97" Fill="#FFFF0000" Stroke="#FF000000" x:Name="rectangle" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>

 

我们要测试这3种效果，目前我是在Xaml直接把其他两个SplineDoubleKeyFrame关键帧形式，修改成LinearDoubleKeyFrame和DiscreteDoubleKeyFrame.（如果哪位大侠知道如何在blend里设计属性里直接找到，忘告之不胜感激）

 

 

<Storyboard x:Name="Storyboard1" AutoReverse="False" RepeatBehavior="1x"  >
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <LinearDoubleKeyFrame KeyTime="00:00:03" Value="610"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:04" Value="330"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:06" Value="330"/>
                <SplineDoubleKeyFrame KeyTime="00:00:10" Value="0">
                    <SplineDoubleKeyFrame.KeySpline>
                        <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>
                    </SplineDoubleKeyFrame.KeySpline>
                </SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

 

AutoReverse:从起点播放到该时间线末尾时是否按相反的顺序播放。 

RepeatBehavior:指定时间线将要播放的次数；也可以设置Forever，指定时间线无限重复。默认值是 RepeatBehavior 的 Count 为 1，该值指示时间线播放一次。

 

Storyboard.TargetName:设置要进行该动画处理的元素的名字x:name。
Storyboard.TargetProperty:设置要进行动画处理的元素的属性。

BeginTime：动画起始时间
From:动画处理的基值。
To:动画处理的目标值。
Duration:动画从基值到目标值过渡的时间。

 

 OK,  我们来测试一下效果吧。

 

*****此DoubleAnimation 例子源码下载

 

 

ColorAnimationUsingKeyFrames

有三种关键帧形式: DiscreteColorKeyFrame ， LinearColorKeyFrame ， SplineColorKeyFrame

 

步骤同上

1:也是先画一个白色的圆角矩形

2:添加一个动画场景.

3:添加3个关键帧,每一帧上元件用不同的颜色

4:我们在到Xmal里,把前两帧SplineColorKeyFrame 分别替换成LinearDoubleKeyFrame和DiscreteDoubleKeyFrame

 

 

Code
<Storyboard x:Name="Storyboard1">
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                
                <LinearColorKeyFrame KeyTime="00:00:01" Value="#FFFFDE00"/>
                <DiscreteColorKeyFrame KeyTime="00:00:02" Value="#FFFF3900"/>
                <SplineColorKeyFrame KeyTime="00:00:06" Value="#FFFF00F9">
                    <SplineColorKeyFrame.KeySpline>
                        <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
                    </SplineColorKeyFrame.KeySpline>
                </SplineColorKeyFrame>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

 

元件由白色呈线性匀速过渡到黄色.

<LinearColorKeyFrame KeyTime="00:00:01" Value="#FFFFDE00"/>

元件由黄色直接跳到红色.

<DiscreteColorKeyFrame KeyTime="00:00:02" Value="#FFFF3900"/>

 

由红色加速过渡到紫色色.
    <SplineColorKeyFrame KeyTime="00:00:06" Value="#FFFF00F9">
     <SplineColorKeyFrame.KeySpline>
      <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
     </SplineColorKeyFrame.KeySpline>
    </SplineColorKeyFrame>

 

colorAnimation demo