UI动效背后的数学原理：缓动、贝塞尔与物理模拟

做UI动效做得一久，你会发现一个很有意思的现象：那些一眼看上去特别“高级”的动效，往往不是用了多复杂的技术栈，也不是某位设计师凭空拍脑袋调出来的手感，而是背后有一层特别扎实的数学逻辑在托底。反过来，很多动效看起来“不对劲”“有点僵”“说不清哪里怪”，十有八九也是数学上出了问题——要么缓动函数选错了，要么弹性参数没调对，要么曲线越界了。

这篇文章我就想掰开揉碎聊一聊，UI动效背后到底藏着哪些数学原理。我不会用那种吓人的公式堆砌，而是尽量用实际的动效场景去解释，比如为什么线性动画会显得机械、贝塞尔曲线是怎么改变你动画的节奏的、为什么有些loading动画的旋转看起来特别流畅、物理模拟和普通缓动的本质区别在哪里。适合谁看？前端开发者、UI设计师、动效开发、还有对动画实现有兴趣的客户端开发者，都可以读一读。读完以后，你再看那些“高级感”动效，应该能一眼看出它是用什么模型做出来的。

1. 动效的时间轴：为什么线性动画看起来假

动效的本质，说白了就是属性随时间变化。一个按钮从A点移到B点，一个透明度从0变到1，一个卡片旋转从0度到45度，这些都是时间驱动下的数值变化。最早接触动画实现的时候，最容易踩的一个坑就是：把动画当成纯粹的“位移”“透明度”变化，忽略了时间维度上的节奏控制，结果做出来的东西要么生硬，要么枯燥。

1.1 从线性插值说起

最简单的动画数学模型是线性插值，也就是让属性值随时间均匀变化。假设有一个值从a变到b，经过时间t，线性插值公式长这样：

code复制value = a + (b - a) * t

t的取值范围是0到1，代表动画进度。这个公式虽然简单，但它描述的是“每一帧变化量完全相等”的运动。现实中，这种运动只有机械臂、传送带、系统进度条这类场景才符合。人的视觉系统对匀速运动非常不敏感，但在感知运动的“起始”和“结束”时又特别敏锐，所以线性动画看起来特别“机器人”，缺乏生命力。

人类感知运动和物理世界有一个默契：任何物体的启动都需要加速，停止之前需要减速。你扔一个球，球脱手时速度最快，慢慢减速到最高点，再加速落下，整个过程是速度曲线不断变化的，而不是一根直线。UI动效要想获得“自然感”，就得模拟这种变速规律，于是就有了缓动函数。

1.2 缓动函数：用幂函数模拟现实节奏

缓动函数是UI动效中最基础也最重要的数学工具。它本质上是一个映射函数，把输入时间t（0到1）映射为输出进度e（0到1），但映射关系不再是直线，而是一条曲线。常见的缓动有三类：

• easeIn：先慢后快，适合物体出场、从静止加速的场景。数学原型是幂函数，比如 t 的平方、三次方或更高次幂。
• easeOut：先快后慢，适合物体退场、接近终点的场景，比如卡片滑入后缓缓停住。
• easeInOut：两头慢中间快，适合居中类动画、弹窗出现、页面切换这种同时有起止感的场景。

以经典的easeOutQuad为例，它的公式是：

code复制e = 1 - (1 - t) * (1 - t)

看起来比线性复杂一点，但效果差异极大。同样的位移动画，线性是等速前进，easeOut是起步冲出去、最后轻缓落地，视觉上像是一个有质量的物体在运动。

说个我自己的实践经验：第一次做列表删除动画时，我为了“高级感”，给所有元素都加了easeInOut，结果删除操作变得拖泥带水，每个元素都要经历“迟钝启动—加速—又减速”的过程，人等着它消失非常着急。后来换成了短时间的easeOut，删除干脆利落，视觉上清爽很多。这里有个经验：任何动效的缓动选择，都必须服务于交互反馈的即时性，而不是只看曲线好看。

1.3 实战中怎么选这些曲线

