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


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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
jquery 使用简明教程
Mar 05 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
js实现无缝轮播图特效
May 09 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 array_intersect()函数使用代码
2009/01/14 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JavaScript使用cookie
2007/02/02 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
详解Python中break语句的用法
2015/05/14 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
农民工工资承诺书范文
2014/03/31 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
个人创业事迹材料
2014/12/30 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
python基础详解之if循环语句
2021/04/24 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
MySQL数据库 安全管理
2022/05/06 MySQL