定时器的使用方法

mugeda

为了提高动画（特别是无代码动画）制作的灵活性，我们最近新增了定时器的功能，本节教程将对定时器的使用做下介绍。

定时器是一个带有定时功能的文本，随定时器时间的变化，文本显示变化的时间，方向分为倒计时和顺计时两种。使用场景可能是游戏计时，或者动画中某物体的某一属性随时间做相应关联变化等等。

下面我们结合截图，演示下如何设置定时器：

定时器属性说明：

长度：是计时长度，单位是秒；

计时方向：有倒计时，顺计时，随机（即有可能是倒计时也可能是顺计时，是随机的）；

精度：决定显示计时数字的精确到的小数位数，如果选秒，精确到整数。选毫秒则精确到小数后三位；

是否循环：是否循环计时；

不可见时：定时器时不可见时，定时器是暂停计时还是继续计时。

下面会通过多个演示动画分别演示这些不同的属性值，同时也演示了定时器的一些使用场景。

定时器使用场景一：定时器最基本的用法就是定时结束后触发一个操作，例如当定时结束时，改变某一物体的高度：

演示动画1预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=16d15b26

演示动画1编辑地址：

http://cn.mugeda.com/animation/edit/16d15b26

首先点击工具条中的定时器按钮把定时器添加到舞台上。命名为t1



然后在舞台上添加一个物体，命名为o1,选中该定时器，设定时方向为倒计时，是否循环为不循环，精度为秒，长度为3秒。设置行为：



编辑行为，播放控制-》改变元素属性-》触发事件选“定时器时间到”



然后点开参数编辑：元素名称选o1,元素属性选高，取值为12。



设置完成后，运行动画时，会发现：当计时器结束后，物体o1的高度就会明显变小。

使用场景二：因为定时器就是一个具有定时功能的文本，使用时可以根据它的文本值的变化来控制动画变化。

演示动画2预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=16d15b26

演示动画2编辑地址：

http://cn.mugeda.com/animation/edit/16d15b26

在舞台上添加一个定时器，设置其属性：精度选毫秒，计时方向选顺记时，是否循环选循环，不可见时暂停计时器，长度填20秒



在舞台上画一个物体，设它的坐标上属性关联，可以参考物体选定时器a，参数属性选文本取值,关联方式为公式，被控制量=20*参考属性。如图：



这样，动画运行时，图形的位置就是随着定时器的文本值变化而变化，并且定时器会循环定时，并且定时器的数值是精确到小数点后三位，即毫秒。

到这里，通过上面两个场景例子，除了“不可见时”属性外，其他不同属性值的效果都已经演示过了，下面再通过一个场景来演示不可见时属性：

场景三：在一些动画中，定时器往往不是一直使用的，而是当动画运行到一定情景时才开始计时，比如一个游戏中，只有到游戏动画进入到开始游戏是计时器才开始计时，而游戏开始前和游戏结束后计时器都是需要停止计时的。这样的效果就是通过“不可见时”属性来实现的。

下面这个演示动画3演示“不可见时”属性设为“暂停记时器”时的效果。

演示动画3预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=faf4e3dc

演示动画3编辑地址：

http://cn.mugeda.com/animation/edit/faf4e3dc

在时间线上新建一个图层1，并在新图层上添加定时器，分别起名为t2，在69帧处插入一个空的关键帧，然后再插入帧到127帧。这样动画运行时就只有在前68帧定时器是可见的，后面58帧都是不可见的。在原来的图层0上添加一个图形，并在127帧处插入帧，这个图层上的物体就一直是可见的。如图：



设置定时器t2的“不可见时”属性为“暂停记时器”

设置图形的“上”属性关联如图：



这样当动画运行时，图形会随着定时器的文本值的变化而改变纵坐标的值。但是进入69帧以后定时器不可见时，定时器不再计时，图形的位置也不再变化。

下面这个演示动画4演示“不可见时”属性设为“继续记时器”时的效果。

演示动画4预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=2fe407ac

演示动画4编辑地址：

http://cn.mugeda.com/animation/edit/2fe407ac

该动画除了把定时器的“不可见时”属性为“继续记时器”之外，其他部分和演示动画3完全相同。

这样当动画运行时，图形会随着定时器的文本值的变化而分别改变纵坐标的值。但是当定时器不可见时，定时器继续计时，图形的位置也会继续变化。

实例动画3、4就演示了定时器的不可见时属性的效果。

定时器的使用是很灵活的，还有可以其他很多使用场景，就不一一举例了，可以结合自己的动画需求去使用。