现在很多前端项目都在用CSS或类似声明式方案，CSS内置了ease、ease-in、ease-out、ease-in-out等关键词。这些关键词背后其实都有具体的贝塞尔曲线参数，比如ease平时对应 cubic-bezier(0.25, 0.1, 0.25, 1)，ease-out对应 cubic-bezier(0, 0, 0.58, 1)。如果你只依赖这些固定关键词，调整空间会非常有限。

真实的动效调优过程里，我推荐自己跑一下这些函数，用代码直观地观察曲线形态。下面是一个简单的控制台脚本，可以输出不同缓动函数在时间轴上的值：

javascript复制function easeOutQuad(t) {
  return 1 - (1 - t) * (1 - t);
}

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

function easeInOutCubic(t) {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
}

for (let i = 0; i <= 10; i++) {
  const t = i / 10;
  console.log(
    't:', t.toFixed(1),
    '| easeOutQuad:', easeOutQuad(t).toFixed(3),
    '| easeOutCubic:', easeOutCubic(t).toFixed(3),
    '| easeInOutCubic:', easeInOutCubic(t).toFixed(3)
  );
}

输出来以后你就能直观看到：线性每步涨0.1，而easeOutCubic在t=0.1时已经跑到了0.271，说明动画前10%的时间就完成了约27%的进度，后半程则极其平缓。这种“谁拉动谁”的差异，就是动效手感的根源。

提示：缓动函数还有一个容易忽略的点——它们描述的是一维数值的映射。在真机调试时，遇到“动画整体都慢/快”的问题，不一定是缓动函数选错，也可能是动画时长本身太短或太长。曲线决定节奏分配，时值决定整体快慢，两者要分开调。

2. 贝塞尔曲线：动效设计师的核心数学工具

如果说缓动函数是动效数学的入门砖，那贝塞尔曲线就是UI动效真正的主力。不管是CSS里的cubic-bezier、设计工具里的曲线编辑器，还是Lottie、SVG路径动画，背后都站着同一套贝塞尔数学。理解它，你才真正读懂那些花里胡哨的动画配置。

2.1 贝塞尔曲线的数学定义

三次贝塞尔曲线由四个点定义：起点P0、控制点P1、控制点P2、终点P3。曲线的参数方程是：

code复制B(t) = (1-t)^3 * P0 + 3 * (1-t)^2 * t * P1 + 3 * (1-t) * t^2 * P2 + t^3 * P3

其中t从0到1。注意这个公式是在二维空间里描述的，P0到P3的每个点都有x和y两个分量。当我们在CSS或动效工具里拖拽“缓动曲线”时，其实是在拖两个控制点，也就是P1和P2，P0通常是起点(0,0)，P3是终点(1,1)。

这个公式并不难理解。你可以把它想象成一种“加权平均”：在t=0时，P0的权重是1，其他点权重是0，所以曲线从P0出发；随着t变大，P1和P2逐渐接管方向，直到t=1时完全落在P3上。控制点的位置决定了曲线在中间的弯曲方式，也就是“先加速还是先减速”。

2.2 CSS cubic-bezier 的背后逻辑

CSS的 transition-timing-function 或 animation-timing-function 支持写 cubic-bezier(n, n, n, n)，这四个值分别是P1的x、y和P2的x、y。比如：

