动效四层法 · Motion 4-Layer Framework
英文：Motion 4-Layer Framework
动效与交互难度：入门 ★
🗣️一句话大白话
把页面动效说清楚的四层话术框架：技术工具 → 触发方式 → 动效类型 → UX 规则。照着说，AI 就不会「听不懂」。只会说「丝滑一点」「高级一点」，AI 只能靠猜。四层法把动效说全：用什么技术做（CSS / GSAP / Three.js / Lottie）、什么触发（hover / 滚动 / 点击 / 进入视口）、什么动效（淡入 / 滑入 / 视差 / 缩放）、守什么规则（反馈及时 / 减少动态）。一句话串起来：「用 CSS，让卡片在滚动进入视口时交错淡入+上移，并遵守用户的减少动态设置」——四层全说，AI 就能精确执行。
🎬真实场景
任何需要向 AI 描述页面动效的场景
📮你可以这样说
「【图像模型版】按四层法描述动效：①技术：用 [CSS/GSAP]；②触发：[滚动进入视口/hover/点击]；③动效：[淡入+上移 16px，间隔 60ms 交错]；④规则：[遵守减少动态设置，关闭装饰动效保留反馈]。逐层说，不要只写「丝滑一点」。 【HTML/CSS/JS 版】四层法提问模板：「用 [CSS]，[卡片] 在 [滚动进入视口 20%] 时 [淡入+translateY(16px) 交错入场，间隔 60ms]，并 [用 prefers-reduced-motion 关闭装饰动效]。时长 300ms，缓动 ease-out。」」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：动效描述=贴参数；四层法是「先分层说清再给参数」，缺一层 AI 就要猜
- ▸只说「高级/丝滑/生动」属于无效描述，AI 只能随机发挥
🚫什么时候别用
- ✗单元素极简单动效（一层就够：让按钮 hover 变亮）
🧩常见变体
💡小贴士
- ✦四层全说满 = 技术 + 触发 + 类型 + 规则；缺层就补，AI 执行才不跑偏
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