二维码扫码动效-扫描线上下移动原型

二维码扫码动效案例就是扫码线不停的上下运动。简单思路如下:

1、扫码线一直不停的运动。

不停的运动那么就是需要循环;很简单设置一个2个状态的动态面板,载入时就开启循环;

2、扫描线是上下移动。

在动态面板循环时扫描线可以不停的移动,上下就考虑移动坐标。向上移动,Y轴坐标减小(负数),向下移动,Y轴坐标增加(正数)。

3、扫描线到达二维码最高或最低时需要改变方向。

所以就在到达最高或最低时需要改变移动坐标的正负数。故只需要做一个上下边界的判断,更改移动坐标值即可。

欢迎产品朋友一起交流学习,作者微信:769918876

1 条评论 发表评论

发表评论

以下作品你可能也喜欢:
推荐

商城店铺端管理后台(高保真) 原型亮点: 1. 页面完善且全面的一整套高保真设计原型; 2. 页面跳转逻辑全面; 3. 交互完善的功能逻辑。 UI展示:

售价:¥ 14.90 销量: 18 1507
推荐

尺寸:375 x 667 登录:引导页加载完毕会自动跳转到登录界面,点击登录按钮直接进入首页。 注意:这个手机端APP和我的店内的另一个作品“PC段高保真管理系统(完整版)”是同一个项目,两者互补形成一个立体化的管理平台,两者相互参考会更好…

售价:¥ 19.99 销量: 50 6652
推荐

一、目录: 首页 课程列表 V1 课程列表 V2 课程列表 V3 课程详情 试题列表 在线考试 作答详情 资讯列表 资讯详情 关于我们 二、演示地址:请点击 三、本案部分图标使用了Font Awesome字体,预览是若遇图标无法正常显示,请…

售价:¥ 38.80 销量: 40 1915
推荐

作品名称:WeUI微信原生移动端元件库v2.0最新版_优职坊Axure设计 作品类型:元件库 主要适用:移动端 软件版本:Axure 8.0 文件格式:.rplib 文件大小:2.7M 发布日期:2019年05月13日 在2018年12月3…

售价:¥ 45.00 销量: 11 1423
推荐

作品名称:AxureUX交互原型Web元件库完整版 作品类型:元件类 发布日期:2017-11-02 最新版本:v1.1 主要适用:Web端 软件版本:Axure 8.0 文件大小:10MB 作品编号:LIB001 作品售价:49.00 作…

售价:¥ 49.00 销量: 156 3893
推荐

作品名称:信息流内容社区APP产品原型模板 作品编号:TEM003 当前版本:V1.0 软件版本:Axure 8.0 这是一个发帖评论、信息流形式的内容社区APP产品原型模板,包含主页、发现、消息、我的四大模块,可用于兴趣资讯、贴吧类APP…

售价:¥ 68.00 销量: 33 2625