小程序端使用 Canvas 绘制抛物线，实现商品加入购物车的效果

2023-09-27 17:15:40

导言

在 618 狂欢季，小程序成为消费者购物的重要渠道。京东到家小程序也不甘落后，推出了各式各样的促销活动。为了让购物体验更加流畅、有趣，京东到家小程序开发了一个巧妙的动画效果：当用户点击商品时，一个小球会从商品处飞向购物车，形成一条优美的抛物线轨迹。

这个动画效果背后的实现原理就是使用 Canvas 绘制抛物线。本文将带你深入剖析这个效果的实现过程，并提供一个详细的教程，让你也能在自己的小程序中实现类似的效果。

实现原理

要绘制抛物线，需要用到以下数学公式：

y = a * x^2 + b * x + c

其中，a、b 和 c 是常数。通过调整这些常数，可以控制抛物线的形状和位置。

在小程序中，可以使用 Canvas 组件来绘制抛物线。Canvas 组件是一个基于 HTML5 Canvas API 的组件，它提供了丰富的图形绘制功能。

步骤详解

1. 创建一个 Canvas 组件

<canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 获取 Canvas 上下文

const ctx = canvas.getContext('2d');

3. 定义抛物线参数

// 抛物线参数
const a = -0.005;
const b = 0.05;
const c = 0;

4. 绘制抛物线

// 抛物线开始点和结束点
const startX = 50;
const startY = 50;
const endX = 350;
const endY = 250;

// 抛物线分段数
const numPoints = 100;

// 计算每个点的坐标
for (let i = 0; i <= numPoints; i++) {
  const t = i / numPoints;
  const x = startX + (endX - startX) * t;
  const y = a * x * x + b * x + c;

  // 绘制点
  ctx.fillStyle = 'red';
  ctx.fillRect(x, y, 2, 2);
}

5. 添加动画效果

// 动画帧数
const fps = 60;

// 每帧执行的函数
function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新抛物线参数
  a += 0.001;

  // 重新绘制抛物线
  for (let i = 0; i <= numPoints; i++) {
    const t = i / numPoints;
    const x = startX + (endX - startX) * t;
    const y = a * x * x + b * x + c;

    // 绘制点
    ctx.fillStyle = 'red';
    ctx.fillRect(x, y, 2, 2);
  }

  // 持续执行动画
  requestAnimationFrame(animate);
}

// 开始动画
animate();