js 中贝塞尔曲线如何使用呢？

Question

例如： 数字 0 增涨至 1000 ，我希望累加速度由 贝塞尔曲线 控制。
此外数字的展示能否分开呢？例如这般：

我需要的是具体的实现代码或思路，谢谢。

Answer 1

试一下吧：

// 定义贝塞尔曲线控制点和参数
const startX = 0;
const startY = 0;
const cp1X = 0.1;
const cp1Y = 0.4;
const cp2X = 0.1;
const cp2Y = 1;
const endX = 1;
const endY = 1;

// 计算贝塞尔曲线上某一时刻 t 的对应点
function bezier(t) {
  const cx = 3 * (cp1X - startX);
  const cy = 3 * (cp1Y - startY);
  const bx = 3 * (cp2X - cp1X) - cx;
  const by = 3 * (cp2Y - cp1Y) - cy;
  const ax = endX - startX - cx - bx;
  const ay = endY - startY - cy - by;
  const x = ax * t * t * t + bx * t * t + cx * t + startX;
  const y = ay * t * t * t + by * t * t + cy * t + startY;
  return y;
}

// 模拟数字增涨过程并使用贝塞尔曲线控制增涨速度
let count = 0;
const target = 1000;
const duration = 3000;
const startTime = Date.now();
function update() {
  const elapsed = Date.now() - startTime;
  count = Math.round(bezier(Math.min(1, elapsed / duration)) * target);
  if (elapsed < duration) {
    requestAnimationFrame(update);
  }
}

// 在页面上显示数字增涨动画
update();
function render() {
  document.getElementById("count").textContent = count;
  requestAnimationFrame(render);
}
render();

首先定义了一个贝塞尔曲线的控制点和参数，然后实现了一个计算贝塞尔曲线上某一时刻对应点的函数。接着，使用update函数模拟数字增涨过程，并使用贝塞尔曲线控制增涨速度，最终得到了实时的数字增涨结果。最后，在页面上显示数字增涨动画，使用requestAnimationFrame函数不断更新数字显示的内容，从而实现了数字增涨效果的动态展示。