缓动 · Easing
英文：Easing
动效与交互难度：入门 ★
🗣️一句话大白话
控制动画"从 A 到 B 的加减速节奏"的曲线。同样一段位移，匀速像机械、先快后慢像自然——缓动决定动效的"手感"。动效不是"移动多少距离"，而是"怎么从静止加速、到位停稳"。AI 默认常用线性匀速，生成的动效因此显得生硬。告诉 AI 用 ease-out（快起慢停）做进场、ease-in-out 做来回，自定义曲线时给 cubic-bezier 关键点。一句话手感：进场快起慢停，离场慢起快走。
🖼️样图参考
🎬真实场景
按钮反馈、卡片入场、弹窗过渡、一切位移
📮你可以这样说
「【图像模型版】设计动效分镜时标注每段运动的节奏：进入快、停稳慢，元素之间错开间隔；在关键帧注明"先快后慢"或"先慢后快"，不要全程匀速。 【HTML/CSS/JS 版】给 [按钮] 加入场动效，用 ease-out 缓出曲线（cubic-bezier(0.16, 1, 0.3, 1)），时长 300ms；禁止用 linear 匀速。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：easing 只是"快慢"；实际是整条加减速曲线，决定质感
- ▸匀速不是"高级"，多数场景反而是"生硬"
🚫什么时候别用
- ✗进度条、计时器这类需要严格等速的场合
🧩常见变体
ease-out 快起慢停ease-in 慢起快停ease-in-out 来回cubic-bezier 自定义
💡小贴士
- ✦一句"先快后慢"比贴一大段曲线参数更有效
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