Blend制作动画

在Blend中，有两种WorkSpace：Design和Animation。

Design是默认的，也是最常用的。

设计动画时最好切换到Animation。切换的快捷键是F6。

 

点+号创建一个StoryBoard，起一个名字，确定后，XAML中该StoryBoard会作为该页面的资源。

 

点击这个像一个椭圆小蛋右下角一个加号的按钮（record keyframe button），会在当前的时间点添加一个keyframe。第一个keyframe不必一定在0秒，可以拖动黄线上面的倒三角来移动黄线，也可以直接输入来修改时间。下面红色标出来的100%，可以直接输入修改，可以调节时间轴的精度。

开始录制后，ArtBoard的边框变成红色。右上角有个圆钮，可以toggle录制状态。

 

这时候你可以将控件拖拖拽拽、改个颜色之类的，修改后的状态表示在当前时间点（黄线标注处）的状态。关键帧动画就是从一个关键帧过渡到另一个关键帧，在一个storyboard里可以在不同时间点上设置不同的关键帧。

 

当创建好一个storyboard后如何选中它呢，方法是单击下图中红框的位置。

 

选中后的storyboard可以在属性面板上进行设置：

AutoReverse表示自动返回到原状态。

RepeatBehavior用于设置重复多长时间，这个下拉框里可以输入多种格式：

Nx 表示重复N遍，这个N可以随意写，也可以永远重复下去。

还可以写成 days.hours:minutes:seconds.fractionalSeconds 的格式，其中days和fractionalSeconds是可选的。

 

上面这些工作完成后，在代码中加入启动动画的操作：

Storyboard storyboard = (Storyboard)this.Resources["AnimateCircle"];
storyboard.Begin();

 

在keyframe动画里，任何变化都可以是变速的。选中一个keyframe之后，会在属性面板看到下面的Easing界面。

Easing是缓和、缓冲的意思，不是easy，但这里理解成easy倒也歪打正着，因为它的确让你的工作变得更容易，在EasingFunction里内置了很多已有的效果。

KeySpline的平滑曲线可以这样理解：X表示时间，Y表示位置（总变化过程中的百分比），上图如果用于一个transform动画，就是对象“慢-快-慢”的一个移动效果。

Hold In是取消掉该关键帧之前所有的easing效果，造成一种间断的跳跃式的效果，例如对象瞬间移动，颜色突然变化，没有过渡。

拿变色动画举例：

如果是用KeySpline，在XAML里关键帧就叫SplineColorKeyFrame。

如果是用Easing Function，在XAML里关键帧就叫EasingColorKeyFrame。

如果是用Hold In，在XAML里关键帧就叫DiscreteColorKeyFrame。

 

 

最后要注意的是，在Object And Timeline的object面板中，一个storyboard是可以树状展开的。展开后每个keyframe都对应timeline上的一个小蛋，这些小蛋可以沿时间轴拖动。

注意object面板上没有垂直滚动条，在timeline面板的右侧。

object面板每个对象右侧有眼睛按钮，用来toggle该对象在设计时是否可见，锁按钮用来toggle在设计时是否可改动。