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


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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
sails框架的学习指南
2014/12/22 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python常见排序算法基础教程
2017/04/13 Python
Python中文件的读取和写入操作
2018/04/27 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python能做什么 python的含义
2019/10/12 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
《日月潭》教学反思
2014/02/28 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
学习决心书范文
2014/03/11 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS