/** * @module @a-js-tools/createBezier * @file createBezier.ts * @description 生成贝尔赛曲线 * @author Mr.MudBean * @copyright 2026 ©️ Mr.MudBean * @since 2026-03-26 11:24 * @version 2.0.2 * @lastModified 2026-03-26 14:12 * * ## [贝尔赛曲线](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Values/easing-function#%E4%B8%89%E6%AC%A1%E8%B4%9D%E5%A1%9E%E5%B0%94%E7%BC%93%E5%8A%A8%E5%87%BD%E6%95%B0) * * 一种通过控制点生成光滑曲线的数学参数曲线,是平滑插值曲线。 * * 广泛应用于计算机图像学、字体设计、动画游戏开发、工业设计和医学图像处理。 * * 常见的贝尔赛曲线类型有二次和三次,其中三次贝尔赛曲线使用最多。曲线具有端点插值、凸包性。 * */ /** * ## 在 JS 中模拟 CSS cubic-bezier(p1x, p1y, p2x, p2y) * * @param p1x - 第一个控制点 X * @param p1y - 第一个控制点 Y * @param p2x - 第二个控制点 X * @param p2y - 第二个控制点 Y * @returns 一个接收时间 t (0-1) 返回进度值 (0-1 或超出) 的函数 * @example * ```ts * // --- 使用示例 --- * * // 1. 定义一个类似 CSS 'ease-in-out' 的曲线: cubic-bezier(0.42, 0, 0.58, 1) * const myEaseInOut = createBezier(0.42, 0, 0.58, 1); * * // 2. 定义一个带回弹效果的曲线: cubic-bezier(0.68, -0.55, 0.27, 1.55) * const myElastic = createBezier(0.68, -0.55, 0.27, 1.55); * * // 3. 在 JS 动画循环中使用 * let startTime = null; * const duration = 1000; // 1秒 * const element = document.getElementById('box'); * * function animate(timestamp) { * if (!startTime) startTime = timestamp; * const elapsed = timestamp - startTime; * * // 计算归一化时间 (0 到 1) * let rawTime = Math.min(elapsed / duration, 1); * * // 【关键点】将线性时间 rawTime 传入贝塞尔函数,得到非线性进度 * const progress = myElastic(rawTime); * * // 应用进度 (例如移动距离) * const distance = 300 * progress; * element.style.transform = `translateX(${distance}px)`; * * if (elapsed < duration) { * requestAnimationFrame(animate); * } * } * * requestAnimationFrame(animate); * ``` */ export declare function createBezier(p1x: number, p1y: number, p2x: number, p2y: number): (t: number) => number;