Silverlight中的动画详解(仅常见问题以及疑难杂症)

此文旨在指出在silverlight动画中出现的问题：

一、当设置完动画即(StoryBoard.Begin()或者加载动画完毕后)后无法设置目标对象属性的值。

标题可能有点绕口，看下下面的代码即可明白：

            Storyboard sb = new Storyboard();
            DoubleAnimation animation = new DoubleAnimation();
            animation.Duration = TimeSpan.FromSeconds(2);
            animation.AutoReverse = true;
            animation.From = 100;
            animation.To = 400;
            Storyboard.SetTarget(animation, myRec);
            Storyboard.SetTargetProperty(animation,new PropertyPath("Height"));
            sb.Children.Add(animation);
            sb.Begin();

            myRec.Height = 300;

上边的代码主要是创建一个Double类型的动画，用于修改myRec(一个Rectangle)的Height。关键问题来了，可以看到在sb.Begin()后边手动修改了myRec的Height属性，

悲剧发生了，你会发现我们这个修改是无效的，之所以造成这个情况是因为动画结束后保持了这个新的属性的值，所以导致了不能再其后修改这个属性的值，不过别担心有解

决的办法。

1.修改Animation的FillBehavior为Stop，这样的话就可以保持一个停止的状态，这样在其后修改属性就可以了

2.给StoryBoard添加Complete事件

    sb.Completed += new EventHandler(sb_Completed);

    void sb_Completed(object sender, EventArgs e)
        {
            Storyboard sb = sender as Storyboard;
            sb.Stop();
            myRec.Height = 300;
        }

可以看到在Complete事件中调用了StoryBoard的Stop方法将动画停止，然后给属性赋值。

二、动画的RepeatBehavior属性(重复行为)，用于设置动画的重复的效果，可以设置为Forever(不停的重复),可以设置为重复的次数，也可以设置为在一定时间内进行重复

设置为重复的次数:

<DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="2x"
Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation>

这里设置的是 2x，他的语法就是 num*x,意思就是2次。
后置代码设置方式：

widthAnimation.RepeatBehavior = new RepeatBehavior(2);

设置为一定时间内重复:

<DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="0:0:13"
Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation>

这里设置为13秒内进行重复。

后置代码设置方式：

widthAnimation.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(13));

三、FillBehavior属性和AutoReverse属性混合设置

  FillBehavior默认属性为HoldEnd(完成后保持属性的状态),还有一个Stop(完成后保持初始值)；

 AutoReverse属性默认值为false，即不会原路返回，可以设置为true进行原路返回。

FillBehavior    AutoReverse       

HoldEnd        False                 运行后保持动画后的状态

Stop             Flase                 运行后立马返回初始状态

HoldEnd        True                  运行后会按照原路返回，会忽略HoldEnd的保持

Stop             True                  运行后按照原路返回，和上个效果是一样的

四、BeginTime(动画开始时间)和SpeedRatio(动画速率)

BeginTime用来解决多个动画之间的额并发很有效，可以错开多个动画(同一个父级)同时进行。BeginTime可以用来延迟(如果BeginTime为正数)和执行部分(当为负数的时候则在

Duration-BeginTime时间内执行完毕).

正的BeginTime值使Timeline的行为延长某个时间。例如，BeginTime为5且Duration为5秒的Timeline整个动画是延迟5秒钟，然后才开始动画的执行。

这个例子的BeginTime为5，动画Duration为5，则动画会延迟5秒钟开始。

<DoubleAnimation Duration="0:0:5"  BeginTime="0:0:5" From="100"  To="300" Storyboard.TargetName="myRec" Storyboard.TargetProperty="Width"></DoubleAnimation>

负的 BeginTime 值使 Timeline(Animation基类) 的行为如同在过去某个时间开始一样。 例如，BeginTime 为 - 2.5 秒且 Duration 为 5 秒的 Timeline 将看起来像是一开始就已完成了一半。

这个例子中的BeginTime为 -2.5,那么整个动画持续时间只有 2.5秒，并且看起来像是一开始就完成了一半。

