Axure神奇操作实例-通过循环模拟弹幕 获赏110金币 案例教程 基础教程

OMINI_BASS 普通用户 2019-10-30 6506


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

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

交互解析

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

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

  2. 模拟除本人以外的其他用户发送内容的功能

  3. 模拟弹幕的自动滚动

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

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

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

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

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

交互制作

制作弹幕容器

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


模拟弹幕循环

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

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


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

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


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


实现滚动效果

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


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

实现弹幕发送

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

那么我们捋一下我们想要的效果:

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

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

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

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

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

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


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


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

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

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

最后我们就能够得到一个完整的弹幕发送功能了。


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

小结

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

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

以上~


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 100金币
第2名 沈十三 10金币
最新回复 (207)
  • 魔神英雄传 普通用户 2019-10-30
    0 引用 2
    厉害呀,骚是一辈子的
  • 沈十三 管理员 2019-10-30
    0 引用 3
    感谢分享,获得10金币奖励!
  • OMINI_BASS 普通用户 2019-10-30
    0 引用 4
    沈十三 感谢分享,获得10金币奖励!
    感谢沈老师!~
  • 我是微笑 普通用户 2019-11-1
    0 引用 5
    厉害
  • 黯黄老师 管理员 2019-11-3
    0 引用 6
    感谢投稿,本文已选入Axure中文网:https://www.axure.com.cn/80999/
    获得100金币奖励
  • 白猪猫 普通用户 2019-11-4
    0 引用 7
    厉害啊
  • huizi 普通用户 2019-11-4
    0 引用 8
    感谢分享
  • pengyang2747 普通用户 2019-11-4
    0 引用 9
    感谢分享
  • rm -rf_1572921272 普通用户 2019-11-5
    0 引用 10
    厉害啊啊
  • sushu2013 普通用户 2019-11-5
    0 引用 11
    感谢分享
  • PopcornQ 普通用户 2019-11-6
    0 引用 12
    感谢分享
  • sosoyo 普通用户 2019-11-6
    0 引用 13
    学习学习
  • 连理于地 普通用户 2019-11-7
    0 引用 14
    非常好,可以学习学习嘛
  • 连理于地 普通用户 2019-11-7
    0 引用 15
    谢谢分享
  • 颖宝 普通用户 2019-11-7
    0 引用 16
    学习学习
  • 唐布衣 普通用户 2019-11-7
    0 引用 17
    可以可以  棒
  • CH13211 普通用户 2019-11-7
    0 引用 18
    111
  • 树袋熊ying 普通用户 2019-11-7
    0 引用 19
    感谢分享
  • 树袋熊ying 普通用户 2019-11-7
    0 引用 20
    为什么我做起来的留言和原本的弹幕有一行的间隔
  • OMINI_BASS 普通用户 2019-11-7
    0 引用 21
    树袋熊ying 为什么我做起来的留言和原本的弹幕有一行的间隔
    检查下看下是不是最后一步中间有回车,如果有回车的话肯定就换行了。
  • TianTianSunShine 普通用户 2019-11-7
    0 引用 22
    555
  • 起风了。 普通用户 2019-11-8
    0 引用 23
    可以学习
  • 华桢 普通用户 2019-11-11
    0 引用 24
    牛逼
  • 婉儿_1570691211 普通用户 2019-11-11
    0 引用 25
    感谢分享
  • shine214 普通用户 2019-11-12
    0 引用 26
    厉害
  • 精品鞋业 普通用户 2019-11-12
    0 引用 27
    嘻嘻嘻嘻
  • Mister蛋 普通用户 2019-11-14
    0 引用 28
    请问bse  r  true是什么
  • 赤瞳 普通用户 2019-11-14
    0 引用 29
    学习了
  • 尾巴 普通用户 2019-11-14
    0 引用 30
    学习了~~~~
  • 粗粗 普通用户 2019-11-15
    0 引用 31
  • OMINI_BASS 普通用户 2019-11-15
    0 引用 32
    Mister蛋 请问bse r true是什么
    没太明白你的问题,可以详细描述下么
  • 婷婷_1573607501 普通用户 2019-11-15
    0 引用 33
    感谢分享
  • 旦儿 普通用户 2019-11-15
    0 引用 34
    谢谢大神
  • 李艳芳 普通用户 2019-11-17
    0 引用 35
    我想要源文件
  • 酸奶味小草莓 普通用户 2019-11-17
    0 引用 36
    学习学习
  • Wujungang 普通用户 2019-11-19
    0 引用 37
    学习
  • Banjiu 普通用户 2019-11-20
    0 引用 38
    1
  • Gemini丶Ray 普通用户 2019-11-20
    0 引用 39
    学习
  • 北漂一族 普通用户 2019-11-20
    0 引用 40
    好内容,受教了
  • yeye1 普通用户 2019-11-22
    0 引用 41
    厉害
  • 李娜 普通用户 2019-11-25
    0 引用 42
    厉害厉害,谢谢分享
  • Simon_1574665203 普通用户 2019-11-25
    0 引用 43
    多谢楼主
  • 咸鱼杰 普通用户 2019-11-26
    0 引用 44
    很强
  • SteveD 普通用户 2019-11-28
    0 引用 45
    666u啊
  • zippppper 普通用户 2019-11-28
    0 引用 46
    多谢楼主
  • 土豆0419 普通用户 2019-11-29
    0 引用 47
    感谢分享
  • mabumilu 普通用户 2019-12-1
    0 引用 48
    我来看看货。
  • 匡匡 普通用户 2019-12-1
    0 引用 49
    感觉不错
  • houwan123 普通用户 2019-12-2
    0 引用 50
    多谢楼主
  • qhdwhw 普通用户 2019-12-3
    0 引用 51
    谢谢分享!
  • Wave L 普通用户 2019-12-7
    0 引用 52
    不知道说啥  666吧
  • Myan 普通用户 2019-12-9
    0 引用 53
    感谢分享
  • 柚子哇咔 普通用户 2019-12-10
    0 引用 54
    感谢
  • 柴佳禾 普通用户 2019-12-10
    0 引用 55
    学习了
  • 家里有个顽石 普通用户 2019-12-10
    0 引用 56
    感觉学到了东西
  • fenzero 普通用户 2019-12-11
    0 引用 57
    111
  • 遇見妳. 普通用户 2019-12-11
    0 引用 58
    刚刚
  • 悟六七 普通用户 2019-12-11
    0 引用 59
    66666
  • xiangruyue 普通用户 2019-12-12
    0 引用 60
    666
  • Inkssss 普通用户 2019-12-12
    0 引用 61
    yes
  • lihaimin 普通用户 2019-12-14
    0 引用 62
    谢谢
  • ruby9909 普通用户 2019-12-16
    0 引用 63
    牛人
  • 菠萝王子 普通用户 2019-12-16
    0 引用 64
    产品经理社区来的
  • daive_1576549109 普通用户 2019-12-17
    0 引用 65
    感谢投稿  瞅瞅看
  • qudandan 普通用户 2019-12-18
    0 引用 66
    厉害呀,骚是一辈子的
  • Pooh Pooh 普通用户 2019-12-18
    0 引用 67
    看看学习
  • houwan123 普通用户 2019-12-18
    0 引用 68
    感谢
  • 菠萝王子 普通用户 2019-12-19
    0 引用 69
    看看到底怎么实现的啊
  • pmkomahjj 普通用户 2019-12-19
    0 引用 70
    looklook
  • 花生了什么树 普通用户 2019-12-20
    0 引用 71
    66
  • 见翼未之所见 普通用户 2019-12-20
    0 引用 72
    感谢楼主,厉害大大
  • 邓辉 普通用户 2019-12-25
    0 引用 73
    感谢
  • 阿尔巴白松露 普通用户 2019-12-29
    0 引用 74
    感谢,感谢,学习了
  • 三寸暖阳 普通用户 2019-12-30
    0 引用 75
    666  厉害厉害
  • 你好好想想 普通用户 2019-12-30
    0 引用 76
    学习学习
  • 你好好想想 普通用户 2019-12-30
    0 引用 77
    为什么按照这个步骤弹幕只在页面显示一行?
  • OMINI_BASS 普通用户 2019-12-30
    0 引用 78
    你好好想想 为什么按照这个步骤弹幕只在页面显示一行?
    建议下载下源文件跑下试试看,axure8按照这个步骤应该是没有问题的,如果是axure9的话可能会有问题,axure9的触发逻辑和8不一样,这点我也没弄懂怎么修改的。
  • 09 普通用户 2019-12-31
    0 引用 79
    谢谢分享
  • ccoo 普通用户 2019-12-31
    0 引用 80
    很棒
  •  渐无书 普通用户 2020-1-2
    0 引用 81
    感谢
  • a(1+cosθ) 普通用户 2020-1-7
    0 引用 82
    谢谢
  • 猪娟儿宝 普通用户 2020-1-8
    0 引用 83
    步骤写的简单明了,初学者都可以看懂
  • ^O^_1578475820 普通用户 2020-1-8
    0 引用 84
    谢谢
  • zipu 普通用户 2020-1-10
    0 引用 85
    感谢,厉害的人
  • Jameshuang 普通用户 2020-1-11
    0 引用 86
    厉害厉害
  • 痞子蔡 普通用户 2020-1-12
    0 引用 87
    感谢
  • BHLH 普通用户 2020-1-14
    0 引用 88
    我来试一下Axure  9
  • 晓_1578985800 普通用户 2020-1-14
    0 引用 89
    感谢分享
  • 回首掏 普通用户 2020-1-14
    0 引用 90
    6666
  • lannizhong 普通用户 2020-1-17
    0 引用 91
    谢谢分享
  • nanasekiss 普通用户 2020-2-6
    0 引用 92
    感谢分享
  • winni_xin 普通用户 2020-2-7
    0 引用 93
    感谢分享,学习了
  • cyx2020 普通用户 2020-2-9
    0 引用 94
    3qu
  • Ethereal 普通用户 2020-2-11
    0 引用 95
    感谢
  • 栀染 普通用户 2020-2-15
    0 引用 96
    ,,
  • Mr.Nobody 普通用户 2020-2-19
    0 引用 97
    感谢分享哈
  • brotherhu 普通用户 2020-2-21
    0 引用 98
    小楼老师好帅
  • OMINI_BASS 普通用户 2020-2-22
    0 引用 99
    brotherhu 小楼老师好帅
    emmmmmm。。。
  • voidccc 普通用户 2020-2-26
    0 引用 100
    感谢分享
返回