Hello，今天教大家在Axure里面制作循环弹幕的效果。效果主要包括了弹幕的移动和自动循环。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/95133077f4eccba4/#g=1
【原型下载】
方式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~~~
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