<ColorAnimation Duration="0:0:5" BeginTime="-0:0:2.5" From="Red" To="Green" Storyboard.TargetName="myRec" Storyboard.TargetProperty="(Fill).(Color)"></ColorAnimation>

时间线的 BeginTime 属性决定时间线的活动期的开始时间。 如果该时间线具有一个父时间线，则 BeginTime 属性决定在其父时间线(ParallelTimeline此类在WPF中提供在Silverlight原生dll中并未发现，定义可以包含子 Timeline 对象的时间段。 这些子时间线将按各自的 BeginTime 属性变为活动状态。 此外，子时间线也可相互重叠（并行运行）。)启动后，该时间线需要多长时间才能启动。

这个例子中ParallelTimeline的BeginTime为5秒，动画的Begin为5秒，那么整个动画将会延迟10秒

<ParallelTimeline BeginTime="0:0:5">
            <DoubleAnimation Storyboard.TargetName="DelayedAnimationWithDelayedParentRectangle"Storyboard.TargetProperty="Width"BeginTime="0:0:5"From="100"To="600"Duration="0:0:5"/>
            </ParallelTimeline>

SpeedRatio支持动画加速执行，但是这个SpeedRatio不会影响BeginTime，因为动画还是在BeginTime之后执行的。

虽然速率是2，但是整个动画还是在BeginTime5秒之后执行的，因为这个速率仅仅对动画有效，仅仅是BeginTime之后动画的速率。

<DoubleAnimation Duration="0:0:5"  SpeedRatio="2"  BeginTime="0:0:5" From="100"  To="300" Storyboard.TargetName="myRec" Storyboard.TargetProperty="Width"></DoubleAnimation>

五、StoryBoard对象

StoryBoard不再过多介绍是干嘛，在此主要介绍其的一些方法

Begin开始动画, Pause (Storyboard)停止动画, Resume继续播放StoryBoard的动画, Seek将StoryBoard移动到指定的时间点,Stop (Storyboard)停止动画.

以上的方法除了Seek之外，其他方法均为直接使用StoryBoard对象调用，看下Seek的调用方法。

  sb.Seek(TimeSpan.FromSeconds(3));

这种方式直接将动画定位到3秒的位置。

fadeStoryboard.Seek(
TimeSpan.FromSeconds(fadeAnimation.Duration.TimeSpan.TotalSeconds/2));

将动画指定到中间的位置(其中的fadeAnimation为Animation)。

六、Duration，这个属性竟然也有用错的时候，该属性就是表示一个动画执行过程的时间，格式就是 0:0:0这样的格式，本人在实例过程中由于偷懒仅仅写了一个10，导致动画怎么着也不会执行，最后才发现是Duration的格式错误引起的。

七、关键帧动画(之前说的几乎都是插值动画的用法，下面介绍复杂的动画关键帧动画，关键帧动画是可以实现更为真实的动画，包括加速度和减速度)，线性插值动画是在两个属性值之间进行你给渐变,而一个关键帧动画是可以在任意多个的目标属性值之间进行渐变(这里的意思是线性插值动画通过指定From和To以及By属性让动画在一定的时间内完成动画的，而关键帧动画是通过Value让动画在某一个时间点达到某一个属性的一个值)

关键帧动画元素的名称就是在线性动画的名称后面加上UsingkeyFrames,分别为:

     DoubleAnimationUsingkeyFrames(Doubel关键帧动画)

     ColorAnimationUsingKeyFrames(Color关键帧动画)

     PointAnimationUsingKeyFrames(Point关键帧动画)

以上三种关键帧动画都支持三种不同的关键帧补间类型,分别为Linear(线性),Discrete(离散),Splined(多键),三种格式的作用见下表.

名称	格式	描述
Linear	Linear 类型 KeyFrame	可以使目标属性的值在持续时间内产生固定频率的渐变,其属性值会时时的被反映出来
Discrete	Discrete 类型 KeyFrame	可以使目标属性的值从一个值直接跳到下一个值,这个过程不产生渐变效果,只会显示一个结果.
Splined	Splined 类型 KeyFrame	可以使目标属性值产生精确的渐变,通过keySpline属性可以模拟更真实的动画

