axure学习之如何实现跑马灯效果

文章一：

跑马灯通常指有时需要用一矩形条显示少量用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。如证券业中常用跑马灯来显示不断变化的股票行情，一些生活类的网站常用跑马灯来显示网站公告，实际应用中也常通过跑马灯来监视是否死机，等等。

下面利用axure中的动态面板来实现跑马灯的动态效果。

Step1：
新建一个矩形条（即作为跑马灯中文字信息的滚动区域），将其转换为动态面板；
 

Step2：
双击打开矩形条动态面板，在打开的页面中，添加一个文字面板，编辑好所需要的文字：
 

文字面板可以放在动态面板里面，也可以放在动态面板的右边，根据需求来定（即跑马灯文字的初始位置）；

Step3：
将刚才编辑好的文字面板转换为动态面板，且别忘了给转换后的动态面板取个名字，即添加上标签，便于后面识别，本次实例取名为“跑马灯文字”；

Step4：
利用动态面板Onshow和Onhide上添加事件来实现循环效果，总体思路如下：
1） “跑马灯文字”动态面板默认为隐藏状态；
2） 加载页面时，显示“跑马灯文字”动态面板；
3） 动态面板显示时（Onshow），将该动态面板线性平移，直至移出左边框；
4） 移出左边框后，将“跑马灯文字”动态面板移至右边框的位置，等待循环开始；
5） 等待若干时间后，“跑马灯文字”动态面板又置为初始状态：即隐藏状态；
6） 动态面板隐藏时（Onhide），等待若干时间，显示“跑马灯文字”动态面板；
7） 循环至步骤3）；

交互事件如下截图所示：
 

Step5：
别忘了将页面的交互效果加上，即当页面加载时，显示“跑马灯文字”动态面板；

Step6：
保存后按F5即可查看效果；

总结：
1、 本次实际使用到两个动态面板，跑马灯文字的动态面板好理解，而第一个作为边框的矩形如果不转换为动态面板可行么？
 

如上图，两个动态面板的层级关系非常明显。第一个动态面板的作用即是将跑马灯文字限制在规定的区域内移动，即对于“跑马灯文字”这个动态面板来说，它的页面大小就只有“矩形边框”规定的那么大；
或许还有其他方面可以实现这个限制，欢迎讨论；
2、 移动动态面板的坐标如何选择？这个不是拍着脑门想出来的，而是根据你跑马灯文字区域的宽度大小和边框的宽度大小来决定的，理清了总体思路，这一块就不是问题；
3、 等待时间如何设定？axure中动作的执行是根据设定好的事件从上到下依次执行的。如上交互事件所示，将跑马灯文字移动至左边框耗时9000ms，等待时间此时如果设置为500ms，那么，过了500ms后，系统则会忽略先前9000ms的设定，而去立即执行下一步动作，从而出错。这是很关键的一个细节。

如下为页面效果展示：
 

文章二：

Axure应用中，最为重要的要数动态面板的应用，本经验大致讲解如何用动态面板的切换实现跑马灯效果。

1、在page1页面，新建长为400，高为40的动态面板，设置名称为动态面板1

2、双击该动态面板，新增动态面板状态State2

3、进入动态面板1的状态1：State1,添加背景色，对应的文字信息

4、将动态面板1的状态1，进行复制，粘贴到状态State2中，修改对应的文字信息

5、返回page1页面，添加页面加载时触发事件，让动态面板1的状态不断切换循环，循环间隔设置为0s，这样看来文字就是不间断的向右移动

6、喜欢的朋友可以试下效果，个人感觉这个方法能快速达到想要的效果，以下是移动时的截图