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

大家应该都知道,做动画时我们只能对那些属性值表示双精度数值(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>

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

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

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

colorAnimation demo

转载于:https://www.cnblogs.com/shmily20071030/archive/2008/07/31/1255656.html