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

访客4年前黑客工具413

我们常常在刷文章和视频的时候看到赛马灯结果,他们常常被用在告白和弹幕上利用。本文作者先容了如何用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) 最后,我们预览看下结果

结语

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

相关文章

B端产品 | 关于列表内信息项的排序方案设计

B端产品 | 关于列表内信息项的排序方案设计

在B端产品中,常用到列表展示信息,其中列表内条目的排序规则及实现方法需要产品经理去思考和定义。笔者思考总结了项目中的一些经验,供大家参考。 排序的最终目标: 与所有的产品设计思路一样,我们要“以终为...

消费主义是如何通过伪造文化来欺骗年轻人的?

消费主义是如何通过伪造文化来欺骗年轻人的?

欲望自己没有错,但欲壑难填就酿成了问题。欲望和本领之间总有差值。当欲望膨胀的速度大于小我私家本领增长速度时,总有人会为此感想疾苦。“伪精美”消费倾向值得我们每一小我私家深思。 其实,我们身边充斥着许...

银行智能投顾,理财托管中的托管?

银行智能投顾,理财托管中的托管?

编辑导语:跟着人们糊口程度的逐渐提高,有越来越多的人有了理财的需求,然而并非所有人都可以或许把握理财常识可能拥有理财本领,于是此时就需要智能托管式理财——智能投顾。本文作者对智能投顾的已往、此刻和将来...

《三十而已》顾佳: 300w的创业避坑指南

《三十而已》顾佳: 300w的创业避坑指南

编辑导语:《三十罢了》这部剧前些日子很火,不少人在剧中找到了共识,顾佳的曲折创业路、年数的影响、婚姻琐事,都扣动着观众的心弦;本文按照顾佳的创业之路为案例,举办一个创业的必坑指南,但愿对你有辅佐。...

掌握用户视角思维,进阶文案高手

掌握用户视角思维,进阶文案高手

想成为写文案好手,先要从用户角度思考问题。就是在你写完卖点文案今后,多问一句,和用户有什么干系?对用户有什么长处? 两个故事 故事一 有一次,英国著名诗人拜伦在街上散步,瞥见一位瞽者身前挂着一块牌子...

从一场战役说起,产品如何竞争突围?

从一场战役说起,产品如何竞争突围?

做出来一款成功的产品,是每个产品经理的梦想。但是很多时候,一款好的产品不一定会成功,产品的成功取决于很多因素,其中之一的重要因素就是竞争策略。 我们经常听到各种人在谈论竞争策略,那当我们谈论竞争策略...