Axure教程: *** 弹幕跑马灯效果

访客4年前黑客工具441

我们常常在刷文章和视频的时候看到赛马灯结果,他们常常被用在告白和弹幕上利用。本文作者先容了如何用Axure实现弹幕赛马灯结果的操纵步调,以及实现进程中的一些心得体会,与各人分享。

Axure教程:建造弹幕赛马灯结果

01 前期筹备

软件:Axure 9.0

硬件:Windows/Mac电脑

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

Axure教程:建造弹幕赛马灯结果

02 教程

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

Axure教程:建造弹幕赛马灯结果

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

Axure教程:建造弹幕赛马灯结果

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

Axure教程:建造弹幕赛马灯结果

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

Axure教程:建造弹幕赛马灯结果

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

Axure教程:建造弹幕赛马灯结果

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

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

Axure教程:建造弹幕赛马灯结果

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

Axure教程:建造弹幕赛马灯结果

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

Axure教程:建造弹幕赛马灯结果

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

结语

固然步调较量多,但其实很简朴,只有僵持住,就能看到进修成就。

相关文章

Axure教程:用中继器做聊天对话界面

Axure教程:用中继器做聊天对话界面

今天教大家用Axure做一个聊天对话界面。该原型使用简单,只需要填写中继器表格即可直接使用。有疑问或者喜欢该原型的小伙伴们可以在评论处给我留言哦。 其中效果包括: 查看不同人不同的聊天记录 未查看...

聊聊数据中台:元数据建设有哪些坑(一)

聊聊数据中台:元数据建设有哪些坑(一)

元数据一般被称为“数据的数据”,以元数据为要害展开数据管理,可以或许辅佐企业更好地对数据资源举办打点,理清数据之间的干系,实现更精准高效的阐明和决定。本文作者从自身事情出发,对元数据的根基成果展开了先...

如何根据需求,写出一份好的PPT解决方案?

如何根据需求,写出一份好的PPT解决方案?

编辑导读:PPT可谓是职场人必会的东西,甚至有人恶作剧说,学好PPT,走遍天下都不怕。PPT可运用的场景很是多,本文作者就从产物司理的角度,阐明如何按照需求,写出一份好的PPT办理方案,但愿对你有辅佐...

万万没想到学习还可以这样!| 2020中国中小学校智能+教育发展洞察

万万没想到学习还可以这样!| 2020中国中小学校智能+教育发展洞察

《中国中小学校智能+教育发展洞察2020》对传统中小学校智能化的背景现状、实践案例进行综合梳理,并基于案例总结出中小学校智能+教育的场景应用以及未来趋势。 在政策支持和技术助推下,中国中小学校智能+教...

AIPM要知道的NLP知识(1):词的表达

AIPM要知道的NLP知识(1):词的表达

编辑导语:NLP为Neuro-Linguistic Programming的缩写,是研究思维、语言和行为中的纪律;这是一种对优秀(excellence)举办编码和复制的方法,它能使你不绝到达你和你的公...

盘点:设计人脸识别时需要避开哪些坑

盘点:设计人脸识别时需要避开哪些坑

编辑导语:如今,人脸识别技能已经并不稀奇,给手机解锁时、车站进站时往往城市用到这门技能。然而,看似普及的一项技能其实设计起来并不简朴,本文作者就分享了本身在实操进程中,发明白人脸识别设计有哪些需要避开...