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


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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
javascript实现前端分页功能
Nov 26 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
写自已的js类库需要的核心代码
2012/07/16 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
举例讲解AngularJS中的模块
2015/06/17 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
python制作最美应用的爬虫
2015/10/28 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python PIL库图片灰化处理
2020/04/07 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
房产继承公证书
2014/04/09 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP