Silverlight 动画(animation)基础之三 故事扳(storyboard) (续)转载

原文地址：

http://hi.baidu.com/mldark/blog/item/e0bc74188bb51b6ddbb4bdd7.html

在上一章中介绍了线性插值动画时间控制 在这一章介绍关键帧  那么什么是关键帧  可以想象我们经常用电脑里播放器播放影片那个进度线 它的每一秒都是帧  比如说 一个小时时间长度 你希望在什么时间段编剧本到什么时间段结束  和线性插值不同是它主要是容易控制整个时间  另一种编剧本方式 

不过和线性插值一样只是名称后缀加上UsingKeyFrames 就是关键帧插值

DoubleAnimationUsingKeyFrames

ColorAnimationUsingKeyFrames

PointAnimationUsingKeyFrames   这些跟线性插值相同的作用

另外还有一个就是ObjectAnimationUsingKeyFrames 不过一会介绍这个作用

首先除了ObjectAnimationUsingKeyFrames之外都支持三种关键帧补间类型 分别有线性(linear)  离散(Discrete)  多键(Splined)

ObjectAnimationUsingkeyFrames只支持离散(Discrete)   那么它们有什么作用

用xaml代码介绍它们 容易理解

线性(linear) 它的作用是数值连续

        <Storyboard x:Name="story" Storyboard.TargetName="rectangle1">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="Width" >
                <LinearDoubleKeyFrame KeyTime="0:0:10" Value="300"/>
                <LinearDoubleKeyFrame KeyTime="0:0:20" Value="400"/>
           </DoubleAnimationUsingKeyFrames>
        </Storyboard>

上面xaml红色代码第一行的意思是10秒到达宽度的值300 和线性插值基本上一样的 第二行就是20秒 到达宽度的值400  不是说先用10秒到达300 再用20秒到达400  是说共用20秒到达400  它的其中10秒包含第一行时间段 

线性最简单理解就是1 2 3 4 5 6 7 8.....................连续增加或者减少

离散(Discrete)  它的作用是直接跳到指定的值 它的中间没有连续 比如说从0 跳到10  跳到20 中间没有连续的值

        <Storyboard x:Name="story" Storyboard.TargetName="rectangle1">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="Width" >
                <DiscreteDoubleKeyFrame  KeyTime="0:0:10" Value="300"/>
                <DiscreteDoubleKeyFrame KeyTime="0:0:20" Value="400"/>
           </DoubleAnimationUsingKeyFrames>
        </Storyboard>

上面的红色代码 指定10秒跳到300 然后再过10秒跳到400  整个时间是20秒 不是30秒

多键(Splined)  这个很复杂多 它是类似线性和离散混合体  可以前半段连续 后半段跳到 这个很难理解

它提供一个叫贝塞尔曲线 来控制X1 X2 Y1 Y2 变速

xaml代码

     <UserControl.Resources>
        <Storyboard x:Name="story" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tr" Storyboard.TargetProperty="X"  >
                <SplineDoubleKeyFrame KeyTime="0:0:10" Value="50" KeySpline="0.07,1,0.1,0"/>
              </DoubleAnimationUsingKeyFrames>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tr" Storyboard.TargetProperty="Y">
        <SplineDoubleKeyFrame  KeyTime="0:0:10" Value="50" KeySpline="1,0,0.73,0.28" ></SplineDoubleKeyFrame>
       </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
        <Rectangle Height="100"  HorizontalAlignment="Left"  Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200" Fill="#FF0032FF" >
                <Rectangle.RenderTransform>
                    <TranslateTransform Y="0"  X="0" x:Name="tr"></TranslateTransform>
                </Rectangle.RenderTransform>

            </Rectangle>
        </Canvas>
    </Grid>

贝塞尔曲线图解

微软提供blend工具来辅助编写这些剧本控制  相当于flash工具   关于blend工具过段时间介绍讲解

另外还有Silverlight4新增一个EasingDoubleKeyFrame的补间关键帧 关于这个说明 上一章在EasingFunction属性已经介绍和演示过了

xaml代码   

 <Storyboard x:Name="story" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tr" Storyboard.TargetProperty="X"  >
             <EasingDoubleKeyFrame KeyTime="0:0:3" Value="50">
              <EasingDoubleKeyFrame.EasingFunction>
               <BackEase EasingMode="EaseInOut"/>
              </EasingDoubleKeyFrame.EasingFunction>
             </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

ObjectAnimationUsingKeyFrames 关键帧插值就是除了double Color Point之外的类型的值 比如 渐变这样复杂对象 不能转换简单类型 所以用Object可以存储此对象元素

         <Storyboard x:Name="story" >
            <ObjectAnimationUsingKeyFrames  Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Fill"  >
             
                <DiscreteObjectKeyFrame KeyTime="0:0:5" >
                 <DiscreteObjectKeyFrame.Value>
                 <LinearGradientBrush>
                       <LinearGradientBrush.GradientStops>
                        <GradientStop Color="Red" Offset="0.1"></GradientStop>               
                    <GradientStop Color="Black" Offset="0.5"></GradientStop>
                 <GradientStop Color="Blue" Offset="1"/>      
       </LinearGradientBrush.GradientStops>      
     </LinearGradientBrush>     
     </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>