当动画有了灵魂：Cubic-bezier，不止是“平滑过渡”那么简单 第一次听说“Cubic-bezier”这个词，我脑海里浮现的是某个化学方程式，或者某种复杂到让人头秃的数学公式。作为一名半吊子的前端开发者，我对动画的理解还停留在“linear”的线性过渡和“ease-in-out”的平滑过渡。直到我真正开始深入研究它，才发现它不仅不是什么可怕的公式，反而是给动画注入灵魂的魔法棒。 Cubic-bezier，中文名叫“三次贝塞尔曲线”，听起来依然很学术，但实际上，它就是一个定义动画速度变化的函数。你可以把它想象成一个无形的指挥家，控制着动画元素的节奏，让它们或轻快、或沉稳、或富有戏剧性地运动。 传统动画中的“线性过渡”就像是一个毫无感情的机器人，以恒定的速度从A点移动到B点，乏味得让人昏昏欲睡。而“ease-in-out”就好比一个训练有素的舞者，起舞前蓄力，舞动时加速，结束时缓缓收尾，虽然流畅，却也略显程式化。 Cubic-bezier的魅力就在于它的自由度。它允许你自定义动画的速度曲线，创造出千变万化的动画效果。你可以让动画一开始就猛冲，然后迅速减速；或者先慢吞吞地移动，然后突然 …