缓动函数速查表：缓动函数指定动画效果在执行时的速度，使其看起来更加真实. 本页可以在每次你需要时，帮助你找到想要的缓动函数。
缓动函数：模拟现实运动节奏的动画控制利器
你有没有在做网页、APP 或游戏动画的时候，感觉画面动是动了，但就是“怪怪的”？比如一个弹窗打开，明明是淡入，但看着就像“啪”一下强行出现一样毫无自然感；又或者一个球滚来滚去，动作僵硬得像鬼畜？
这种时候，十有八九是因为你没有用缓动函数（easing functions）！
简单说，缓动函数就是让你的动画“有感觉”的关键。现实世界里没有任何东西是匀速运动的——物体会加速、减速、弹跳、过冲……这些自然节奏感，就是靠缓动函数来模拟的。
缓动函数的原理很简单，但作用超级大！
在技术层面，缓动函数就是一个接收**时间进度（通常是0到1之间的值）并输出一个“当前运动比例”**的函数。你把这个输出值用来控制位置、透明度、缩放等属性，就能让动画产生“加速”或“减速”的效果。
最基础的线性函数是 t => t，它就是匀速运动。但这玩意儿用起来完全没有现实感。比如你拉一个抽屉，一开始肯定是猛地一下，然后越拉越慢，这种“先快后慢”的感觉就得用 easeOut 类型的缓动函数。
举几个常见的缓动函数类型：
- easeIn：一开始慢，然后越来越快（就像汽车起步）。
- easeOut：一开始快，然后慢慢停下（像抽屉慢慢合上）。
- easeInOut：先慢后快再慢（自然过渡，非常柔和）。
- bounce：弹跳式效果（掉在地板上的皮球）。
- elastic：先冲过头然后回弹几次再定住（像弹簧）。
- back：先“往后缩”一下再往前冲（模拟肌肉发力动作）。
这些效果在 CSS 动画或 JavaScript 动效里特别常见，基本所有主流动画库（比如 anime.js、GSAP、Three.js）都内建了几十种缓动函数。
为什么缓动函数这么重要？几个超现实的例子说明
- 打开抽屉：开始拉得很快，越接近全开越慢——这是
easeOut。 - 点击按钮回弹：按钮“按下去”再稍微弹回来，是
elastic或bounce。 - 拖拽元素松手：元素惯性移动后缓慢停下，是
easeOutQuad或easeOutExpo。 - 对象掉地上：碰撞后反复弹起再停止，用
bounce系列。
如果你直接用线性动画，就会让用户觉得你这个设计“没打磨”。而只要加上缓动，整个体验立刻上升一个台阶，动画自然、有节奏，用户会觉得“这个动效好流畅啊”。
那怎么选合适的缓动函数呢？
这个嘛，真的是**“看感觉”+“看场景”**：
- 想做那种“UI动效”流畅自然的体验，推荐用
easeInOut或easeOutCubic； - 想要有趣、弹性十足的感觉，就用
bounce、elastic； - 做3D或者物理模拟，就试试
back、expo、quad这些物理感强的； - 如果是时间敏感、需要很快完成的动画，比如 loading 动效，
easeOutSine这种短促型更合适。
很多在线工具甚至提供“缓动函数可视化页面”，你可以滑动看看每个函数的运动轨迹，然后挑一个你觉得最顺眼的。
我的使用体验就是：动画要灵性，缓动少不了！
我一开始做动画的时候也是完全不在意这些函数，结果效果总是生硬、不自然，看起来就是“工具人动画”。后来开始玩 GSAP 和 CSS 动效，慢慢研究这些函数怎么影响节奏，才发现缓动真的是做动画的“润滑剂”。
尤其是当我用 easeOutBack 做一个卡片翻转的时候，那个“翻完还微微抖一下”的感觉简直太爽了，瞬间提升质感！
所以说，想让你的动画从“机械移动”变成“拟人动作”，就从学习缓动函数开始吧！
理解它们不难，多试几种类型，看看效果，就能迅速上手。而一旦你掌握了这门“节奏感”的技艺，你做出来的动效，不管是网页、APP 还是游戏，都会变得异常丝滑、有生命力！
动效的灵魂，真的就在这一小段看似不起眼的函数里！
