【Axure教程】循环弹幕

253 篇文章 25 订阅
69 篇文章 4 订阅

​Hello,今天教大家在Axure里面制作循环弹幕的效果。效果主要包括了弹幕的移动和自动循环。

【原型预览】

https://axhub.im/ax9/95133077f4eccba4/#g=1

【原型下载】

方式1:加入原型分享群,可免费分享该原型,请咨询微信522073109

方式2:https://weidian.com/item.html?itemID=4379496539

【原型效果】

【制作教程】

一、思路讲解

在制作之前,作者尝试了几种方式的制作方法,所以和大家一一分享一下。

1. 用多个动态面板制作

这种方法的优势是及其简单,我们只需要在各个动态面板里面添加文字,然后设置自动循环的事件,让动态面板的状态为next循环,并且加一个向左滑动的效果。

但是如果仅通过动态面板的滑动动画会存在缺点,因为它的滑动不是匀速的,在面板状态更换时会停下来1s左右。

2. 用移动事件制作

如果用移动事件来制作的话就可以避免上述的问题,但是做起来会比动态面板制作的复杂,思路是通过设置两个弹幕组,通过设置动态面板尺寸,只显示一个弹幕组的位置,然后弹幕组同时移动,当第一个弹幕组移出动态面板左边的位置时,将他瞬间移动到最右边继续移动,两个弹幕组不断循环。

那下面我们开始教学:

二、材料准备

动态面板*1——调整动态面板适当大小,并且取消勾选自动调整为内容尺寸。

文本标签*N——新建多个文本标签,填写弹幕文字,调整颜色、大小、位置;将其分成两个弹幕组合1和2,第一个组合放置在动态面板内部,第二个组合放置在动态面板右边。因为一开是没有弹幕,所以弹幕组合1一开始是隐藏的。

文本标签*2——这里用两个标签作为触发事件,后续会详细介绍,默认隐藏。

三、交互设置

1. 弹幕组合2的交互

移动——将弹幕组合2向右移动到-this.width的位置,就是整个组合移出了动态面板的左边,这里设置动画时间为20000ms,大家可以根据实际来设定移动速度。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互,所以等待20000ms。

触发——触发循环事件2鼠标单击时,用于不断循环,后面讲到循环事件的交互时会细说。

2. 弹幕组合1的交互

隐藏——因为弹幕组合1是位于动态面板的里,一开是没有弹幕,所以将他隐藏。

移动——将弹幕组合1向右移动到-this.width的位置,就是整个组合移出了动态面板的左边,这里设置动画时间为组合2的一半,因为是一半距离,即10000ms,大家可以根据实际来设定移动速度。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互。

显示——显示当前元件。

触发——触发循环事件1鼠标单击时,用于不断循环,后面讲到循环事件的交互时会细说。

3. 循环事件1的交互

移动——将弹幕组合1移动到动态面板的右面边缘的位置,LVAR1.width就是动态面板的宽度,这里注意我们是瞬间移动的,所以不需要加时间。

移动——瞬间移动完之后,我们继续将弹幕组合1向右移动到-target.width的位置,并且设置动画时间为20000ms;这里和上面载入时的时间说明一下,因为载入的时候,他就在面板里面,所以移动的时间是一半,移动完成之后,我们把它移到动态面板右边边缘的位置,所以是两倍距离,所以时间也是两倍。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互,所以等待20000ms。

触发——触发当前循环事件1鼠标单击时,这样就可以实现不断循环了。

4. 循环事件2的交互

这里2的事件基本和1的一致,只是将移动的目标从1改成2。

移动——将弹幕组合2移动到动态面板的右面边缘的位置,LVAR1.width就是动态面板的宽度,这里注意我们是瞬间移动的,所以不需要加时间。

移动——瞬间移动完之后,我们继续将弹幕组合2向右移动到-target.width的位置,并且设置动画时间为20000ms。

等待——和上面滑动时间一致,等他滑动完在继续做下面的交互,所以等待20000ms。

触发——触发当前循环事件2鼠标单击时,这样就可以实现不断循环了。

那这样一个高保真的循环弹幕就制作完成了。

四、后续拓展

有的同学可能会问:这样的弹幕都是一样的,如果想每条弹幕都不一样怎么操作?

其实这也不难,我们可以新建一个中继器,然后比如一个组合有10个标签,我们就设定10列,将中中继器每列的值设置到对应的文本标签内,中继器分多页显示,每页值显示1行。在触发事件的时候,设置中继器翻到下一页,那么新的文本就会补充上。有兴趣的同学可以自己试试哈。

那以上就是本期全部内容了,感谢您的阅读,我们下期见,88~~~

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梓贤Vigo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值