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


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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
Javascript之datagrid查询详解
Sep 15 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模板页面中分页代码的解析
2009/02/06 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
javascript实用方法总结
2015/02/06 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
"引用"与多态的关系
2013/02/01 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
主题团日活动总结
2014/06/25 职场文书
求职简历自我评价2015
2015/03/10 职场文书
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL