JavaScript贝塞尔曲线数字分段增长动画
本文演示如何用JavaScript结合贝塞尔曲线，创建平滑的、分段显示的数字增长动画效果。目标是从0增长到1000，增长速度由贝塞尔曲线控制，数字逐位递增。
首先，我们需要理解贝塞尔曲线。它由控制点定义，控制点的坐标决定曲线形状。通过调整控制点，我们就能控制动画速度。
以下代码片段展示了如何使用贝塞尔曲线控制数字增长速度：
// 贝塞尔曲线控制点
const startX = 0;
const startY = 0;
const cp1X = 0.1;
const cp1Y = 0.4;
const cp2X = 0.9;
const cp2Y = 0.6; //调整此值可以改变动画曲线
const endX = 1;
const endY = 1;
// 计算贝塞尔曲线 y 坐标
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 = null;
const displayElement = document.getElementById('display'); // 获取显示数字的元素
function update() {
if (startTime === null) startTime = Date.now();
const elapsed = Date.now() - startTime;
const t = Math.min(1, elapsed / duration);
count = Math.floor(bezier(t) * target); // 使用贝塞尔曲线计算当前值
displayElement.textContent = count; // 更新显示
if (elapsed < duration) {
requestAnimationFrame(update);
}
}
update(); // 开始动画
这段代码定义了贝塞尔曲线控制点和 bezier 函数计算曲线上的点。update 函数使用 requestAnimationFrame 确保动画流畅，并用 Math.floor 将计算结果取整显示。 为了实现分段显示，需要更复杂的数字渲染逻辑（例如，逐位更新数字），这部分代码需要根据具体需求补充。 例如，可以使用多个span元素分别显示数字的每一位，并分别更新它们。 这段代码提供了贝塞尔曲线控制动画速度的核心部分。
立即学习“Java免费学习笔记（深入）”；
请注意，你需要在HTML中添加一个id为display的元素来显示数字： <span id="display">0</span>。 完整的数字分段显示需要进一步的代码补充，例如将数字拆分成数组，然后分别更新每个数字的显示。
