;

洛书笺】提问: 我看了很久,触发器这个组件到底怎么用呢?萌新求解答

新人求问!触发器到底怎么用,我觉得它的属性很简单,看不出来要在什么情况下怎么使用。


3 个回答

kawaii君

触发器的图标是一个沙漏,所以可以通俗地把它理解为沙漏。使用触发器前,可以看到它的主要属性就是播放次数、时间间隔和自动播放。播放次数就是你翻转沙漏的次数,时间间隔是沙漏倒流的时间,自动播放决定了沙漏是否自动进行翻转。

那这个沙漏究竟怎么用呢?这就牵涉到“触发”。实际上,触发器需要结合事件使用,下面来分享一下触发器的两种使用场景。


场景一:定时触发

触发器可以在触发后进行定时执行的操作。

举个栗子,有些H5需要用户点击触发后隔一段时间才翻页(例如测试题),以往会采用动效或者时间轴去设定一个时间间隔,让页面的过渡更自然。现在则可以使用触发器去完成这类型的操作了。
image.png

另外,如果把触发器设为自动播放,实际上这个沙漏就会自动翻转,自动开始触发。因此也可以实现自动翻页的效果。


自动翻页.gif

场景二:简单的逐帧动画效果

在制作动画的过程中,我们可能有一些简单的动画需求,例如时钟秒针的跳动(注意是跳动)。它的简单在于效果简单,只需要过一会儿旋转一下就行,但如果用关键帧动画完成,就显得很繁琐,因为这需要设置较多关键帧。
实际上,使用触发器就可以是实现,逻辑也很简单,就是每过1秒旋转一定的度数(度数通常为360度/60秒=6度)。
2.gif
触发器的时间间隔:

image.png

目标动作可选为变换状态、设置属性等事件:
image.png


场景三:实时控制对象变化


触发器还有一个很有趣的地方,就是它默认的触发时间间隔是“每一帧”。“每一帧”可以理解为每一个设备刷新一次显示内容的时间,不同设备的时长不一,普遍为1/40至1/60秒。以这种速度做逐帧动画,肉眼看上去,动画效果是连贯的。所以,在刚才的时钟秒针跳动效果中,把触发器时间间隔改为默认的“每一帧”,这个秒针的转动就是连贯的(当然也整体动画时长也快了很多)。所以这个“每一帧”的触发时间间隔,是肉眼可见的连贯的变化。

image.png

Untitled.gif


而且由于控制触发器触发可以通过多种事件实现,例如点击、长按、手指按下手指松开等等,这时候就可以制作成近似于滑动时间轴的滑动控制动画了。

image.png

矩形属性设置

image.png

事件设置

0630.gif

最后提醒一下,触发器是很灵活的,作为触发对象,它只有“触发”这个触发条件,但作为目标动作,它还可以播放、暂停、重置,因此十分适合作为用户触发后,作为案例逻辑的中介,希望大家今后可以多多灵活使用触发器。


上述案例下载地址:

www.ih5.cn/editor3/app/workCopy/5713910

www.ih5.cn/editor3/app/workCopy/5713856

www.ih5.cn/editor3/app/workCopy/5738433

tande2

试试,触发器下加事件,触发 ,计数器加1 。  更像是一个循环时间轴结束触发计数器加1 。

泽雨点石

image.pngimage.png

如果像上图那样设置的话,表示每一秒触发一次,然后执行让透明按钮交替显示的动作。

相当于每隔多长时间,让触发器去触发什么动作。如果时间间隔为空,播放次数不限,就表示一直触发动作。

image.png

让触发器播放的意思就是让触发器开始启动,去做这样的事(每隔多长时间,触发下面的什么动作)。


学习地图