iH5中级教程:活动必备,实现H5的倒计时

2024-10-14 10:21:00

1、添加媒体素材1.选中舞台,点击页面工具,新建一个页面,右键重命名为倒计时。然后再点击图片工具,上传倒计时结束后会出现的图片对象“漫画”。由于倒计时结束后会显示漫画和内容为“少侠,您的时间到了!”的中文字体,所以为了让中文字体和漫画同时显示,可以选中“漫画”对象,点击中文字体工具,添加中文字体,使中文字体成为“漫画”对象的子对象,继承“漫画”对象的属性和动作。2.选中“倒计时”页面,在页面下添加内容为“您的游戏时间还有”的中文字体。文字内容在自行制作时可以自行决定。

iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时

3、制作倒计时效果1.选中“倒计时”页面,添加一个时间轴,为了方便识别将其重命名为“计时时间轴”。选中“计时时间轴”,在左边的属性面板中设置这个时间轴自动播放,总时长设置为1秒并设置循环播放。2.选中“计时时间轴”这个时间轴,在这个时间轴下添加一个事件。触发条件为结束,目标对象是第二步中的计数器,目标动作为减1。这样设置的原理是时间轴每播放1秒结束后,让计数器减1,由于时间轴循环播放,所以计数器每一秒会减1,出现倒计时的效果。3.在计数器下添加一个事件,触发条件为等于,值为0,目标对象是“计时时间轴”,目标动作为暂停。即当计数器每秒减1,直至减到等于0时,时间轴停止播放。这个事件可以“防止时间轴继续循环播放,计数器继续减1从而变成负数”的情况。

iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时

4、制作出现的动画效果1.选择“漫画”对象,在“漫画”对象下添加一个动效,时长设置为1秒,动效类型为放大出现,自动播放设置为NO。注意:动效的自动播放默认为YES,即默认状态下打开案例动效会自动播放。由于本案例中的图片需要倒计时结束后出现,所以要将动效的自动播放设置为NO,不允许它自动播放。2.选中计数器,在计数器下添加一个事件,触发条件为等于,值为0,目标对象是“漫画”对象下的动效1,目标动作为开始。当倒计时结束之后,即计数器等于0,动效开始播放,那么动画效果就实现了。

iH5中级教程:活动必备,实现H5的倒计时

5、快速数字变化步骤:第一步:添加媒体素材1.选中舞台,新建一个页面,重命名为数值动态增加。然后再选中这个页面,页面下添加内容“%”、“百分比”的字体,移动到合适的位置。2.选中“数值动态增加”页面,上传一张有镂空圆且与舞台一样大的图片。为了让文字更明显,我们可以把前面的文字和后面所有的文字和计数器都设置成白色。

iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时iH5中级教程:活动必备,实现H5的倒计时

8、重点工具:计数器、时间轴、事件TIPS:1.计时时间轴下的减1或加1事件。这个加1或减1的事件,目标对象必须是需要发生变化的计数器时才会出现加1或减1的事件。要做倒计时或快速数字变化,这个事件都必须添加在时间轴下,而且这个时间轴是自动播放且循环播放的。如果是要做倒计时,则设置时间轴的时长为1秒;如果要做快速数字变化,则可以设置较短的时间轴时长,例如本案例中的0.02秒。2.计数器下的当计数器等于0或等于某个到达值的事件。这个事件添加在计数器下,由于时间轴在自动播放且循环播放,所以为了避免倒计时的计数器出现负数或快速数字变化超过设定的值,我们需要添加这个事件。计数器下的这个事件的触发条件是等于,当计数器等于某个我们设置的值时,时间轴暂停播放。重点事件:触发对象:计时时间轴触发条件:结束目标对象:计数器目标动作:减1触发对象:计数器触发条件:等于值:0目标对象:计时时间轴目标动作:暂停

猜你喜欢