我们经常在刷文章和视频的时候看到跑马灯效应，经常用在广告和弹幕中。本文介绍了用Axure实现弹幕效果的操作步骤，以及在实现过程中的一些体会。

01初步准备

软件:Axure 9.0

硬件:Windows/Mac电脑

思考:实现跑马灯效果前的思考(参考下图)

02教程

(1)首先准备跑马灯的显示框。在这里，我们可以拖动一个名为“发光二极管屏幕”的矩形，并将其设置为x = 500和y = 50

(2)准备一段跑马灯文本，拖动一个文本元素，命名为“text”，放在矩形框最右边，如下图

(3)接下来要思考如何让文字动起来。说到动，要考虑动面板的使用。我们拖动一个动态面板，将其命名为“循环状态”，并将动态面板设置为两个以上的状态。

(4)为了使文字移动，我们还需要将矩形变换成动态面板，将文字置于动态面板的状态，然后记住文字在里面的位置。

(5)接下来，想想怎么让它动起来。页面加载时，我们需要让“循环状态”的动态面板不断切换状态，以保证循环状态。

(6)接下来，让文字从左向右移动，也就是在状态改变的时候加入交互。

刚才我们已经写下了正文的起始位置是500。在这里，我们需要区分什么时候从左向右移动。它必须从起点开始，所以我们需要首先确定文本的位置，我们使用局部变量组件。添加案例1

(7)创建好状态变化时交互的UI情况后，我们需要做的就是将文本从左向右移动。如下图，数字就是我上面说的文字位置，因为最后往右就相当于负文字位置。也就是，-914

(8)复制案例1中的交互，按照如下方式改成案例2，这样文本到达左边后可以立即返回右边。

(9)最后，我们来预演一下效果

标签

虽然步骤很多，但其实很简单。只有坚持，才能看到学习的成果。