Axure实现“跑马灯”效果

场景描述：文字从右往左循环滚动。当鼠标移到文字上面，滚动则停止；当鼠标移出文字，滚动则继续。

Axure实现如下：

建立一个全局变量a（默认值为0，用户控制是否滚动），一个动态面板MB（动态面板设置为两个状态State1和State2，宽：350，高：30），一个承载文字的矩形控件Content（宽：780.，高25）。矩形控件在State1中的位置为（0，0），在State2中的位置为（351，0）。

全局变量a的取值及对应的功能如下：

动态面板MB的“鼠标移入时”事件和“鼠标移出时”事件产生的结果分别是：

（1）鼠标移入时：

· a=1

· MB切换至State1

（2）鼠标移出时：

· a=0

· MB切换至State2

由于变量a有两个取值，而动态面板MB也有两个状态，故动态面板MB“状态改变时”事件共有四种逻辑判断。四种判断及产生的事件结果如下：

（1）a=0 and MB=State1：

· Content相对位置移动至（1130，0）

· MB切换至State2

（2）a=0 and MB=State2：

· Content相对位置移动至（-1130，0），线性移动，耗时5000ms

· 等待5000ms

· MB切换至State1

（3）a=1 and MB=State1：

· Conetnt相对位置移动至（1130，0）

（4）a=1 and MB=State2：

· Content相对位置移动至（1130，0）

· MB切换至State1

设置“页面载入时”事件，产生的结果为：

· MB切换至State2（由于MB默认状态为State1，页面加载时状态变成State2即在页面开始时就触发了“动态面板改变时“事件）

注：上述为文字左右滚动的”跑马灯“效果，而诸如文字上下滚动的”通知“效果只需要将Content移动位置变成Y轴方向移动即可，如：（0，1130）。