原文地址：
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>
