加入购物车动画【贝塞尔二次曲线函数】

之前看了一篇文章，原文地址 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);
  }