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


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 操作文件 实现方法小结
Jul 02 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
VUE中使用MUI方法
Feb 12 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php使用正则验证中文
2016/04/06 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python如何实现int函数的方法示例
2018/02/19 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python中数据库like模糊查询方式
2020/03/02 Python
恶意软件的定义
2014/11/12 面试题
优秀员工自荐信范文
2013/10/05 职场文书
入党积极分子介绍信
2014/01/17 职场文书
销售人员获奖感言
2014/02/05 职场文书
入党自荐书范文
2014/03/09 职场文书
授权委托书格式模板
2014/04/03 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis