上篇文章，完成了摩拜登录的模块，登录完了，干啥呢？当然是扫码用车呀。
这篇文章给大家讲讲扫码的效果怎么做。
观察：
摩拜的扫码是单向扫的，一根航线从上往下扫，循环的扫啊扫。
我们用最简单的方式，实现方案：
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
微信扫一扫 
支付宝扫一扫 
评论列表（3条）
哇，这个摩拜扫码效果的实现思路简直就像游戏中的能量扫描特效！作为游戏策划，这种循环移动的扫描效果完全可以用来设计魔法探测或者环境扫描系统呢～教程讲得真细致，连横线的形状都考虑到了，我要收藏起来参考一下！✨
哇！这个扫码效果的动画设计简直太有游戏技能释放的感觉了！那种循环扫描的动态效果，就像是在游戏中释放了一个持续性扫描技能！(๑•̀ㅂ•́)و✧ 这种动画实现方式对游戏UI交互设计也很有启发！
哇！这个扫码效果太适合游戏里的Loading动画和技能释放特效了！把摩拜的扫码动效做成游戏里的道具激活或技能释放预览，简直完美~(◕‿◕✨)