做动效只会用 linear(匀速)?那你的动效一定很"机械"
正确选择缓动曲线(Easing),动效才有"灵魂"👇
📌 ease-in(先慢后快)→ 加速离开 适合:元素离开屏幕、淡出消失 心理暗示:"我走了",越走越快直到消失
📌 ease-out(先快后慢)→ 减速到达 适合:元素进入屏幕、弹窗出现、Toast 入场 心理暗示:"我来了",冲进来然后轻轻停下 最常用的曲线,80% 的入场动画用这个就对了
📌 ease-in-out(两头慢中间快)→ 平滑过渡 适合:元素在屏幕内移动、位置切换、页面转场 心理暗示:从 A 到 B 的自然运动
📌 linear(匀速)→ 几乎不用 只适合:无限循环的旋转动画(如 loading 转圈) 匀速运动在自然界中几乎不存在,看起来会很"假"
📌 spring(弹性)→ 活泼有趣 适合:开关弹跳、拖拽释放后的回弹 心理暗示:像皮筋一样有弹性,增加趣味感
🧠 快速判断法:
进来的东西 → ease-out 走掉的东西 → ease-in 移动中的东西 → ease-in-out 旋转不停的东西 → linear 需要弹性感的 → spring
选对缓动曲线,动效的"质感"会好一个档次🎯






