js实现购物车抛物线运动

小程序中实现抛物线

废话不多说直接上关键代码

<view class='goods '>
    <view class='goods-item '>
      <navigator url="../../goods/detail/detail?objectId=0">
        <!--商品图片-->
        <image class='gi-image' src='' mode='widthFix'></image>
        <view class='gi-name '>大师·匠心酒</view>
      </navigator>
      <view class='gi-wight '>500ml 53%vol</view>
      <view class='gi-price '>¥ 519.00</view>
      <view class='gi-card'>
        <!--购物车小图-->
        <image src='/images/icons/card.png' bindtap='addCard' data-obj='{{item}}' lazy-load='true' mode='widthFix'></image>
      </view>
    </view>
  <navigator class='clr'></navigator>iew>
</view>

<view>
  <image class='bot-mark' src='/images/fpr.png' mode='widthFix'></image>
</view>

.goods, .Packing, .Wine {
  width: 750rpx;
  padding-top: 100rpx;
  font-size: 28rpx;
}

.goods {
  padding-top: 50rpx;
}

.goods-item {
  width: 375rpx;
  float: left;
  padding-top: 20rpx;
  position: relative;
  z-index: 1000;
}

.goods-item view {
  padding-left: 20rpx;
}

.gi-image {
  display: block;
  width: 345rpx;
  margin: 20rpx 10rpx 20rpx 20rpx;
}

.gi-image-right {
  margin: 20rpx 20rpx 20rpx 10rpx;
}

.gi-name {
  color: #373737;
}

.gi-wight {
  color: #666;
  font-size: 24rpx;
  height: 40rpx;
  line-height: 40rpx;
}

.gi-price {
  color: #f54d52;
  height: 60rpx;
  line-height: 80rpx;
}

.gi-card {
  position: absolute;
  width: 40rpx;
  right: 25rpx;
  bottom: 40rpx;
  z-index: 2000;
}

.gi-card image {
  display: block;
  width: 100%;
}

.clr {
  clear: both;
  height: 80rpx;
}

.good_box {
  width: 36rpx;
  height: 36rpx;
  position: fixed;
  border-radius: 50%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  z-index: 3000;
  background: #f54d52;
}

//app.js
  onLaunch: function() {
    // 设备信息
    wx.getSystemInfo({
      success: function(res) {
        that.globalData.ww = ww;
        that.globalData.hh = hh;
      }
    });
  }



//card.js
onLoad: function(options) {
    //抛物线 终点位置 底部导航栏购物车(自定义位置就行)
    this.CardPos = {};
    //终点坐标计算
    this.CardPos['x'] = app.globalData.ww * 5 / 8 - 18 * app.globalData.ww / 375 / 2;
    this.CardPos['y'] = app.globalData.hh - (48 * app.globalData.ww / 375 - 18 * app.globalData.ww / 375 / 2);
  },
//点击起点事件
addCard: function(e) {
    //起点位置
    this.finger = {};
    //起点的坐标 左上角为坐标原点
    this.finger['x'] = e.touches["0"].clientX;
    this.finger['y'] = e.touches["0"].clientY;
    //调用运动方法
    this.run(this.finger, this.CardPos, e.currentTarget.dataset.obj, call);
  },
  //调用运动方法
  run: function(origin, target, goods) {
    var that = this,
      //完成一次抛物线总时间
      time = 500,
      //当前x轴坐标
      curr_x,
      //当前y周坐标
      curr_y,
      //抛物线幅度
      a = 0.01,
      b = 0,
      c = 0,
      //xy差相当于把终点移动到原点后的新坐标  即起点（0，0） 终点（diffx，diffy）
      diffx = target['x'] - origin['x'],
      diffy = target['y'] - origin['y'],
      start = new Date().getTime();
    //在x轴方向平均移动的速度计算
    var speedx = diffx / time;
    //b计算 根据抛物线公式抛物线公式 y=ax2+bx+c
    //那么y2-y1= ax22-ax12+bx2-bx1
	//	diffy=a*diffx2+b*diffx
	//	b=( diffy -a*diffx2)/diffx
    b = (diffy - a * diffx * diffx) / diffx;
    //移动初始点
    this.setData({
      hide_good_box: false,
      bus_x: that.finger['x'],
      bus_y: that.finger['y']
    })
    this.timer = setInterval(function() {
      if (new Date().getTime() - start > time) {
        clearInterval(that.timer);
        that.setData({
          hide_good_box: true,
          bus_x: target['x'],
          bus_y: target['y']
        });
        //完成抛物线回掉函数
        that.call(goods);
        return;
      }
      //x轴方向平均移动
      curr_x = speedx * (new Date().getTime() - start);
      //抛物线计算公式 y=ax^2+bx+c;
      curr_y = a * Math.pow(curr_x, 2) + b * curr_x + c;
      that.setData({
        bus_x: curr_x + origin['x'],
        bus_y: curr_y + origin['y']
      });
    }, 15);
  },

