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

iH5中级教程活动必备,实现H5的倒计时iH5中级教程：活动必备，实现H5的倒计时 1.倒计时制作步骤： 第一步：添加媒体素材 1.选中舞台，点击页面工具后再点击图片工具，新建一个页面，右键重命名为倒计时。然，上传倒计时结束后会出现的图片对象“漫画”。由于倒，所计时结束后会显示漫画和内容为“少侠，您的时间到了！”的中文字体以为了让中文字体和漫画同时显示，可以选中“漫画”对象，点击中文字体工具，添加中文字体，使中文字体成为“漫画”对象的子对象，继承“漫画”对象的属性和动作。 2.选中“倒计时”页面，在页面下添加内容为“您的游戏时间还有”的中文字体。文字内容在自行制作时可以自行决定。 第二步：设置用于倒计时的计数器 1.添加显示倒计时用的计数器。选中“倒计时”页面，添加一个计数器。 ， 2、并选中计数器，找到舞台左边的计数器属性面板，将初始值设置为5，把最小值设置为0。 2.在计数器下添加内容为“秒”的中文字体。 第三步：制作倒计时效果 1.选中“倒计时”页面，添加一个时间轴，为了方便识别将其重命名为“计时时间轴”。选中“计时时间轴”，在左边的属性面板中设置这个时间轴自动播放，总时长设置为1秒并设置循环播放。 2.选中“计时时间轴”这个时间轴，在这个时间轴下添加一个事件。触发条件为结束，目标对象是第二步中的计数器，目标动作为减1。这样设置的原理是时间轴每播放1秒结束后，让计数器减1，由于时间轴循环播放，所以计数器每一秒会减1，出现倒计时的效果。 3.在计数器下添加一个事件，触发条件为等于，值为0，目标对象是“计时时间轴”，目标动作为暂停。即当计数器每秒减1，直至减到等于0时，时间轴停止播放。这个事件可以“防止时间轴继续循环播放，计数器继续减1从而变成负数”的情况。 第四步：制作出现的动画效果 1.选择“漫画”对象，在“漫画”对象下添加一个动效秒，动效类型为放大出现，自动播放设置为NO。 注意：动效的自动播放默认为YES，即默认状态下打开案例动效会自动播放。由于本案例中的图片需要倒计时结束后出现，所以要将动效的自动播放设置为NO，不允许它自动播放。 ，时长设置为12.选中计数器，在计数器下添加一个事件，触发条件为等于，值为0，目标对象是“漫画”对象下的动效1，目标动作为开始。当倒计时结束之后，即计数器等于0，动效开始播放，那么动画效果就实现了。 2.快速数字变化步骤： 第一步：添加媒体素材 1.选中舞台，新建一个页面，重命名为数值动态增加。然后再选中这个页面，页面下添加内容“%”、“百分比”的字体，移动到合适的位置。 2.选中“数值动态增加”页面，上传一张有镂空圆且与舞台一样大的图片为了让文字更明显，我们可以把前面的文字和后面所有的文字和计数器都设置成白色。 。第二步：制作快速增加的数值变化效果。 1.选中“数值动态增加”页面，在页面下添加一个计数器。选中计数器后在舞台左边的属性面板中，适当调整一下计数器的样式和大小，再把最大值设置为85。 2.在页面下添加一个时间轴，重命名为计时器。将其设置为自动播放，将时长设置为0.02秒并设置循环播放。 3.在“计时器”时间轴下添加一个事件，触发条件为结束，目标对象为这个页面里的计数器1，目标动作为加1。即案例播放时，“计时器”时间轴自动播放且循环播放，每播放结束一次，计数器实现加1的。 4.在计数器下添加一个事件，触发条件为等于，值为85，目标对象是“计时器”时间轴对象，目标动作为暂停。即当计数器不断加1，直至加到85时，时间轴停止播放。这个事件可以防止“时间轴继续循环播放，计数器显示的数值不断增加”的情况。 第三步：制作增加的进度条都动态效果 1.因为前面已经上传了带有镂空圆条的图片，所以只需要制作逐渐增加的进度条效果。选中“数值动态增加”页面，添加一个时间轴播放，时长为2.5秒，将其拖动到镂空圆条图片上一层。 ，设置时间轴自动2.选中时间轴，添加2个透明按钮，填充颜色后，为其添加轨迹。通过关键帧的设置动画使色块随着这个镂空圆条逐渐填充。两个色块的关键帧设置是通过位置和宽高的变化设置而成的。 本案例中，色块1的关键帧1在0秒，它的属性中坐标是，宽为25px，高为0px；关键帧2在0.6秒，坐标是，宽为153px，高为137px；关键帧3在1.2秒，坐标是，宽是153px，高为279px。 色块2的关键帧1在1.2秒，坐标是，宽是21px，高是28px；关键帧2在1.8秒，坐标是，宽是149px，高是143px；关键帧3在2.5秒，坐标是，宽是149px，高是219px。 可以自行设置进度条播放那个的时间和关键帧的色块变化，但是注意要和前面的计数器进度相配合。 3.在时间轴下添加一个事件，触发条件是结束，目标对象是计时器，目标动作是暂停。防止出现“进度条播放结束后，表示进度数字的计数器还在增加”的情况。 4.将镂空圆条图片拖到时间轴的上一层，把色块其他不显示的地方挡住。 重点工具：计数器、时间轴、事件 TIPS: 1.计时时间轴下的减1或加1事件。 这个加1或减1的事件，目标对象必须是需要发生变化的计数器时才会出现加1或减1的事件。要做倒计时或快速数字变化，这个事件都必须添加在时间轴下，而且这个时间轴是自动播放且循环播放的。 如果是要做倒计时，则设置时间轴的时长为1秒；如果要做快速数字变化，则可以设置较短的时间轴时长，例如本案例中的0.02秒。 2.计数器下的当计数器等于0或等于某个到达值的事件。 这个事件添加在计数器下，由于时间轴在自动播放且循环播放，所以为了避免倒计时的计数器出现负数或快速数字变化超过设定的值，我们需要添加这个事件。计数器下的这个事件的触发条件是等于，当计数器等于某个我们设置的值时，时间轴暂停播放。 重点事件： 触发对象：计时时间轴 触发条件：结束 目标对象：计数器 目标动作：减1 触发对象：计数器 触发条件：等于 值：0 目标对象：计时时间轴 目标动作：暂停