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

OMINI_BASS 普通用户 2019-10-30 5064


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

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

交互解析

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

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

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

  3. 模拟弹幕的自动滚动

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

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

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

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

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

交互制作

制作弹幕容器

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


模拟弹幕循环

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

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


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

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


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


实现滚动效果

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


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

实现弹幕发送

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

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

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

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

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

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

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

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


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


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

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

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

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


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

小结

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

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

以上~


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 100金币
第2名 沈十三 10金币
最新回复 (189)
  • wowo 普通用户 1月前
    0 引用 190
    感谢
  • z852034740 普通用户 2月前
    0 引用 189
    感谢分享
  • RunTu 普通用户 3月前
    0 引用 188
    axure 9实战成功。谢谢分享
  • 红烧狮子头 普通用户 3月前
    0 引用 187
    感谢
  • 初七和芋泥 普通用户 4月前
    0 引用 186
    厉害厉害
  • Link.. 普通用户 9月前
    0 引用 185
    666
  • Cheese_1601339162 普通用户 10月前
    0 引用 184
    感谢,厉害的人感谢,厉害的人
  • 请叫我弟中弟 普通用户 10月前
    0 引用 183
    厉害了我的哥!
  • 凌海文 普通用户 10月前
    0 引用 182
    感谢
  • 我是随风啊 普通用户 10月前
    0 引用 181
    感谢
  • qs89120 普通用户 10月前
    0 引用 180
    感谢分享
  • 橙熟 普通用户 11月前
    0 引用 179
    感谢资源分享
  • 阿门 普通用户 11月前
    0 引用 178

    谢谢分享,感谢

  • beesoftmx 普通用户 11月前
    0 引用 177
    非常感谢!
  • Enter 普通用户 11月前
    0 引用 176
    感谢分享
  • gemeaux922 普通用户 12月前
    0 引用 175
    学习学习
  • youngY5121364 普通用户 2020-7-24
    0 引用 174
    感谢,学习了
  • 秀逗我啊你( ̄o ̄) . z Z 普通用户 2020-7-23
    0 引用 173

    12121

  • 暖暖_1594784296 普通用户 2020-7-15
    0 引用 172
    66666 
  • 。_1594277835 普通用户 2020-7-9
    0 引用 171
    咋下载
  • 黄小浩 普通用户 2020-7-8
    0 引用 170
    感谢
  • An_lin玲儿 普通用户 2020-7-7
    0 引用 169
    感谢老师的分享,期待更精彩的内容
  • musi 普通用户 2020-7-2
    0 引用 168
    感谢,非常感谢~
  • Frankie烽 普通用户 2020-7-2
    0 引用 167
    学习
  • yikalu 普通用户 2020-6-29
    0 引用 166
    厉害
  • 冲天飞 普通用户 2020-6-28
    0 引用 165
    厉害
  • nest 普通用户 2020-6-28
    0 引用 164
    感谢
  • 宸枫 普通用户 2020-6-27
    0 引用 163
    谢谢
  • 绚华 普通用户 2020-6-23
    0 引用 162
    谢谢
  • TMH 普通用户 2020-6-21
    0 引用 161
    谢谢
  • Brose 普通用户 2020-6-21
    0 引用 160
    谢谢
  • xiaolatiao 普通用户 2020-6-18
    0 引用 159
    谢谢老板
  • 以微笑面对生活 普通用户 2020-6-17
    0 引用 158
    好的,谢谢
  • tanky 普通用户 2020-6-16
    0 引用 157
    F5一下,弹幕自增滚动效果就出来了~
  • 子不语_1578218570 普通用户 2020-6-16
    0 引用 156
    感谢
  • wave 普通用户 2020-6-15
    0 引用 155
    特别有意思
  • 赵瑞琰 普通用户 2020-6-14
    0 引用 154
    对初学者来说,光是文字还是不够
  • wlx 普通用户 2020-6-9
    0 引用 153
    感谢
  • 濯濯木 普通用户 2020-6-5
    0 引用 152
    感谢分享
  • Johnson76 普通用户 2020-6-2
    0 引用 151
    谢谢分享
  • Victor Guo 普通用户 2020-6-1
    0 引用 150

    谢谢分享。。。。

  • 1355204421 普通用户 2020-6-1
    0 引用 149
    谢谢
  • 张一 普通用户 2020-6-1
    0 引用 148
    感谢

  • zsl 普通用户 2020-5-30
    0 引用 147
    66666
  • Meeko 普通用户 2020-5-27
    0 引用 146
    THANKS
  • 纳洛酮。 普通用户 2020-5-19
    0 引用 145
    6
  • 性格决定命运(陈丰) 普通用户 2020-5-18
    0 引用 144
    666
  • meihao 普通用户 2020-5-14
    0 引用 143
    多谢楼主 
  • 刀刀狗 普通用户 2020-5-13
    0 引用 142
    感谢
  • LION_1589272697 普通用户 2020-5-12
    0 引用 141
    谢谢
  • 阚小鸟 普通用户 2020-5-12
    0 引用 140
    谢谢
  • 沃尔特一 普通用户 2020-5-9
    0 引用 139
    太棒了
  • 媛若惜 普通用户 2020-5-9
    0 引用 138
    厉害了
  • 根住的音 普通用户 2020-5-8
    0 引用 137
    感谢分享
  • kookv 普通用户 2020-5-1
    0 引用 136
    谢谢分享
  • 竹间 普通用户 2020-4-29
    0 引用 135
    Thanks♪(・ω・)ノ
  • whtsg 普通用户 2020-4-27
    0 引用 134
    谢谢提供
  • Orz_1587970924 普通用户 2020-4-27
    0 引用 133
    学习学习
  • 郭峰_1587965771 普通用户 2020-4-27
    0 引用 132
    感谢分享
  • 小鑫 普通用户 2020-4-27
    0 引用 131
    谢谢分享
  • DiZi 普通用户 2020-4-27
    0 引用 130
    感谢LZ分享~~~~
  • 不加糖_1587871975 普通用户 2020-4-27
    0 引用 129
    感谢楼主分享
  • L,M 普通用户 2020-4-26
    0 引用 128
    感谢
  • ty001 普通用户 2020-4-24
    0 引用 127
    学习了
  • Tank_1587566638 普通用户 2020-4-22
    0 引用 126
    感谢,但是axure 9参照着好像不对
  • 黄果果_1583295643 普通用户 2020-4-21
    0 引用 125
    666
  • chusan 普通用户 2020-4-20
    0 引用 124
    666,学到了
  • 银乙 普通用户 2020-4-20
    0 引用 123
    感谢分享,学习一下
  • lemon_1583160942 普通用户 2020-4-17
    0 引用 122
    学习一下,感谢分享!
  • M暴走的兔子 普通用户 2020-4-14
    0 引用 121
    牛逼
  • huxiaohan 普通用户 2020-4-13
    0 引用 120
    学到了
  • agstarpm 普通用户 2020-4-10
    0 引用 119
    感谢分享
  • 步行天下 普通用户 2020-4-1
    0 引用 118
    感谢分享
  • 嘻嘻哈哈_1585386257 普通用户 2020-3-31
    0 引用 117
    1111
  • 嘻嘻哈哈_1585386257 普通用户 2020-3-31
    0 引用 116
    沙发斯蒂芬斯蒂芬斯蒂芬
  • 普通用户 2020-3-30
    0 引用 115
    666
  • 元一 普通用户 2020-3-28
    0 引用 114
    厉害厉害
  • yusk123 普通用户 2020-3-22
    0 引用 113
    学习学习,谢谢!
  • 单单 普通用户 2020-3-20
    0 引用 112
    非常好,可以学习学习嘛
  • dasldjaslk 普通用户 2020-3-20
    0 引用 111
    谢谢分享
  • 林青霞 普通用户 2020-3-20
    0 引用 110
    非常感谢分享~
  • hkme 普通用户 2020-3-17
    0 引用 109
    感谢分享
  • aayang 普通用户 2020-3-13
    0 引用 108

    666

  • 佳林_1584066457 普通用户 2020-3-13
    0 引用 107
    感谢
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 106
    保存素材
  • monde 普通用户 2020-3-8
    0 引用 105
    !!!
  • heryo 普通用户 2020-3-7
    0 引用 104
    666666
  • 不错 普通用户 2020-3-3
    0 引用 103
    666
  • Kasim 普通用户 2020-2-29
    0 引用 102
    厉害
  • 简简简简安 普通用户 2020-2-26
    0 引用 101
    感谢大佬分享
  • voidccc 普通用户 2020-2-26
    0 引用 100
    感谢分享
  • OMINI_BASS 普通用户 2020-2-22
    0 引用 99
    brotherhu 小楼老师好帅
    emmmmmm。。。
  • brotherhu 普通用户 2020-2-21
    0 引用 98
    小楼老师好帅
  • Mr.Nobody 普通用户 2020-2-19
    0 引用 97
    感谢分享哈
  • 栀染 普通用户 2020-2-15
    0 引用 96
    ,,
  • Ethereal 普通用户 2020-2-11
    0 引用 95
    感谢
  • cyx2020 普通用户 2020-2-9
    0 引用 94
    3qu
  • winni_xin 普通用户 2020-2-7
    0 引用 93
    感谢分享,学习了
  • nanasekiss 普通用户 2020-2-6
    0 引用 92
    感谢分享
  • lannizhong 普通用户 2020-1-17
    0 引用 91
    谢谢分享
返回
axure商城