js实现抛物线

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="start" style="position: fixed;top: 50px;left: 200px;width: 50px;height: 50px;background-color: #ddd;"></div>
    <div id="run" style="position: fixed;top: 50px;left: 200px;width: 50px;height: 50px;background-color: #ddd;"></div>
    <div id="end" style="position: fixed;top: 400px;left: 500px;width: 50px;height: 50px;background-color: #ddd;"></div>
</body>
<script src="js/lib/jQuery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</html>

/**
* js抛物线
*/
(function (config) {
    function pow() {
        this.INTERVAL = 15;
        this.timer = null;
        this.config = config || {};
        // 起点
        this.origin = $(this.config.origin) || null;
        // 终点
        this.target = $(this.config.target) || null;
        // 运动的元素
        this.element = $(this.config.element) || null;
        // 曲线弧度
        this.a = this.config.a || 0.008;
        // 运动时间(ms)
        this.time = this.config.time || 500;
    }

    pow.prototype.init = function () {
        this.x1 = this.origin.offset().left;
        this.y1 = this.origin.offset().top;
        this.x2 = this.target.offset().left;
        this.y2 = this.target.offset().top;
        this.originx = this.x1;
        this.originy = this.y1;
        //xy差相当于把终点移动到原点后的新坐标  即起点（0，0） 终点（diffx，diffy）
        this.diffx = this.x2 - this.x1;
        this.diffy = this.y2 - this.y1,
        //在x轴方向平均移动的速度计算
            speedx = this.diffx / this.time;

        //b计算 根据抛物线公式抛物线公式 y=ax2+bx+c
        //那么y2-y1= ax22-ax12+bx2-bx1
        //	diffy=a*diffx2+b*diffx
        //	b=( diffy -a*diffx2)/diffx
        this.b = (this.diffy - this.a * this.diffx * this.diffx) / this.diffx;
        this.element.css({
            left: this.x1,
            top: this.y1
        });
    }

    pow.prototype.run = function () {
        var start = new Date().getTime(),
            _this = this;
        this.timer = setInterval(function () {
            if (new Date().getTime() - start > _this.time) {
                clearInterval(_this.timer);
                _this.element.css({
                    left: _this.x2,
                    top: _this.y2
                })
                typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
                return;
            }
            //x轴方向平均移动
            x = speedx * (new Date().getTime() - start);
            //抛物线计算公式 y=ax^2+bx+c;
            y = _this.a * x * x + _this.b * x;
            _this.element.css({
                left: x + _this.originx,
                top: y + _this.originy
            })
        }, _this.INTERVAL)
    }
    var p = new pow();
    p.init();
    p.run();
})({
    origin: document.getElementById('start'),
    target: document.getElementById('end'),
    element: document.getElementById('run'),
    callback: function (argument) {

    }
});

H5 canvas实现抛物线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="600" height="300" style="border:1px solid;"></canvas>
    <button onclick="draw()">绘制</button>
</body>
</html>

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var raf;
    //画布上画小球
    var ball = {
        x: 100,
        y: 100,
        radius: 25,
        vx: 5,
        vy: 2,
        color: 'blue',
        draw: function () {
            //模拟重力加速度
            ball.vy *= .99;
            ball.vy += .25;
            ctx.beginPath();
            //画图函数
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    };
    function draw() {
        //控制图像在画布内
        if (canvas.height < ball.y) {
            window.cancelAnimationFrame(raf);
            return;
        }
        //清除重新绘制
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ball.draw();
        ball.x += ball.vx;
        ball.y += ball.vy;
        /**
         * requestAnimationFrame方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。
         * 该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
         * 
        */
        raf = window.requestAnimationFrame(draw);
    }
    ball.draw();

js实现购物车 抛物线运动

小程序中实现抛物线

js实现抛物线

H5 canvas实现抛物线

猜你喜欢

js实现购物车抛物线运动