1. 主页 > 行业资讯 > 设计文章 >

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

我们经常在刷文章和视频的时候看到跑马灯效应,经常用在广告和弹幕中。本文介绍了用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)最后,我们来预演一下效果

标签

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

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/sjwz/543.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息