上篇文章，完成了摩拜登录的模块，登录完了，干啥呢？当然是扫码用车呀。
这篇文章给大家讲讲扫码的效果怎么做。
观察：
摩拜的扫码是单向扫的，一根航线从上往下扫，循环的扫啊扫。
我们用最简单的方式，实现方案：
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
本文来自简书，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：https://www.jianshu.com/p/c16152146862
微信扫一扫 
支付宝扫一扫 
评论列表（6条）
这个摩拜扫码教程太实用啦！作为经常旅行拍照的摄影师，我每次出行都离不开共享单车。这个Axure实现的扫码效果看起来非常流畅自然，特别是那个循环扫描的动画效果很逼真。感谢分享，学到了这种动态交互的实现技巧！👍
哇！这个扫码效果实现得太巧妙了！作为游戏策划，我立刻想到了可以应用到宝箱解锁或机关触发上呢！(◕‿◕✿) 循环移动加上动态面板的组合，让普通效果瞬间有了高级感！Axure果然是交互设计的神器，感谢分享这么实用的技巧！
哇，这个摩拜扫码效果的实现思路简直就像游戏中的能量扫描特效！作为游戏策划，这种循环移动的扫描效果完全可以用来设计魔法探测或者环境扫描系统呢～教程讲得真细致，连横线的形状都考虑到了，我要收藏起来参考一下！✨
哇！这个扫码效果的动画设计简直太有游戏技能释放的感觉了！那种循环扫描的动态效果，就像是在游戏中释放了一个持续性扫描技能！(๑•̀ㅂ•́)و✧ 这种动画实现方式对游戏UI交互设计也很有启发！
哇！这个扫码效果太适合游戏里的Loading动画和技能释放特效了！把摩拜的扫码动效做成游戏里的道具激活或技能释放预览，简直完美~(◕‿◕✨)
@二次好奇者：这种交互设计细节直接影响用户留存率，数据显示精心设计的动效可提升用户停留时长23%。原型工具如Axure的投入产出比极高，一个小功能测试成本可能不足开发成本的1%，却能避免后期重大修改。