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

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