css复制.card {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

这组参数中，P1的y是-0.55，P2的y是1.55，都超出了0到1的范围，结果就是这个动画出现了“过冲”——物体先冲出目标位置，再回落到终点，产生了弹性效果。你可以试想缓动曲线从左下角开始，先往下探一点再急速上升，冲过终点再回头稳定，这就是经典的“弹簧感”数学表现。

这种y值越界是CSS早期经常被忽略的能力。很多开发者以为贝塞尔曲线的参数只能停在0到1之间，其实坐标轴并不限制y值（x值一般限定在0到1，因为动画时间不能倒退），超出范围的y会带来回弹效果，这是实现物理感最快的数学手段之一。

一个实用的小技巧：如果希望弹跳感更强但不抖得太恶心，可以控制P2的y值在1.2左右，而不是一上来就给1.8，因为过高的y值会导致动画末端反复横跳，视觉上很廉价。

2.3 用代码把贝塞尔曲线转成实际动画值

手动拖控制点时，设计师只需要凭感觉调整；但在代码里，我们经常需要拿到每个时间点t对应的具体数值。用上面的三次贝塞尔公式可以直接算：

javascript复制function cubicBezier(p0, p1, p2, p3, t) {
  const u = 1 - t;
  return {
    x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
    y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y
  };
}

不过这里有个实际问题：CSS动画的时间进度是t，但贝塞尔曲线的B(t)返回的x值不等于t，而是曲线上的“时间位置”。CSS的timing-function本质上是在二维平面上给定一个t，然后求曲线上x分量对应的y分量，这个求逆过程通常需要用数值方法解方程。

如果只是做前端业务，不追求极致的底层实现，还有一种更快的方式：先离线采样贝塞尔曲线，生成一组离散的关键帧，再把这些关键帧应用到动画里。比如：

javascript复制function sampleBezier(p1x, p1y, p2x, p2y, frames = 100) {
  const points = [];
  for (let i = 0; i <= frames; i++) {
    const t = i / frames;
    const { x, y } = cubicBezier(
      { x: 0, y: 0 }, { x: p1x, y: p1y }, { x: p2x, y: p2y }, { x: 1, y: 1 },
      t
    );
    points.push({ x, y });
  }
  return points;
}

采样后，你可以根据需要的动画时长，把这些点作为keyframes喂给动画库或者Canvas渲染循环。这种方式很适合“自己写粒子动画、框架动画”的场景。

注意：CSS的cubic-bezier要求x值在[0,1]范围内，不然会触发无效值。如果要做更复杂的路径动画，那就直接用SVG的path或Canvas的bezierCurveTo，它们不受这个限制，但那是另一套实现体系了。

3. 三角函数与波：动效里的呼吸感和循环

缓动函数负责“一次性”的动画，而很多UI里还有一种反复循环的动效，比如加载动画、呼吸灯、提示红点的脉冲、进度环的虚线旋转。这类动效的核心数学工具是三角函数：正弦和余弦。

3.1 sin函数如何创造平滑循环

一个基础的正弦函数图像是一条平滑的波浪线，它的值在-1到1之间循环变化。UI动效里，我们通常会把当前时间映射到正弦函数的参数上，然后用sin值去驱动某个属性。公式大概是：

code复制value = center + amplitude * sin(2 * PI * frequency * t + phase)

拆开看：

• center 是动效的基准值，比如元素缩放的中心点是1。
• amplitude 是振幅，决定了波动的幅度，比如呼吸动画里scale从0.95到1.05，振幅就是0.05。
• frequency 是频率，决定波动快慢，比如每秒波动多少次。
• phase 是相位，可以让多个对象错峰运动，不至于全体同步。

举个例子，一个呼吸灯效果可以这样实现：

css复制@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

但如果你完全依赖keyframes，就只能写死几个百分比。用sin函数驱动的话，代码更简洁，而且能连续地计算任何时间点的值，特别适合Canvas、WebGL这种逐帧渲染环境。

3.2 实际案例：用Canvas做一个流动加载环

我经常用Canvas做一些轻量级的动效组件，加载环就是典型的三角函数应用。来看一个简单的实现思路：

javascript复制const canvas = document.getElementById('loader');
const ctx = canvas.getContext('2d');
const radius = 40;
let startTime = performance.now();

function draw(now) {
  const elapsed = (now - startTime) / 1000;
  const startAngle = elapsed * 2 * Math.PI; // 不断旋转的起始角
  const arcLength = Math.PI * 1.2; // 弧的长度，保持不变

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(100, 100, radius, startAngle, startAngle + arcLength);
  ctx.strokeStyle = '#4A90D9';
  ctx.lineWidth = 6;
  ctx.lineCap = 'round';
  ctx.stroke();

  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

这里timeToAngle就是最简单的线性映射——每秒转过2π弧度，也就是一圈。弧长固定为1.2π，所以视觉上是一个“缺口”在旋转。如果你觉得这种匀速旋转不够精致，可以把角度变化也换成缓动，甚至叠加正弦抖动，让弧长忽长忽短，看起来就更灵动。

iOS的加载菊花、Android的Material圆形进度，本质上都离不开这种三角函数驱动的旋转逻辑，只不过外部包装更复杂一些。

3.3 波形组合：从单波到复合运动

正弦波最大的好处是可叠加。多个不同频率、不同振幅的正弦波形可以线性相加，产生非常丰富的运动轨迹。比如一个下拉刷新的小箭头，想要做出“上下波动+左右摆动”的效果，可以把y轴偏移用sin驱动，x轴偏移用cos驱动，两个波的相位差设为90度，就形成了圆周或椭圆运动。

code复制x(t) = centerX + a1 * sin(2π * f1 * t)
y(t) = centerY + a2 * sin(2π * f2 * t + phase)

如果f1和f2相同且a1等于a2，就是一个圆；如果频率不同，就会得到李萨如曲线，产生类似弹簧、绳索摆动的复杂轨迹。这种技术常被用在加载动画、粒子系统、背景装饰动画里。

我踩过的一个坑：在iOS、Android和Web三端做同款正弦动画时，如果直接用实际时间戳，不同设备的帧率会带来肉眼可见的节奏差异。正确做法是先算一个“归一化时间变量”，把真实时间除以动画时长，得到0到1的进度，再用这个进度去驱动三角函数，这样动画速度和屏幕刷新率无关，各端表现才一致。

4. 弹性、阻尼与惯性：物理模拟类动效的数学实现

缓动和三角函数能做很多动效，但要做出“真实物理感”，还得靠另一套数学工具——物理模拟。这里的代表场景包括：iOS列表滚动到底部的橡皮筋效果、卡片删除时的弹跳、通知横幅滑入时的阻尼震荡、按钮按压后的回弹。

4.1 从“弹簧模型”说起

最常见的物理模拟模型是弹簧-阻尼系统。它的运动可以用一个二阶微分方程来描述：

code复制m * a + c * v + k * x = 0

其中m是质量，c是阻尼系数，k是弹簧刚度，x是偏离平衡位置的位移，v是速度，a是加速度。用代码模拟时，我们不需要精确解方程，只需要在每个渲染帧里做数值积分：

javascript复制function springAnimation(target, spring, deltaTime) {
  // spring 包含 position, velocity, stiffness, damping
  const force = -spring.stiffness * (spring.position - target);
  spring.velocity += force * deltaTime;
  spring.velocity *= Math.max(0, 1 - spring.damping * deltaTime);
  spring.position += spring.velocity * deltaTime;
  return spring.position;
}

这个循环里最重要的参数是stiffness和damping。stiffness越大，回弹越快；damping越大，震动衰减越快。当damping小于某个临界值时，物体会出现“过冲后反复震荡”的效果；大于或等于临界值时，物体平滑逼近目标。

这个临界阻尼值在数学上是 2 * sqrt(m * k)。如果damping刚好等于临界值，物体会以最快速度回到平衡位置而不产生过冲。做UI列表项插入时，我一般会把阻尼设到临界值附近，让元素快速到位但不跳；只有做“成功反馈”“点赞动效”这类需要情绪感的反馈时才故意降低阻尼，制造一两次弹性回跳。

4.2 指数衰减：实现“橡皮筋”手感

iOS的橡皮筋效果和普通弹簧还不太一样，它更像一个位移越大阻力越强的阻尼系统。UIScrollView在下拉超过边界后，偏移量并不是线性增长的，而是越来越难拉，松开后缓缓归位。这个手感可以用指数衰减函数来近似：

code复制offset = maxOverScroll * (1 - Math.exp(-pullDistance / maxOverScroll))

pullDistance是用户手指拖动的实际距离，offset是ScrollView实际渲染的偏移量。当pullDistance很小时，offset约等于pullDistance，手感跟手；pullDistance变大，offset增长变缓，仿佛有一个越来越强的反向拉力。这种“指数饱和”的模型实现起来很轻，不用维护复杂的速度和加速度变量。

如果你在做一个多端一致的控件，又不想依赖平台自带的弹簧API，用这种指数衰减公式做自定义的下拉回弹，基本能模拟八成以上的原生手感。

4.3 阻尼震荡的数值稳定性问题

物理模拟虽然香，但数值积分有一堆雷。最大的坑是帧率不稳定时，弹簧动画会出现“能量爆炸”。比如游戏里60FPS下参数调得好好的，切到低功耗模式变成30FPS，动画直接怼上天花板，就是因为积分步长没有做补偿。

解决办法有两个层次：一是固定时间步长，比如每帧最多积累16.7毫秒；二是做半隐式欧拉积分，也就是更新速度时用最新的位置，而不是旧位置。代码里最直观的改进是把 position 和 velocity 的更新顺序做一次调整：

javascript复制spring.velocity += (-stiffness * (spring.position - target)) * dt;
spring.position += spring.velocity * dt;

这样稳定性会好不少。但如果追求完美解耦帧率，更推荐直接用现成的物理动画库，或者用闭式解计算。闭式解的公式是：

code复制x(t) = A * e^(-ζωt) * sin(ωd * t + φ)

这个公式看着复杂，其实可以一次性求出任意时刻的位移，不需要逐帧迭代，结果和帧率完全无关。很多框架内部为了让每个UI组件在刷新率不同的设备上表现一致，采用的就是这种闭式解，而不是暴力数值积分。

经验：做物理动效前先想清楚“要不要真的物理”。如果只是要一个简单回弹，直接给贝塞尔曲线设置越界y值就行，省性能、免维护；只有在需要“交互可打断”的动效里，比如用户拖动卡片、松手后决定是弹回还是抛出，才值得引入完整的物理模拟系统。否则就是杀鸡用牛刀。

5. 三维变换与矩阵：UI动效里的空间数学

前面聊的都是一维属性的变化，但UI动效里还有很多看着特别炫的3D效果：卡片翻转、封面翻页、走马灯旋转、多层级视差滚动。这些效果的数学基础是线性代数——矩阵变换。其实不用低估这部分，它带来的“高级感”往往远超普通2D动效，但也是很多前端同学觉得最难啃的骨头。

5.1 平移、旋转、缩放背后的矩阵

一个二维或三维空间中的变换，可以用矩阵乘法来表示。例如二维中绕原点旋转θ角，点的坐标变换是：

code复制x' = x * cos(θ) - y * sin(θ)
y' = x * sin(θ) + y * cos(θ)

把上面的关系用矩阵写出来就是旋转矩阵。同理，缩放可以写成对角矩阵，平移可以写成带平移分量的矩阵。CSS的 transform 属性最终会在浏览器渲染引擎里被合并成一个复合矩阵，然后作用到DOM元素的所有顶点上。

这就是为什么CSS transform 用GPU加速比直接改left/top要流畅得多——left/top触发的是布局重算，而transform只把矩阵传给渲染线程，做一次顶点变换和重绘。理解了矩阵的作用，你就会明白尽量不要在动画里改宽度、高度、left、top，而是用scale、translate、rotate这些transform属性。

5.2 透视投影：3D效果怎么“骗”过你的眼睛

3D动效的另一个核心概念是透视投影。在没有透视时，一个元素在z轴上移动是不可见的，它只是改变“深度”，不会产生近大远小的效果。CSS里加 perspective 或者 transform: perspective(...)，本质是引入一个模拟人眼成像的单点透视变换。

透视投影的数学思路是先乘以一个带有透视因子的矩阵，再做一个“透视除法”：把x、y坐标除以z坐标。这样一来，z值越大的物体，x和y除以z后就越小，看起来就“离眼睛越远”。这也是为什么一个卡片在翻转到一定角度时，边缘会明显收缩扭曲。

举个例子，一个卡片翻面效果，你可以把transform设为这样：

css复制.card {
  transform: perspective(800px) rotateY(45deg);
}

perspective的值越小，透视越强烈，物体在z轴上的运动差异越明显。比如perspective(200px)会让卡片旋转时“扑面而来”的感觉特别强，perspective(2000px)则像远处看的风景，变化很轻微。这里没有绝对好坏，取决于产品的空间氛围是压迫型还是通透型。

5.3 动效中的层级与遮挡：3D排序问题

在3D UI里最常踩的坑是排序问题。两个卡片都在旋转时，谁应该在前面？在2D世界里我们靠z-index来控制，但在3D变换之后，元素的前后关系必须通过透视深度（也就是z值）来决定。CSS里的 transform-style: preserve-3d 可以让子元素继续存在于同一个3D渲染上下文里，否则浏览器会把它们拍扁成2D平面再排序，导致旋转中的卡片互相遮挡关系错乱。

如果不做复杂的3D布局，只是做一个单纯的卡片翻转，你多半不会遇到这个问题。但一旦父容器设置了 overflow: hidden 或使用了一些常见的滤镜、混合模式，preserve-3d 很容易失效，卡片翻转就变成了“前半段平贴，后半段突然翻过去”的怪异效果。这时候排查思路是逐层简化属性，找到具体是哪一层产生了“拍平”效应。

很多高级的3D UI动效，比如Cover Flow式的轮播、立体菜单旋转、时间轴翻页，本质上都是在用矩阵运算和透视规则构造一个“伪3D舞台”。对这些视觉业务而言，数学框架比CSS特效堆砌更重要。

6. 动效调优与问题排查：把抽象的数学拉回工程现场

聊了这么多数学原理，最后一定要落到实际工程中。毕竟生产环境里没有教科书，只有“为什么动画抖了一下”“为什么真机上卡顿”“为什么动画结束时突然跳一下”这些扎心问题。我把这些年实际调试中遇过的数学相关坑整理了一下，希望能省你一些排查时间。

6.1 最常见的几个数学问题

6.2 数学参数调节的心法

动效参数永远不会一次调好。我的经验是，先把动画时长拉长到原来的两三倍，这样就能明显看清运动曲线的每一段，识别出到底是“启动太慢”“停滞太久”还是“终点过冲”。把问题定位在时间域之后，再去调参数。比如发现动画在后半段拖尾严重，就考虑增大easeOut的指数项，而不是盲目缩短时长。

调物理模拟参数时，我喜欢先固定stiffness，让damping从零开始往上加。damping为零时，系统会永远震荡下去，像永动机；慢慢增加damping，震荡幅度逐渐减小，直到到达临界阻尼值，物体平稳落地。这个“从零往上扫”的过程几分钟就能找到合适的视觉手感。千万不要一开始就同时调两个参数，那样很难定位到底哪个值造成了什么样的视觉变化。

6.3 工具化调优：把曲线打印出来看看

很多时候肉眼已经分辨不出差异了，但代码里的数值还能说明问题。我会在动画期间把进度值打印到控制台，或者画到一个简单的Canvas折线图上，观察曲线的连续性和平滑度。比如一个CSS动画如果某些帧进度不变、突然跳变，可能是计算方式里用了不连续的函数，也可能是浏览器对某些属性做了特殊采样。

还有一个实用技巧：把动效数学参数抽成配置项，比如duration、stiffness、damping、overshoot，集中在一个对象里管理。调参的时候不需要改代码，只改配置，然后刷新看效果。这个习惯帮我节省了大量时间，尤其是做设计系统和组件库时，一份合理的参数配置可以让所有动效保持统一的风格调性。

6.4 一些不值得踩的坑

最后说几个我宁愿大家不要重蹈覆辙的教训。

第一，动效不是越多越好。每个动效都有数学消耗，复杂的贝塞尔采样、物理模拟、矩阵变换在低端设备上都会成为性能瓶颈。能用transform解决的不要用Canvas，能用简单缓动解决的不要引入弹簧系统。

第二，数学公式本身没问题，但别滥用。曾有需求方让我做一个“具有高级感”的列表加载动画，我引入了一整套波动+随机相位系统，结果把用户看吐了。后来换成最简单的淡入+轻微位移，测试数据反而更好。动效数学的价值是服务于功能和情绪，不是炫技。

第三，多端一致性一定要靠数学参数，不能靠“感觉”。同样的动效在iOS、Android、Web上，如果每个端的设计师或开发都凭感觉调参数，最后三个端的手感必然天差地别。固定一份数学参数表，比如弹窗出现统一用easeOutCubic、时长240ms、位移16px，才能让产品体验保持统一。

我在实际做动效时最常做的事，就是把动画拖到很慢很慢，慢到你能看见每一个像素的移动轨迹。那时候数学原理就不再是抽象概念了，它变成了一种手感——你知道这条曲线应该是一个二次幂还是一个三次幂，知道这个回弹需要给多少阻尼，知道这个旋转要不要加透视。动效做久了，其实手上调的是参数，心里算的是那条曲线的形状。希望这篇关于数学底层的梳理，能让你下次做动效时，不再只靠乱试，而是有据可依。