昨天小C说要做一个进度条,让我教她
她要网上的效果如下:点击"GO",然后上面一个进度条就开始倒计时,进度条逐渐减少
所以今天,我决定做一个教程分享
那么这种效果怎么实现呢?这就需要用到【触发器】功能
什么是【触发器】呢?
触发器效果:当我们点击一个对象的时候,会弹出来另一张对象的效果。【触发器】点击之后触发的是本页的动画效果,但这一动画效果又和普通动画有所不同。普通动画只能一个接一个的播放,而触发器动画走的是特定流程,只有触发器被点击,动画效果才会出现。
如果你只是在页面空白处点鼠标,这样只能播放普通动画,触发器动画一点反应都没有。
触发器动画的设置的流程是:先做动画,再做触发。
话不多说,我们直接来讲类似上面这种倒计时进度条怎么做~
操作步骤
第一步:首先做出一个进度条。插入一个圆角矩形,自行设置【边框】的颜色和粗细,把【填充】设置为【无填充】
接着复制这个矩形,【边框】设置为【无轮廓】,填充成自己想要的颜色
第二步:让第二个矩形与上一个矩形重合。点击【动画】-【添加动画】-【退出】-【擦除】,【效果选项】选择【自左侧】。持续时间设置成自己需要的时间,这里我设置为5秒
第三步:最后插入我们需要的文字。点击黄色进度条,点击【触发】-【单击】-【文本框4】(GO对应的那个文本框。(因为我们是要通过点击"GO"让进度条动起来,这里"GO"就是我们的触发器。)
Tips:用作触发器的"按钮"对应的是列表中的哪一个对象,必须要弄清楚哦~
好啦
播放下试试吧~
1.《(页面倒计时如何实现)页面倒计时怎么弄?》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《(页面倒计时如何实现)页面倒计时怎么弄?》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/keji/3217640.html