Axure教程 | 移动端APP原型动效库之【底部弹框】

本文给大家分享:移动端APP原型底部弹框、下拉刷新、弹框提示等动效制作。

一、底部弹框的思路及步骤解析

原型屏幕尺寸:375*667px(iphone6/iphone6s/iphone7)

原型在线地址:http://u.pmdaniu.com/mql3

1、在Axure中,拖入一个动态面板(命名:Box2,尺寸:375,667),以下称Box2,默认隐藏;

2、在Box2中,设置一个黑色背景,透明度40%(命名:Background_Box2,尺寸:375,667),默认隐藏;

3、在Box2中,再拖入一个动态面板,以下称底部弹框(命名:Main_Box2,尺寸:375,高度自动调整为内容尺寸),默认隐藏;

4、在Axure中,拖入一个按钮(或热区),以下称弹框按钮,命名及尺寸根据情况自行编辑;

5、单击弹框按钮时,设置事件:

  • 移动Box2到达(坐标:0,0),这样设置后,该动态面板就可以放在页面的任意位置,不会遮挡住其他元件的编辑,
  • 显示Box2,动画:无,置于顶层,该事件必须在以下2个事件的前面;
  • 显示黑色背景,动画:逐渐,时间:500毫秒;
  • 显示底部弹框,动画:向上滑动,时间:500毫秒;

6、单击黑色背景时,设置事件:

  • 隐藏底部弹框,动画:向下滑动;
  • 隐藏黑色背景,动画:逐渐;
  • 等待500毫秒,500毫秒为动画默认播放时间;
  • 隐藏Box2,动画:无,该事件必须在以上3个事件的后面,因为要等待动画播放完毕再隐藏。

7、双击进入底部弹框,编辑好弹框选项及取消按钮,选项的数量、文字内容根据情况自行编辑;

8、单击选项时,设置事件:

  • 单击选项时,如果不需要跳转至其他页面,则直接触发“黑色背景单击时事件”即可,因为该事件与“单击黑色背景时的事件”一致;
  • 单击选项时,如果需要跳转至其他页面,则设置单击时的链接跳转即可。

9、单击取消按钮时,设置事件:

  • 单击取消按钮时,直接触发“黑色背景单击时事件”即可,因为该事件与“单击黑色背景时的事件”一致。

原型在线地址:http://u.pmdaniu.com/mql3

二、高级进阶:运用中继器和全局变量,实现弹框选项的自由编辑及增减

1、单击弹框按钮时设置全局变量【box_id】的值,并触发“中继器载入时事件”;

2、中继器载入时,设置添加筛选事件:中继器中“Item.box_id”列的值等于全局变量“box_id”的值[[Item.box_id==box_id]];

3、第一行上面为圆角,中间几行为直角,最后一行下面为圆角,如果第一行是标题则高度和字体样式都与其他行不一样,如果只有一行则上面下面都是圆角,一共5种样式,需要用动态面板做5种不同的样式,然后通过中继器的函数和字段,来判断每行调用哪种样式,此处需要设置的事件截图如下(如有更好方法,欢迎请加q群235415403交流沟通):


原型在线地址:http://u.pmdaniu.com/mql3

关注“亮亮原型”订阅号,发送“6”获取RP源文件下载地址。

原型屏幕尺寸:375*667px(iphone6/iphone6s/iphone7)

注: 本文由 @亮亮 原创发布于产品壹佰,未经许可,禁止转载。

3条评论 添加新讨论

02月08日评论

现在个人更喜欢使用国产Mockplus做原型,很多地方比Axure快捷。

回复
01月12日评论

欢迎加亮亮原型QQ群:235415403,群文件下载RP文件

回复
登录后参与讨论
Ctrl+Enter 发表