前两天我在浏览京东商城，正打算入手一台大疆的 Osmo Pocket 3 来记录生活。就在手指点击“加入购物车”的那一瞬间，屏幕上划过一道优雅的红色弧线，那个代表商品的小球精准地坠入了底部的购物车图标中。这一瞬间，我仿佛被某种微妙的交互设计击中了内心。这不仅仅是一个简单的功Neng反馈，geng像是一种视觉上的“多巴胺”奖励。

作为一名在代码世界里摸爬滚打多年的“切图仔”，这种细节上的精致感让我无法忽视。我不禁开始思考：这背后的技术原理是什么？Ru果让我来复刻这个效果，我该怎么Zuo？于是我决定放下手里的活计，花点时间深挖一下这个kan似简单实则暗藏玄机的动画实现。今天我们就来聊聊如何利用贝塞尔曲线，在 Web 端还原这种令人愉悦的购物车体验。

拒绝枯燥的自由落体：为什么我们需要曲线？

在开始敲代码之前，我们得先达成一个共识：直线运动在自然界中是极其罕见的。Ru果用户点击加号后小球只是直愣愣地或者像伽利略Zuo的铁球实验那样Zuo自由落体运动，那画面简直太美不敢kan。试想一下一个没有任何弧度、生硬地砸向购物车的小球，不仅破坏了页面的美感，还会让整个应用显得廉价。

为了不让它kan起来像是在Zuo物理实验，我们需要给它一点“人情味”。在视觉心理学中，曲线往往代表着柔和、自然和流畅。为了实现这一点，我们通常会引入一个向左的偏移量——比如 100px，让小球的运动轨迹呈现出一种抛物线的形态。这种非线性的运动轨迹，正是贝塞尔曲线大显身手的地方。

核心数学原理：二次贝塞尔曲线入门

别被“数学”这两个字吓跑了其实这里的原理非常直观。在计算机图形学中，贝塞尔曲线是描述形状和路径的神器。对于我们的购物车动画来说二次贝塞尔曲线就完全够用了。

简单来说二次贝塞尔曲线由三个关键点定义：

P0也就是我们点击“+”号按钮的位置。

P1这是一个kan不见的“幽灵点”，它像磁铁一样吸引着曲线，决定了抛物线的弯曲程度和方向。

P2也就是购物车图标的中心位置。

曲线上任意一点的坐标，douKe以通过时间变量 t来计算。公式大概长这样：

B = ²P₀ + 2tP₁ + t²P₂  

在我们的代码实现中，通过调整控制点 P1 的位置，就Neng完美控制小球的飞行轨迹。比如我们想让球先向左飞再落下就把控制点设在起点的左上方。

搭建舞台：Vue 组件的结构设计

好了废话不多说开始进入正题。既然是现代前端开发，我们肯定要用趁手的工具。这里我选择 Vue 3 配合 TypeScript 来演示。我们需要一个“舞台”，也就是我们的页面结构。

这个页面主要包含三个部分：商品列表区、底部的购物车锚点，以及那个负责飞行的“小球”容器。为了让效果geng逼真，我甚至让 AI 帮我生成了类似京东的商品卡片布局，什么“三轴防抖”、“24分钟达”的标签dou给它安排上，毕竟氛围感hen重要。

数据模型：对象池技术的应用

有了页面元素了我们需要思考一下数据层。你可Neng会问，为什么不每次点击dou创建一个新的 DOM 元素呢？这就涉及到性Neng优化的问题了。

用户的手速可Neng比你想象的要快得多。Ru果每次点击dou去创建和销毁 DOM 节点，浏览器hen快就会因为频繁的垃圾回收而卡顿。因此，我们采用了一种经典的优化手段——对象池。

简单来说就是预先创建好 3 个小球，把它们放在数组里“待命”。当用户点击时我们从池子里捞一个出来用；动画结束后把它擦干净放回池子里。这样既避免了频繁操作 DOM，又Neng应对连续点击的场景。

import { reactive, ref } from 'vue';
// 购物车商品计数
const totalCount = ref;
// 创建小球数组
const balls = reactive.fill.map => ({
  show: false,   // 是否显示
  startX: 0,     // 起点X坐标
  startY: 0,     // 起点Y坐标
  endX: 0,       // 终点X坐标
  endY: 0,       // 终点Y坐标
  pathX: 0,      // 路径X偏移量
  pathY: 0,      // 路径Y偏移量
  progress: 0    // 动画进度
})));

动画引擎：requestAnimationFrame 的优势

接下来是重头戏——动画逻辑。在早期的 Web 开发中，我们可Neng会用 `setTimeout` 或者 `setInterval` 来Zuo动画循环。但Ru果你现在还这么写，那可就真的暴露年龄了。

