小程序二次贝塞尔曲线实现购物车商品曲线飞入效果


Posted in Javascript onJanuary 07, 2019

前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。

主要应用到的技术点:
1、小程序wxss布局,以及数据绑定
2、js二次bezier曲线算法

核心算法,写在app.js里

bezier: function (points, times) {
 
 // 0、以3个控制点为例,点A,B,C,AB上设置点D,BC上设置点E,DE连线上设置点F,则最终的贝塞尔曲线是点F的坐标轨迹。
 
 // 1、计算相邻控制点间距。
 
 // 2、根据完成时间,计算每次执行时D在AB方向上移动的距离,E在BC方向上移动的距离。
 
 // 3、时间每递增100ms,则D,E在指定方向上发生位移, F在DE上的位移则可通过AD/AB = DF/DE得出。
 
 // 4、根据DE的正余弦值和DE的值计算出F的坐标。
 
 // 邻控制AB点间距
 
 var bezier_points = [];
 
 var points_D = [];
 
 var points_E = [];
 
 const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0]['y'], 2));
 
 // 邻控制BC点间距
 
 const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1]['y'], 2));
 
 // D每次在AB方向上移动的距离
 
 const EACH_MOVE_AD = DIST_AB / times;
 
 // E每次在BC方向上移动的距离 
 
 const EACH_MOVE_BE = DIST_BC / times;
 
 // 点AB的正切
 
 const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
 
 // 点BC的正切
 
 const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
 
 // 点AB的弧度值
 
 const RADIUS_AB = Math.atan(TAN_AB);
 
 // 点BC的弧度值
 
 const RADIUS_BC = Math.atan(TAN_BC);
 
 // 每次执行
 
 for (var i = 1; i <= times; i++) {
 
 // AD的距离
 
 var dist_AD = EACH_MOVE_AD * i;
 
 // BE的距离
 
 var dist_BE = EACH_MOVE_BE * i;
 
 // D点的坐标
 
 var point_D = {};
 
 point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x'];
 
 point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y'];
 
 points_D.push(point_D);
 
 // E点的坐标
 
 var point_E = {};
 
 point_E['x'] = dist_BE * Math.cos(RADIUS_BC) + points[1]['x'];
 
 point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y'];
 
 points_E.push(point_E);
 
 // 此时线段DE的正切值
 
 var tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x']);
 
 // tan_DE的弧度值
 
 var radius_DE = Math.atan(tan_DE);
 
 // 地市DE的间距
 
 var dist_DE = Math.sqrt(Math.pow((point_E['x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D['y']), 2));
 
 // 此时DF的距离
 
 var dist_DF = (dist_AD / DIST_AB) * dist_DE;
 
 // 此时DF点的坐标
 
 var point_F = {};
 
 point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x'];
 
 point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y'];
 
 bezier_points.push(point_F);
 
 }
 
 return {
 
 'bezier_points': bezier_points
 
 };
 
 }

注释很详细,算法的原理其实也很简单。 源码也发出来吧,github地址:https://github.com/xiongchenf/flybus.git

调用方法和用法就不占篇幅了,都是基础的东西。效果图如下:

小程序二次贝塞尔曲线实现购物车商品曲线飞入效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JS实现十分钟倒计时代码实例
Oct 18 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
微信小程序发送短信验证码完整实例
Jan 07 #Javascript
JS数组求和的常用方法实例小结
Jan 07 #Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 #Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 #Javascript
You might like
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
深入理解Python 代码优化详解
2014/10/27 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python列表推导式操作解析
2019/11/26 Python
python实现图像拼接功能
2020/03/23 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
房屋租赁意向书
2014/04/01 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
庭外和解协议书
2016/03/23 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript