添加媒体素材

下面我们来学习一下iH5中级教程中的活动必备，实现H5的倒计时功能。首先，我们需要添加媒体素材。选中舞台，点击页面工具，新建一个页面，并将其重命名为"倒计时"。然后，点击图片工具，上传倒计时结束后会出现的图片对象“漫画”。由于倒计时结束后要显示漫画和内容为“少侠，您的时间到了！”的中文字体，所以我们需要让中文字体和漫画同时显示。选中“漫画”对象，点击中文字体工具，添加中文字体，使其成为“漫画”对象的子对象，继承“漫画”对象的属性和动作。

在“倒计时”页面下方添加内容为“您的游戏时间还有”的中文字体。文字内容可以根据自己的需求进行自定义。

设置用于倒计时的计数器

接下来，我们需要设置用于倒计时的计数器。选中“倒计时”页面，添加一个计数器。并找到舞台左边的计数器属性面板，在初始值中设置为5，最小值设置为0。然后，在计数器下方添加内容为“秒”的中文字体。

制作倒计时效果

现在，我们开始制作倒计时效果。选中“倒计时”页面，添加一个时间轴，并将其重命名为“计时时间轴”。在左边的属性面板中，设置时间轴自动播放，总时长设置为1秒并设置循环播放。

选中“计时时间轴”，在这个时间轴下添加一个事件。触发条件为结束，目标对象是第二步中的计数器，目标动作为减1。这样设置的原理是时间轴每播放1秒结束后，让计数器减1。由于时间轴循环播放，所以计数器每一秒会减1，从而实现倒计时的效果。

在计数器下方再添加一个事件，触发条件为等于，值为0，目标对象是“计时时间轴”，目标动作为暂停。这个事件可以防止时间轴继续循环播放，计数器继续减1从而变成负数的情况。

制作出现的动画效果

我们还可以为倒计时结束后的漫画对象添加一个动效，让它在倒计时结束后放大出现。选择“漫画”对象，在其下方添加一个动效，时长设置为1秒，动效类型为放大出现，自动播放设置为NO。注意：动效的自动播放默认为YES，即默认状态下打开案例动效会自动播放。由于本案例中的图片需要倒计时结束后出现，所以要将动效的自动播放设置为NO，不允许它自动播放。

在计数器下方再添加一个事件，触发条件为等于，值为0，目标对象是“漫画”对象下的动效1，目标动作为开始。当倒计时结束之后，即计数器等于0，动效开始播放，从而实现动画效果。

快速数字变化步骤

首先，我们需要添加媒体素材。选中舞台，新建一个页面，并将其重命名为"数值动态增加"。然后，在页面下方添加内容为"%"和"百分比"的字体，并将其移动到合适的位置。

选中“数值动态增加”页面，上传一张带有镂空圆且与舞台大小相同的图片。为了让文字更明显，我们可以将前面的文字和后面所有的文字以及计数器都设置成白色。

接下来，我们开始制作快速增加的数值变化效果。选中“数值动态增加”页面，在页面下方添加一个计数器。在舞台左边的属性面板中，适当调整计数器的样式和大小，并将最大值设置为85。

在页面下方再添加一个时间轴，并将其重命名为“计时器”。将时间轴设置为自动播放，时长设置为0.02秒并设置循环播放。

在“计时器”时间轴下添加一个事件，触发条件为结束，目标对象为这个页面里的计数器1，目标动作为加1。即案例播放时，“计时器”时间轴会自动播放且循环播放，每次播放结束后，计数器就会加1。

在计数器下方再添加一个事件，触发条件为等于，值为85，目标对象是“计时器”时间轴对象，目标动作为暂停。即当计数器不断加1，直至加到85时，时间轴停止播放。这个事件可以防止“时间轴继续循环播放，计数器显示的数值不断增加”的情况。

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

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

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

在时间轴下方添加一个事件，触发条件为结束，目标对象是计时器，目标动作为暂停。这样可以防止进度条播放结束后，表示进度数字的计数器还在增加的情况。

将镂空圆条

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。