大家应该都知道,做动画时我们只能对那些属性值表示双精度数值(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文件
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
新建一个动画面板,移动矩形,在时间轴上增加关键帧,3个沿X坐标轴移动的坐标点.默认状态势SplineDoubleKeyFrame关键帧形式。
这时我们再返回看矩形的Xaml 代码,他自动增加了几行。这看似没有任何多余的属性在里,但不能删除,删除当下不会报错,当你重新打开动画面板时会提示Storyboard.TargetName属性找不到。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
我们要测试这3种效果,目前我是在Xaml直接把其他两个SplineDoubleKeyFrame关键帧形式,修改成LinearDoubleKeyFrame和DiscreteDoubleKeyFrame.(如果哪位大侠知道如何在blend里设计属性里直接找到,忘告之不胜感激)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
AutoReverse:从起点播放到该时间线末尾时是否按相反的顺序播放。
RepeatBehavior:指定时间线将要播放的次数;也可以设置Forever,指定时间线无限重复。默认值是 RepeatBehavior 的 Count 为 1,该值指示时间线播放一次。
Storyboard.TargetName:设置要进行该动画处理的元素的名字x:name。
Storyboard.TargetProperty:设置要进行动画处理的元素的属性。
BeginTime:动画起始时间
From:动画处理的基值。
To:动画处理的目标值。
Duration:动画从基值到目标值过渡的时间。
OK, 我们来测试一下效果吧。
有三种关键帧形式: DiscreteColorKeyFrame , LinearColorKeyFrame , SplineColorKeyFrame
步骤同上
1:也是先画一个白色的圆角矩形
2:添加一个动画场景.
3:添加3个关键帧,每一帧上元件用不同的颜色
4:我们在到Xmal里,把前两帧SplineColorKeyFrame 分别替换成LinearDoubleKeyFrame和DiscreteDoubleKeyFrame
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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>