js绘制购物车抛物线动画

2023年6月10日下午11:04 • JavaScript

下面我将详细讲解一下如何使用JavaScript绘制购物车抛物线动画的完整步骤。

步骤一：创建抛物线数据

为了实现抛物线动画，我们需要先创建一些抛物线的数据。如下代码所示：

function getBesselPoint(x1, y1, x2, y2, x3, y3, t) {
  var cx = 3 * (x2 - x1),
      bx = 3 * (x3 - x2) - cx,
      ax = x3 - x1 - cx - bx,
      cy = 3 * (y2 - y1),
      by = 3 * (y3 - y2) - cy,
      ay = y3 - y1 - cy - by;
  var xt = ax * (t*t*t) + bx * (t*t) + cx * t + x1;
  var yt = ay * (t*t*t) + by * (t*t) + cy * t + y1;
  return [xt, yt];
}

以上代码中的 getBesselPoint() 函数用于计算三次贝塞尔曲线的坐标点。三次贝塞尔曲线需要三个点，分别是起点 x1, y1、控制点 x2, y2、终点 x3, y3。参数 t 表示贝塞尔曲线完成度数。

例如，我们有一个起点为 (0, 0)，控制点为 (100, 100)，终点为 (200, 0) 的三次贝塞尔曲线，我们使用以下代码获取贝塞尔曲线在 50% 完成度的坐标点：

getBesselPoint(0, 0, 100, 100, 200, 0, 0.5); // 返回 [100, 50]

步骤二：绘制抛物线

我们使用 Canvas 的 drawImage() 方法来绘制抛物线。具体步骤如下：

获取起点和终点的坐标：购物车图标的中心点为起点，购物车数量图标的中心点为终点；
计算控制点的坐标：根据起点和终点坐标，计算出并存储控制点的坐标；
使用 Canvas 绘制三次贝塞尔曲线，并将购物车图标绘制到抛物线动画的起点处；
将购物车数量图标绘制到抛物线动画的终点处；

代码示例：

// 获取起点和终点的坐标
var startX = car.offsetLeft + car.offsetWidth / 2;
var startY = car.offsetTop + car.offsetHeight / 2;
var endX = num.offsetLeft + num.offsetWidth / 2;
var endY = num.offsetTop + num.offsetHeight / 2;

// 计算控制点的坐标
var controlX = (startX + endX) / 2;
var controlY = startY - 120;

// 开始绘制抛物线动画
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(controlX, controlY, controlX, controlY, endX, endY);
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.stroke();

var img1 = new Image();
img1.onload = function() {
  ctx.drawImage(img1, startX - img1.width / 2, startY - img1.height / 2);
}
img1.src = 'car.png';

var img2 = new Image();
img2.onload = function() {
  ctx.drawImage(img2, endX - img2.width / 2, endY - img2.height / 2);
}
img2.src = 'num.png';

以上实例中，我使用 canvas 元素创建了一个画布，并利用上文中计算的抛物线坐标绘制了一条抛物线。同时，我又绘制了购物车图标和购物车数量图标在抛物线的起点和终点处。

步骤三：添加动画效果

最后一步是为抛物线添加动画效果，使它看起来像购物车的数量从购物车中飞出来的一样。下面是示例代码：

// 添加动画效果
var scale = 1;
var timer = setInterval(function() {
  if (scale > 2) {
    clearInterval(timer);
    document.body.removeChild(canvas);
  } else {
    scale += 0.1;
    var x = (endX - startX) / 2 * scale;
    var y = -Math.pow((x - (endX - startX) / 2), 2) / 100 + controlY - scale * 15;
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.bezierCurveTo(controlX, controlY, controlX, controlY, endX, endY);
    ctx.strokeStyle = '#ff0000';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.drawImage(img1, startX - img1.width / 2, startY - img1.height / 2, img1.width * scale, img1.height * scale);
    ctx.drawImage(img2, x - img2.width / 2, y - img2.height / 2, img2.width, img2.height);
  }
}, 30);

以上实例中，我使用 setInterval() 方法添加了购物车数量飞出动画。具体实现是根据时间的推移，计算出经过的时间后的缩放比例和偏移量，并使用 drawImage() 方法重新绘制到画布上。在动画结束时，我使用 clearInterval() 方法停止动画并将画布从文档中移除。