h5倒计时弹窗_iH5中级教程：活动必备，实现H5的倒计时

制作增加的进度条都动态效果

1.因为前面已经上传了带有镂空圆条的图片，所以只需要制作逐渐增加的进度条效果。选中“数值动态增加”页面，添加一个时间轴，设置时间轴自动播放，时长为2.5秒，将其拖动到镂空圆条图片上一层。

2.选中时间轴，添加2个透明按钮，填充颜色后，为其添加轨迹。通过关键帧的设置动画使色块随着这个镂空圆条逐渐填充。两个色块的关键帧设置是通过位置和宽高的变化设置而成的。

本案例中，色块1的关键帧1在0秒，它的属性中坐标是(318,511)，宽为25px，高为0px；关键帧2在0.6秒，坐标是(176,406)，宽为153px，高为137px；关键帧3在1.2秒，坐标是(176,266)，宽是153px，高为279px。

色块2的关键帧1在1.2秒，坐标是(323,265)，宽是21px，高是28px；关键帧2在1.8秒，坐标是(323,265)，宽是149px，高是143px；关键帧3在2.5秒，坐标是(323,266)，宽是149px，高是219px。

可以自行设置进度条播放那个的时间和关键帧的色块变化，但是注意要和前面的计数器进度相配合。

3.在时间轴下添加一个事件，触发条件是结束，目标对象是计时器，目标动作是暂停。防止出现“进度条播放结束后，表示进度数字的计数器还在增加”的情况。

4.将镂空圆条图片拖到时间轴的上一层，把色块其他不显示的地方挡住。