按钮、加载、成功、错误状态怎么做motion-design-skill状态反馈动画全解析【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill做 UI 时按钮按下去没反应、加载转圈像失控的陀螺、成功提示生硬、报错像甩脸——这类没有温度的交互正是状态反馈动画要解决的痛点。开源项目motion-design-skill正是为此而生它为 AI Agent 提供一套通用的动效设计原则覆盖按钮、加载、成功、错误等状态反馈动画的时长timing、缓动easing、编排choreography并把迪士尼动画原则改造适配到 UI 场景且与具体技术栈无关CSS、Framer Motion、GSAP、Lottie 通吃。本文不写一行代码只回答一个问题按钮、加载、成功、错误这些状态到底该怎么动、动多久、怎么停全部依据项目中的状态反馈配方 state-feedback.md 与主技能文件 SKILL.md。先搞清楚状态反馈动画为什么需要配方motion-design-skill 的核心观点是先决定用户应该感受到什么再谈技术参数。在 SKILL.md 中每个动画都要过三支柱检查支柱要回答的问题决定什么情感意图Emotional Intent用户应该感到什么缓动、时长、幅度视觉叙事Visual Narrative这段微故事是什么铺垫 → 动作 → 收尾动效工艺Motion Craft怎样让它可信物理感、次级运动、路径还有一个容易忽略的细节好的状态动画有三层——主层用户跟随的主要动作、次层阴影收缩、图标位移、环境层背景光晕、微粒。只做一层的动画看起来就是扁平的。按钮状态按下、悬停、开关快才有质感按钮是最典型的即时反馈场景核心原则只有八个字按下要快松开要稳。按钮按下120–180ms 内的三段式项目按动效人格给出了三档按钮按下配方时长都在 160–260ms 之间人格风格按下松开总时长气质 Playful俏皮缩放至 0.9560ms回弹到 1.05再落定 1.0约 260ms有弹性、有回弹 Premium高级缩放至 0.9880ms回到 1.0150ms不回弹约 230ms沉稳、克制 Corporate商务缩放至 0.9760ms回到 1.0100ms回弹 0–2%约 160ms干脆、专业注意一个关键区别高级感的标志是不回弹而俏皮的标志是回弹 5–10%。选错回弹量整个产品的性格就跑偏了。悬停状态进入要快退出要慢悬停的黄金法则是进入 100ms退出 150–200ms。退出比进入慢才有打磨过的精致感。元素悬停效果时长按钮放大 1.02–1.05100ms卡片放大 1.01–1.02 阴影抬升100ms链接变色 下划线100ms图标放大 1.1 旋转 2–5°100ms图片放大 1.03overflow 裁剪150ms开关Toggle小球滑动 120–180ms开关的滑块滑动用 ease-in-out、120–180ms轨道颜色同步过渡并沿运动方向做轻微挤压squash。俏皮风格会在终点加一次小弹跳高级风格则要求丝滑、零回弹。成功状态一次庆祝控制在 500ms 内成功动画是少有的可以放肆的场景但放肆也要有预算。以打勾成功Checkmark为例完整配方分四步、总时长 400–500ms容器弹出缩放 0.9 → 1.0200msease-out-back带 5–10% 回弹对勾描边stroke 绘制 150ms延迟 100ms 后开始延迟是为了制造先有容器、再画勾的叙事变色过渡到绿色200ms环境层光晕或微粒绽放300ms另外两个变体同样值得抄作业确认徽章徽章从 0 弹出200ms→ 文字淡入150ms延迟 50ms→ 背景正弦脉动300ms支付成功转圈 → 对勾交叉淡化200ms→ 勾画出200ms→ 文字淡入 → 可选五彩纸屑300–500ms一个容易踩的坑成功状态允许 5–10% 回弹错误状态的回弹预算是 0%见 timing-easing-tables.md 中的Overshoot Budget。错误如果也弹跳用户会感到这个错不太严肃。错误状态晃动是警告不是惩罚错误动画最忌讳两个极端太轻用户没意识到错了和太重像被甩了一巴掌。项目给出的标准是水平振荡 ±10–15px、2–3 个周期、振幅递减总时长 300–400msease-in-out 保证起停干脆配红色调停在原点、零回弹——错误应该给人坚定的感觉。不同场景的完整编排场景关键步骤时长参考输入框错误晃动水平振荡 2–3 次 红色调300–400ms行内校验错误文字下滑淡入 → 边框变红 → 图标缩放入场200ms 150ms 150ms延迟 50ms表单提交失败按钮复位 → 错误信息滑入 → 问题字段交错高亮每条间隔 30ms→ 平滑滚动到首个错误200ms → 250ms → 150ms → 300ms其中表单提交失败的第 4 步很见功力用 300ms 的 ease-in-out 把用户带过去看错误比让用户自己在满屏红框里找要友好得多。加载状态旋转用线性其余都要缓动加载动画是最容易被做歪的状态——很多人用线性缓动做位移或用缓动做旋转方向正好反了。项目给出的四条规则加载形态关键参数备注转圈Spinner360° 连续旋转linear1000–1500ms/圈唯一允许线性缓动的场景可加 2–3s 呼吸脉动骨架屏Skeleton渐变从左向右扫过1500–2000ms基础透明度 10–20%峰值 30–40%进度条宽度/transform 过渡ease-in-out可加颜色里程碑 微光闪烁不定进度Indeterminate位置/宽度振荡1500–2500ms连续、从容绝不要慌乱这里藏着一条全局质量红线空间位移永远不许用线性缓动linear 只留给转圈和进度条而旋转永远用线性。写反了就是机械感的第一来源。别漏掉这两个状态警告 禁用警告Warning黄/琥珀色边框 150ms → 警告图标带轻微回弹缩放入场150ms→ 可选图标正弦脉动2–3s→ 文字淡入200ms延迟 50ms。比错误软但比成功急。禁用 / 启用Disabled / Enabled禁用是透明度降到 50–60%200ms可选缩放到 98%启用则反之还可在启用瞬间做一次 98% → 100% 的脉冲暗示它又活了。焦点Focus焦点环从 95% 缩放到 100% 淡入150ms标签导航的焦点切换应 100ms。快速对照表状态 → 时长 → 缓动把 reference/timing-easing-tables.md 和 property-selection.md 的要点合并就是一张照抄级速查表状态/交互推荐时长缓动方向主属性悬停100msease-outscale按下 / 开关120–180msease-in-outscale / position释放回稳200–300msspringscale图标切换150–250msease-outopacity color成功弹出300–500msease-out-back5–10% 回弹scale color错误晃动300–400msease-in-out0% 回弹position旋转加载1000–1500ms/圈linearrotation入场通用比退场长 30–50%ease-out减速入场position opacity退场通用基准时长的 65–75%ease-in加速离场position opacity两条方向性规则贯穿始终入场减速先快后慢像东西落位退场加速先慢后快像东西离开。四条绝不可破的质量红线motion-design-skill 把质量规则分了两档其中 CRITICAL 级四条是验收状态反馈动画时的硬标准完整版见 quality-checklist.md空间位移永远不用线性缓动——转圈和进度条除外重要状态变化不能只靠透明度——必须搭配位置或缩放运动距离超过 1/3 屏就必须加中间关键帧必须有三层运动——主层 次层 环境层缺一层就显得廉价如果你的动画看起来像机器人项目里的排障速查表troubleshooting.md给出的答案通常是加了缓动曲线、走了弧线路径、补上阴影和环境层。写在最后状态反馈动画的本质不是炫技而是用 100–500ms 的窗口期告诉用户系统听到了你。motion-design-skill 的价值在于把这件事从凭手感变成了查表想知道按钮该怎么按 → patterns/state-feedback.md想知道时长和缓动取多少 → reference/timing-easing-tables.md想理解背后的方法论迪士尼 12 原则、情绪映射、编排→ director/disney-principles.md、director/emotion-mapping.md把这份配方喂给你的 AI 编码助手安装方式见 README.md下次写按钮、加载、成功、错误状态时它就能直接给出带正确时长和缓动的实现——而不是一个大概感觉还行的动画。【免费下载链接】motion-design-skillUniversal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI项目地址: https://gitcode.com/gh_mirrors/mo/motion-design-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考