之前看了一篇文章,原文地址 https://blog.csdn.net/rolan1993/article/details/78338853,
发现有bug。起始点的x坐标如果小于结束点坐标,是正常的。但是起始点x坐标如果大于结束点坐标,就达不到效果,所以我修改了下,放上来。
完整代码可去原作者那里下载,guthub上有源码。
var ww = res.windowWidth; //获取全屏宽度 var hh = res.windowHeight;//获取全屏高度 that.globalData.ww = ww; that.globalData.hh = hh; //贝塞尔曲线函数 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 = {}; if(points[0]['x']<points[1]['x']){ point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y']; point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x']; }else{ point_D['y'] = points[0]['y']- dist_AD * Math.sin(RADIUS_AB); point_D['x'] = points[0]['x']- dist_AD * Math.cos(RADIUS_AB) ; console.log(points[0]['x'] + '.....' + dist_AD*Math.cos(RADIUS_AB)) } points_D.push(point_D); // E点的坐标 var point_E = {}; if (points[0]['x'] < points[1]['x']) { point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y']; point_E['x'] = points[1]['x'] + dist_BE * Math.cos(RADIUS_BC); }else{ point_E['y'] = points[1]['y']-dist_BE * Math.sin(RADIUS_BC); point_E['x'] = points[1]['x'] - dist_BE * Math.cos(RADIUS_BC); } 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 = {}; // console.log(point_D['x'] +'........'+dist_DF * Math.cos(radius_DE)) if (points[0]['x'] < points[1]['x']) { point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y']; point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x']; }else{ point_F['y'] = point_D['y'] - dist_DF * Math.sin(radius_DE); point_F['x'] = point_D['x']-dist_DF * Math.cos(radius_DE) ; } bezier_points.push(point_F); } return { 'bezier_points': bezier_points }; }, //busPos 的坐标就是终点的坐标,可以自己设置。 showAnimation:function(e){ if (!this.data.hide_good_box) return; this.finger = {}; var topPoint = {}; var finger_x = e.touches["0"].clientX-160; var finger_y = e.touches["0"].clientY-232; this.finger['x'] = finger_x; this.finger['y'] = finger_y; if (this.finger['x'] < this.busPos['x']) { topPoint['x'] = Math.abs(this.busPos['x'] - this.finger['x']) / 2 + this.finger['x']; } else { topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x']; } topPoint['y'] = this.finger['y'] - 150; console.log(topPoint) this.linePos = app.bezier([this.finger, topPoint, this.busPos], 30); this.startAnimation(); var that = this; that.setData({ shoppingCartIconUrl: that.data.cartUrl, shoppingCartNum: this.data.shoppingCartNum + 1 }) setTimeout(function () { that.setData({ shoppingCartIconUrl: that.data.cartUrl_1 }) }, 400) }, startAnimation: function () { var index = 0, that = this, bezier_points = that.linePos['bezier_points']; this.setData({ hide_good_box: false, bus_x: that.finger['x'], bus_y: that.finger['y'] }) this.timer = setInterval(function () { index++; that.setData({ bus_x: bezier_points[index]['x'], bus_y: bezier_points[index]['y'], redDotImageSize: that.data.redDotImageSize-10 //图片每次缩小10,慢慢缩小到购物车消失。 }) if (index >=28) { clearInterval(that.timer); that.setData({ redDotImageSize: 340, //这是图片的大小,340*340 hide_good_box: true, count: that.data.count += 1 }) } }, 33); }
相关推荐
2次贝塞尔曲线算法 用三次Bezier逼近圆弧:圆弧要等分成多少段 用三次Bezier逼近圆弧: 得到控制顶点数组 用三次Bezier逼近圆弧片段
购物车动画-贝塞尔曲线
利用二阶贝塞尔曲线,实现仿美团点击商品后掉落加入到购物车的效果,对于这个模块进行了封装,只需直接调用工具类即可,便于灵活拓展到其它项目中。
java 二次贝塞尔曲线算法,根据起点、终点和控制点输出点集合
本方讲述了二次贝塞尔曲线算法,并给出了实例程序的讲解
可以绘制1-5阶的贝塞尔函数图像,方便查询贝塞尔函数零点范围,在工程中有重要应用。
用TC生存二次贝塞尔曲线,其实稍微改一下就可以实现三次贝塞尔曲线的了。
Android 贝塞尔曲线动画 拿去直接用
详细源码讲解如何计算贝塞尔曲线,可以实现曲线的平滑算法
HTML实现贝塞尔曲线
加入购物车 贝塞尔曲线 实现动画
零阶一类贝塞尔函数曲线及其包络线,参见:http://blog.csdn.net/yanzi1225627/article/details/8228244
应用贝塞尔曲线与NSTimer结合使用 制作动态进度条。 简单实用,易懂,易学习 贝塞尔一次二次曲线的简单绘制,应用。 供各位童鞋学习使用分享 Q:305814832 email:ioszhaoyi@163.com
用二次贝塞尔曲线参数方程实现二次贝塞尔曲线绘制
本项目为vs2013工程项目,贝塞尔曲线计算,控制点可以多个,支持二维数据,三维数据,使用c++语言编写,直接打开即可运行。
贝塞尔曲线做一个曲线动画框架
通用的贝塞尔曲线:一条贝塞尔曲线是由一组定义的控制点 P0到 Pn,在 n 调用它的顺序 (n = 1 为线性,2 为二次,等.)。第一个和最后一个控制点总是具有终结点的曲线;然而,中间两个控制点 (如果有的话) 一般不会位于...
通过属性动画实现控件沿贝塞尔曲线运动,有助于初学者或者研究属性动画或者贝塞尔曲线的码农学习
三次贝塞尔曲线的C++实现,附有曲线图,完整的程序编码。
贝塞尔函数零点求取的函数。可以算到1001阶,网络上那些互相复制来复制去的内容只能算到135阶没法满足我的需要后自己编写的。有高阶计算需求的自取。