Axure教程:制作弹幕跑马灯效果

01 前期准备

软件:Axure 9.0

硬件:Windows/Mac电脑

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

产品经理,产品经理网站

02 教程

(1)先准备跑马灯的展示框,这里我们可以拖动一个矩形命名为“LED屏”,将它设置为x=500,y=50

产品经理,产品经理网站

(2)准备一段跑马灯文字,拖动一个文字元件并命名“文字”,放在矩形框的最右边,如下图

产品经理,产品经理网站

(3)接下来我们就要思考怎么让文字动起来,说到动起来我们就应该想到动态面板的使用,我们拖一个动态面板出来,命名为“循环状态“,并将动态面板设置为2个以上的状态。

产品经理,产品经理网站

(4)为了能让文字动起来,我们还需要将矩形转化为动态面板,并将文字放在动态面板的状态中,这时候记住里面文字的位置。

产品经理,产品经理网站

(5)接下来思考怎么让它动起来,我们需要在页面加载时,让“循环状态”动态面板不停的切换状态,保证循环这个状态。

产品经理,产品经理网站

(6)接下来,让文字从左边移动到右边,也就是添加状态改变时的交互。

刚才我们已经记下了文字的初始位置是500,这里我们就需要区分什么时候从左到右移动,一定是在起点开始,所以我们要先确定文字的位置在哪里,就用到局部变量这个元件。添加情形1

产品经理,产品经理网站

(7)新建状态改变时交互的情形1后,我们需要做的就是让文字从左边移动到右边,如下图,数字就是我上面提到的文字的位置,因为最后走到右边相当于负的文字位置即-914

产品经理,产品经理网站

(8)复制情形1交互,修改为如下内容变为情形2,就可以让文字到达左边后马上回到右边来。

产品经理,产品经理网站

(9) 最后,我们预览看下效果

产品经理,产品经理网站

结语

虽然步骤比较多,但其实很简单,只有坚持住,就能看到学习成果。

 

本文作者 @蓝汐 !

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部