Axure系列:摩拜单车-----扫码开锁

作者: 黎木目 | 来源:发表于2017-08-24 13:22 被阅读20次

    上篇文章,完成了摩拜登录的模块,登录完了,干啥呢?当然是扫码用车呀。

    这篇文章给大家讲讲扫码的效果怎么做。

观察:

摩拜的扫码是单向扫的,一根航线从上往下扫,循环的扫啊扫。

我们用最简单的方式,实现方案:

1、准备横线,注意到这个横线是个类似椭圆中粗边细的形状,命名line,我们用圆来变形,宽220,高1

2、准备开始扫的效果,设置line默认隐藏,添加事件 载入时显示line。

3、再给line添加  显示时的事件,如下

意思就是:当line显示时,将line慢慢移动到相对位置(0,220)处,隐藏line,把line放到哦原来的位置(移动到相对位置0,-220),再显示line

注:这里主要使用显示/隐藏的事件来实现循环。

补充一下这个原型的其他效果

1、使用动态面板把扫码的页面装起来,点击扫码时显示动态面板(从右侧向左划)

2、点击扫码页面的返回按钮,隐藏动态面板(从左向右滑动)

总结:

1、使用显示/隐藏和载入事件实现循环,让line在自动循环移动

2、使用动态面板把内容装在一起,方面控制

福利时间

原型预览地址:http://iab38m.axshare.com

源文件地址:http://pan.baidu.com/s/1nuFDIrB 密码:s4kg

相关文章

  • Axure系列:摩拜单车-----扫码开锁

    上篇文章,完成了摩拜登录的模块,登录完了,干啥呢?当然是扫码用车呀。 这篇文章给大家讲讲扫码的效果怎么做。...

  • 摩拜单车和ofo的体验对比

    最近每天都要骑共享单车,明显体会到摩拜单车开锁的弊端, 摩拜单车的开锁方式是:微信扫一扫或摩拜单车APP扫一扫,扫...

  • 摩拜单车不扫码开锁

    现在在大街上总能碰到二维码被破坏的单车,要么整个被撕走,要么被涂满墨水,没有办法打开锁。 可以通过输入编号开锁来绕...

  • 「摩拜」与「小蓝」的区别是典型的「快车」与「专车」的区别

    一、摩拜现状: 橙色以人口最大概率分布人群为目标:女160-170,单车座位高度合适,无需手调:扫码开锁-骑走,高...

  • 三月四日

    今天小蓝单车免费骑,之前摩拜也有过。 不知道谁把二维码弄脏不能扫码开锁,还好可以输入编号解锁。 正在打卡时,突然的...

  • 笑一笑十年少

    共享单车来了,小黄、小绿、小摩拜……数不胜数,一兄台清早上班发现一辆小黄兴冲冲的扫码,兑密码 ,咦???没开锁,找...

  • 成功的秘诀就是再多坚持一分钟

    今天,在手机上下载了一个摩拜单车App,交押金、扫码开锁、骑车溜溜……感觉很不错哦! 快十五年没有骑车了,嘿嘿,别...

  • 10张图是我对摩拜单车的几点思考

    2月23日,摩拜二维码与微信扫码无缝对接,微信“扫一扫”即可骑走单车;3月23日,摩拜推出“红包车”,基于LBS技...

  • 架构师存在的意义

    今天远行乘地铁,出站后距离目的地尚有2公里,附近又找到时下最时尚的摩拜单车,手机扫码开锁,乐滋滋地享受环保骑行的小...

  • Axure系列:摩拜单车-----登录

    共享单车盛行,相信很多人手机中都装有摩拜单车App吧,应该都很熟悉吧。从这篇文章开始教大家做个摩拜单车的原...

网友评论

    本文标题:Axure系列:摩拜单车-----扫码开锁

    本文链接:https://www.haomeiwen.com/subject/zktedxtx.html