动态控制的平滑程度，本质上取决于相邻两帧之间如何计算中间值。如果只是简单地把目标值跳过去，视觉上就会表现为生硬跳变；如果给中间值一个合理的过渡路径，画面就会柔和连续。帧率始终是有限的，想要让控制动作看起来像真实世界的运动，就必须在离散帧之间填补出符合预期的中间状态。这个填补过程用到的数学工具就是插值，而关键帧则是插值的控制锚点。
插值算法的基本原理
插值解决的核心问题是：给定两个已知数值，如何求它们之间某个位置的取值。在动态控制场景中，这两个数值就是起始状态和结束状态，中间位置则是动画进行到的进度百分比。最基础的插值方式是线性插值（LERP，Linear Interpolation），它的计算方式极其简单：当前值等于起始值加上进度乘以两值的差。公式写出来是 value = start + progress * (end - start)，其中 progress 的取值范围是 0 到 1。
仅从数学公式看，线性插值似乎已经可以完成过渡任务。但实际应用到动态控制时，线性插值会暴露出明显的机械感。因为真实物体运动很少保持匀速，往往有加速和减速的过程。线性插值让所有中间帧都以相同的速度变化，看起来就像机器人运动，缺少重量感和惯性。所以实际工程中会把线性插值作为基础工具，而不是最终方案。
function lerp(start, end, progress) {
return start + (end - start) * progress;
}
// 简单调用示例：从 0 过渡到 100，进度 0.5 时的值
const result = lerp(0, 100, 0.5);
console.log(result); // 输出 50
上面的代码是最简实现，适用于标量数值。但动态控制往往涉及二维坐标、三维向量甚至颜色值，这类复合数据需要把各个分量分别做插值和组合。思路是相通的，只需要把标量插值函数应用到每个分量上，最后拼装回目标结构。
线性插值的局限与缓动函数
线性插值的匀速特性在很多动效场景中恰恰是问题所在。想象一个侧边栏面板展开的动画，如果整个动画过程始终以匀速展开，视觉上会显得非常呆板。真实世界的滑动行为通常是加速启动、减速停稳，触碰边缘时还有一点回弹余量。线性插值无法表达这些细节，于是就有了缓动函数（Easing Function）的需求。
缓动函数的本质是改变插值进度的变换方式。它不直接用原始 progress 作为插值因子，而是先将 progress 经过一个数学变换，再交给基础插值函数计算。比如 ease-in 让动画从慢到快，适合表示物体被弹出；ease-out 让动画从快到慢，适合表示物体减速停下；ease-in-out 则两头慢中间快，适用范围最广。这套思想的代码实现就是在 lerp 函数外面套一层非线性变换。
// 缓动函数：先处理进度，再调用插值
function easeInQuad(progress) {
return progress * progress;
}
function easeOutQuad(progress) {
return 1 - (1 - progress) * (1 - progress);
}
function easeInOutCubic(progress) {
return progress < 0.5
? 4 * progress * progress * progress
: 1 - Math.pow(-2 * progress + 2, 3) / 2;
}
function interpolateWithEasing(start, end, progress, easingFunc) {
const adjustedProgress = easingFunc(progress);
return lerp(start, end, adjustedProgress);
}
缓动函数数量繁多，每种函数的加速度曲线不同，对动效手感的影响也截然不同。比如 quad 系列变化比较温和，适合日常交互；cubic 系列有更明显的加速感，适合弹窗等需要引人注意的元素；expo 系列则变化极端，启动极慢、末尾极快，适合特殊场景。开发者不必把每种缓动曲线都记下来，但需要理解如何自己编写一个缓动函数。任何输入在 0 到 1 之间、输出也在 0 到 1 之间且连续递增的函数，都可以作为缓动函数使用。
贝塞尔曲线与连续过渡
缓动函数虽然解决了速度变化的问题，但本质上是预设的数学公式，无法灵活调整。很多实际交互场景需要设计者对过渡过程做更精细的调节，比如先小幅度回退、再前进、最后超过目标一点点再回来。这种复杂的运动规律用一个简单缓动函数难以描述，更强的工具是贝塞尔曲线（Bezier Curve）。
贝塞尔曲线的核心思想是用几个控制点来定义一条曲线，曲线的自变量是进度，因变量是插值因子。最常用的三次贝塞尔曲线有四个控制点：起点、终点和两个中间控制点。两个中间控制点的位置决定了曲线的形状，也就决定了插值过程的速度变化。前端动画领域广泛使用的 ease、ease-in、ease-out 等预设效果，本质上就是三次贝塞尔曲线的特定参数组合。
function cubicBezier(p0, p1, p2, p3, t) {
const mt = 1 - t;
const mt2 = mt * mt;
const t2 = t * t;
const mt3 = mt2 * mt;
const t3 = t2 * t;
return mt3 * p0
+ 3 * mt2 * t * p1
+ 3 * mt * t2 * p2
+ t3 * p3;
}
// 三次贝塞尔横坐标代表时间进度，纵坐标代表插值因子
// 以下示例计算一个带有回弹效果的过渡因子
const progress = 0.4;
const easedFactor = cubicBezier(0, 0.2, 0.2, 1, progress);
在动态控制中应用贝塞尔曲线时，需要分别计算横坐标和纵坐标。横坐标曲线通常被约束为单调递增，以保证时间进度不会倒退；纵坐标则直接作为插值因子传给 lerp。不过三次贝塞尔直接求解从横坐标到纵坐标的映射并不简单，应用层一般使用采样表或迭代逼近来求逆。一些专业动画库内置了完全体贝塞尔过渡，开发者只需声明控制点就能获得丝滑的过渡效果。
关键帧体系的工程设计
当动态控制需要经过多个中间状态时，单纯的两个端点和插值函数已经不够用。比如一个角色从站立到蹲下再到跳跃，动作路径包含多个状态节点，每个节点刻画状态的一个关键瞬间。这就是关键帧（Keyframe）的概念：在一段连续的时序中，只标记部分时间点上物体的完整状态，其余时间点的状态由插值算法自动计算出来。
关键帧体系的好处在于数据驱动。设计者只需要记录关键帧，中间帧由程序生成，不仅节省数据量，还方便调整动画节奏。工程实现上，关键帧通常以一个数组或链表形式组织，每个关键帧记录时间戳和该时刻的完整属性快照。插值时先找到当前时间落在哪两个关键帧之间，再把局部时间归一化到 0 到 1 区间，最后套用插值算法得到中间状态。
// 定义一个基础关键帧类
class Keyframe {
constructor(time, values) {
this.time = time;
this.values = values;
}
}
// 关键帧序列 + 插值函数
class KeyframeTrack {
constructor(keyframes, easingFunc) {
this.keyframes = keyframes.sort((a, b) => a.time - b.time);
this.easing = easingFunc || ((t) => t);
}
getValueAt(time) {
const frames = this.keyframes;
if (time <= frames[0].time) {
return Object.assign({}, frames[0].values);
}
if (time >= frames[frames.length - 1].time) {
return Object.assign({}, frames[frames.length - 1].values);
}
let i = 0;
while (i < frames.length - 1 && frames[i + 1].time < time) {
i++;
}
const frameA = frames[i];
const frameB = frames[i + 1];
const segmentDuration = frameB.time - frameA.time;
let localProgress = (time - frameA.time) / segmentDuration;
localProgress = this.easing(localProgress);
const result = {};
Object.keys(frameA.values).forEach((key) => {
const a = frameA.values[key];
const b = frameB.values[key];
result[key] = a + (b - a) * localProgress;
});
return result;
}
}
const track = new KeyframeTrack([
new Keyframe(0, { x: 0, opacity: 0 }),
new Keyframe(500, { x: 100, opacity: 1 }),
new Keyframe(1000, { x: 200, opacity: 0 })
], (t) => t * (2 - t));
// 查询时间点 750ms 处的状态
const state = track.getValueAt(750);
console.log(state);
上面代码展示了一个最简实现：KeyframeTrack 类负责管理关键帧序列、查找相邻帧、计算插值。这里的关键点有两个，一是时间段的划分，二是插值因子在局部时间段内的归一化。整个关键帧类必须是通用结构，才能适用于位置、透明度、旋转角等任意连续性属性的组合。实际项目中，开发者在关键帧数据结构里可能还要加入持续时间、缓动类型、循环次数等元数据，以便构建复杂动画序列。
帧循环中的动态参数修正
插值计算本身再精确，如果在动画循环中使用了错误的时间基准，平滑度仍会受到破坏。前端动画通常通过 requestAnimationFrame 驱动帧循环，每帧执行一次状态更新。每一次回调需要重新计算当前时间相对动画起点的时间偏移，以偏移量作为查询关键帧序列的时间参数。不能用固定的帧计数来代替时间，因为设备刷新率不同，帧计数会导致速度差异。
let startTime = null;
let running = true;
function animateFrame(timestamp) {
if (!startTime) {
startTime = timestamp;
}
const elapsed = timestamp - startTime;
const state = track.getValueAt(elapsed);
// 应用状态到页面元素
const element = document.getElementById('target');
element.style.transform = 'translateX(' + state.x + 'px)';
element.style.opacity = state.opacity;
if (elapsed < 1000 && running) {
requestAnimationFrame(animateFrame);
}
}
requestAnimationFrame(animateFrame);
帧循环中还需要注意时间戳单调递增的特性，避免出现时间回跳导致插值倒退。某些浏览器在窗口切换回来时可能给出一段较大的时间跳跃，这种情况下直接按真实时间插值会把动画瞬间拉到底部，观感突兀。对此常用的处理方式是限制单帧最大时间步长，超出预期的部分丢弃或均摊到后续若干帧。
动态控制平滑并不依赖强大算力，反而非常依赖算法的合理设计。插值的核心是把离散的帧连续化，关键帧解决了多阶段状态控制问题，缓动函数让过渡符合物理直觉。把这套体系真正落地的关键，是理解插值计算的时间基准、数据类型和过渡函数的搭配关系。掌握了这些要素，程序化的动态控制就可以做到既饱满又自然。