与传统的定时器相比，`requestAnimationFrame` 有以下不可替代的优势：

同步刷新率它是由浏览器专门为动画设计的 API，会根据屏幕的刷新率自动调整执行时机，保证动画不掉帧。

页面不可见时暂停当用户切换标签页或Zui小化窗口时浏览器会自动停止该循环，从而节省 CPU 和电量的消耗。

geng平滑的过渡它Neng保证每一帧的渲染间隔是均匀的，避免了定时器带来的时间累积误差。

在我们的 `startRolling` 函数中， 会获取起点和终点的元素位置。这里有个细节，为了让小球kan起来是刚好“掉”进购物车里的，我们对终点坐标进行了一些微调，减去了一些像素值，让它落在图标的中心凹陷处。

// 开始滚动动画
const startRolling =  => {
  // 获取起点和终点元素
  const startPoint = event.currentTarget as HTMLElement;
  const endPoint = document.querySelector as HTMLElement;
  if  {
    // 从对象池中找到一个空闲的小球
    const ball = balls.find;
    if  {
      // 获取起点位置
      const startRect = startPoint.getBoundingClientRect;
      ball.startX = startRect.left + startRect.width / 2;
      ball.startY = startRect.top + startRect.height / 2;
      // 获取终点位置
      const endRect = endPoint.getBoundingClientRect;
      const endX = endRect.left + endRect.width / 2;
      const endY = endRect.top + endRect.height / 2;
      // 微调终点位置，确保视觉上的精准
      ball.endX = endX - 5;
      ball.endY = endY - 5;
      // 设置路径偏移量
      ball.pathX = 0;
      ball.pathY = 0;
      // 激活小球并重置进度
      ball.show = true;
      ball.progress = 0;
      // 使用 requestAnimationFrame 启动高性Neng动画
      let startTime = Date.now;
      const duration = 600; // 动画持续时间
      function animate {
        const currentTime = Date.now;
        const elapsed = currentTime - startTime;
        ball.progress = Math.min;
        if  {
          requestAnimationFrame;
        } else {
          // 动画结束后延迟隐藏小球
          setTimeout => {
            ball.show = false;
          }, 100);
        }
      }
      requestAnimationFrame;
      // 增加购物车商品数量
      totalCount.value++;
    }
  }
};

轨迹计算：让小球飞出优美的弧线

Zui后也是Zui关键的一步：如何根据当前的进度 `progress`，算出小球应该在的坐标？这就是 `getBallStyle` 函数要Zuo的事情。

我们需要处理一个特殊情况：Ru果起点和终点几乎在同一垂直线上，直接计算会导致曲线是一条直线，没有美感。所以我们需要判断一下Ru果是垂直布局，就强制给控制点加一个向左的偏移。

这里我们 用到了二次贝塞尔曲线的公式。为了增加趣味性，我还给小球加了一个旋转效果，让它kan起来像是在空中翻滚。

// 获取小球样式
const getBallStyle =  => {
  if  return {};
  // t 代表当前的时间进度
  const t = ball.progress;
  const mt = 1 - t;
  // 判断起点和终点是否过于接近垂直线
  const isVertical = Math.abs <10;
  // 计算控制点 P1 的坐标
  let controlX, controlY;
  if  {
    // 垂直场景：向左偏移以产生弧度
    controlX = ball.startX - 100;
    controlY =  / 2;
  } else {
    // 常规场景：取中点并向左偏移
    controlX =  / 2 - 100;
    controlY =  / 2 + ;
  }
  // 二次贝塞尔曲线核心公式
  const x = mt * mt * ball.startX + 2 * mt * t * controlX + t * t * ball.endX;
  const y = mt * mt * ball.startY + 2 * mt * t * controlY + t * t * ball.endY;
  return {
    left: `${x}px`,
    top: `${y}px`,
    transform: `rotate` // 添加旋转效果
  };
};

与思考

通过这个小球飞入购物车的动画效果，我们不仅提升了用户体验，还复习了不少前端基础知识。从贝塞尔曲线的数学原理，到 `requestAnimationFrame` 的性Neng优化，再到对象池的设计模式，每一个细节dou值得推敲。

虽然这只是一个几百行代码就Neng实现的小功Neng，但它折射出的是对产品体验的极致追求。就像东哥的商城Neng卖出去东西一样，往往不是因为某个大功Neng，而是这些无数个微小的、让人感到舒适的瞬间累积起来的信任感。

代码Yi经整理好了感兴趣的Ke以去码上掘金kankan完整示例。希望这篇文章Neng让你在下一次面对类似需求时Neng自信地写出比自由落体geng优美的代码！恩恩……这就是技术的味道。

---