关键帧动画包含两个重要的属性KeyTime属性和Value属性,作用是在KeyTime属性指定的某个时间点对目标的Value进行控制,即KeyTime就是指定在何时达到这个关键帧的Value,切记这里的KeyTime表示的不是这个动画持续多长时间,而是在这个时间点显示的效果是Value,这点和线性插值动画动画中的Duration是不同的(Duration表示这个动画持续多长时间),当然这也是因为线性插值动画在一个动画中是不能有多个动画的,所以其Duration的本质应和KeyTime一致,由于在关键帧中一个动画可以包含多个效果,所以就产生了某一时刻对应的动画.

        <Storyboard x:Name="myStory1">
           <!—Linear方式 -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myEllipse1"
              Storyboard.TargetProperty=" (UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                <LinearDoubleKeyFrame Value="500" KeyTime="00:00:02"></LinearDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="myStory2">
            <!—Discrete方式 -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myEllipse2"   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">

                <DiscreteDoubleKeyFrame Value="500" KeyTime="00:00:2.5"></DiscreteDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

这个是难点，这里的Spline比上两个多了一个属性就是KeySpline(获取或设置定义此关键帧的动画进度的两个控制点,两个控制点，用来指定定义关键帧进度的三次方贝塞尔曲线。在描述关键样条时，贝塞尔曲线的起点始终为 0，终点始终为 1，这也就是只定义两个控制点的原因。 所生成的曲线指定如何在一个时间段内内插动画；也就是说，该曲线表示该时间段内动画的目标属性的变化速率。)

 <Storyboard x:Name="myStory3">

                <!—Splin方式 -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myEllipse3" BeginTime="00:00:00"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:4.5" KeySpline="0,0 1,0" Value="500"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

使用了多个LinearColorKeyFrame进行颜色的渐变

<Storyboard>
  <!--使用ColorAnimationUsingKeyFrames-->
 <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="myEllipse" 
Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">
<LinearColorKeyFrame  Value="Yellow" KeyTime="00:00:1"></LinearColorKeyFrame>
<LinearColorKeyFrame  Value="Red" KeyTime="00:00:2"></LinearColorKeyFrame>
 <LinearColorKeyFrame  Value="Green" KeyTime="00:00:4"></LinearColorKeyFrame>
</ColorAnimationUsingKeyFrames>
</Storyboard

使用了多个LinearPointKeyFrame  进行坐标的变化

<Storyboard>
<PointAnimationUsingKeyFrames Storyboard.TargetName="myEllipse1"    Storyboard.TargetProperty="Center" AutoReverse="True">
<LinearPointKeyFrame  Value="50,50" KeyTime="0:0:0"></LinearPointKeyFrame>
<LinearPointKeyFrame  Value="250,230" KeyTime="0:0:2"></LinearPointKeyFrame>
<LinearPointKeyFrame  Value="450,50" KeyTime="0:0:4"></LinearPointKeyFrame>
 <LinearPointKeyFrame   Value="650,230" KeyTime="0:0:6"></LinearPointKeyFrame>
<LinearPointKeyFrame  Value="900,50" KeyTime="0:0:8"></LinearPointKeyFrame>
 </PointAnimationUsingKeyFrames>
</Storyboard>

除了上述的三种关键帧动画支持的类型之外还有一种EasingPointKeyFrame(EasingDoubleKeyFrame,EasingColorKeyFrame)，就是他，是不是很熟悉呢

没错就是使用了Ease效果的关键帧动画，看个用法。

  <DoubleAnimationUsingKeyFrames>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="12">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase></BackEase>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>

他们是不能单独使用的，需要配合DoubleAnimationUsingKeyFrames或者ColorAnimationUsingKeyFrames或者PointAnimationUsingKeyFrames来使用，可以指定KeyTime以及Value和最重要的EasingFunction,EasingFunction用法和Ease的用法一样，详情可参见本博客其他文章.