Axure神奇操作实例-通过循环模拟弹幕

axure商城

在前两讲中我们讲解了如何通过元件的【365中文网】触发交互或者通过外部动态面板介入来实现循环的【365中文网】效果,那么本次教程趁热打铁,我们讲讲解如何通过循环来模拟页面的【365中文网】弹幕功能,先看下最终实现的【365中文网】效果。

交互解析

按照一贯以来先思考后动手的【365中文网】习惯,我们来看下这个效果设计到哪几方面的【365中文网】内容:

  1. 模拟自己填写的【365中文网】内容发送功能(包括按钮的【365中文网】禁用与启用等)

  2. 模拟除本人以外的【365中文网】其他用户发送内容的【365中文网】功能

  3. 模拟弹幕的【365中文网】自动滚动

那么我们来分析下这三个功能如何实现:

第一个功能:相对实现比较简单,只需要判断文本框中文本值长度是【365中文网】否为空,并且给与下方的【365中文网】横线、右侧的【365中文网】按钮不同的【365中文网】状态即可实现了;

第二个功能:似乎有似曾相识的【365中文网】感觉,如果仔细看的【365中文网】话就能够发现如果“自己”不发送内容的【365中文网】情况下,一直都是【365中文网】相同的【365中文网】几个用户在发送相同的【365中文网】话。没错,回到我们的【365中文网】主题了,就是【365中文网】循环,实际上只需要不停的【365中文网】循环就可以模拟出来其他用户发送内容的【365中文网】效果了。

第三个功能:仔细想一下,axure中能够实现滚动的【365中文网】就俩元件动态面板内联框架,这两个元件的【365中文网】区别就在于一个在页面中,一个在页面外,其实都能够实现,这里为了方便讲解,我们就是【365中文网】用动态面板来实现!

到这里,我们就能明确功能的【365中文网】实现逻辑了:通过循环效果 动态面板的【365中文网】限制高度模拟弹幕发送及滚动,开整!

交互制作

制作弹幕容器

首先我们需要准备一个容器,这个容器用来存储我们的【365中文网】原始的【365中文网】弹幕以及后续的【365中文网】弹幕内容,那么这里准备一个矩形,大小按照个人需求调整,我这边设置的【365中文网】是【365中文网】345*100的【365中文网】尺寸,并且由于我们的【365中文网】弹幕最先出现在最底端,靠左侧,那么我们需要设置矩形的【365中文网】对齐样式为居左,靠下,之后在里面填入我们的【365中文网】原始数据就可以了。

模拟弹幕循环

那么在弹幕容器制作完成之后,接下来就需要设置弹幕的【365中文网】自动发送及滚动了,先完成第一步:弹幕的【365中文网】自动发送。

这里我们用到Axure神奇操作系列 - 循环(第一讲)?中讲到的【365中文网】触发功能,首先我们模拟一个用户的【365中文网】发送循环操作。那么在这里我们首先对元件的【365中文网】载入时交互添加设置文本事件,需要注意由于我们的【365中文网】弹幕是【365中文网】竖向新增,所以切记一定要换行,否则新增的【365中文网】弹幕就会移动到右侧去。

设置文本变化事件之后,等待2000ms用于模拟用户发弹幕的【365中文网】间隔(如果需要模拟很火爆的【365中文网】效果,可以试试缩小等待事件)

之后,触发!,那么我们就得到了这么一个元件~F5看下,就能够模拟实现弹幕的【365中文网】自增了。

最后,在中间多插入几个用户和用户的【365中文网】弹幕,设置好等待事件,就可以模拟好多人在一起发弹幕的【365中文网】功能了~

实现滚动效果

这里就很简单了,我们用到了动态面板,在刚刚的【365中文网】弹幕容器上点击右键,转为动态面板。这里需要注意转为动态面板后默认动态面板会随着内容尺寸自动调整大小,所以我们需要把这个选项关闭掉。完成!~

此时F5一下,弹幕自增滚动效果就出来了~

实现弹幕发送

实现弹幕发送实际上只需要两个元件即可实现,即:文本框、发送按钮,但是【365中文网】为了好看,我们再加一个边框,当然边框根据好看程度可以全包围或者半包围,我在这里采用底部边框显示,其他边框隐藏。

那么我们捋一下我们想要的【365中文网】效果:

  1. 文本框获取焦点时,通过选中修改边框颜色;

  2. 文本框中文字长度>0时,启用发送按钮;

  3. 点击发送按钮后,将文本框中的【365中文网】文本清零,并且禁用自己;

  4. 文本框失去焦点时,通过取消选中修改边框颜色。

最后根据三个元件对应的【365中文网】效果,需要设置如下样式:边框的【365中文网】选中样式、发送按钮的【365中文网】禁用样式;

那么我们就得到了以下三个元件:

最后根据我们的【365中文网】交互需求,对文本框设置交互,就能够实现我们上面提到的【365中文网】想要的【365中文网】效果了~

那么到这里,我们就完成了评论的【365中文网】填写了,最后一步就是【365中文网】发送。那么很明显这个事件需要配置给发送按钮。在这里我们实现的【365中文网】是【365中文网】要将文本框中的【365中文网】内容发送到弹幕容器的【365中文网】最底部去,由于这两个元件都是【365中文网】其他元件,所以我们这里用到局部变量,步骤如下:

添加全局变量:LVAR1,绑定到文本框的【365中文网】元件文字;LVAR2,绑定到弹幕容器中,最后加上“自己”的【365中文网】用户名,就可以实现弹幕的【365中文网】发送了。

那么最后发送完成,需要清空数据框,只需要设置文本框的【365中文网】文本为空就好了~

最后我们就能够得到一个完整的【365中文网】弹幕发送功能了。

最后,对页面润色润色,加上几个好看的【365中文网】图片背景,F5预览看下,看下能不能实现我们想要的【365中文网】效果~

小结

通过这个教程想必大家能够更清楚如何在axure中实现循环操作,并且能够根据循环的【365中文网】进行和打断实现各种想要的【365中文网】效果。希望在以后做原型的【365中文网】过程中,多想多做多尝试,总有一种办法能够实现你的【365中文网】目标~

最后,源文件在附件中有,回复即可下载~

下载源文件:https://www.pmyes.com/thread-35147.htm

以上~

axure商城

相关推荐

1、雷达效果 —— Axure实用交互

写在开头: 只是【365中文网】较为基础的【365中文网】交互动画教程,目的【365中文网】是【365中文网】呈现出更为直接的【365中文网】视觉感官。 个人感觉,工作之余研究使用Axure的【365中文网】 …

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Axure神奇操作实例-通过循环模拟弹幕
友情链接:伟德包装网  伟德作文网  资枓大全  澳门赌球  天下足球  188体育古诗  澳门足球商  365日博  新英小说网  足球作文