动效总觉得差点意思？这个 Skill 把迪士尼 12 条动画原则直接焊进工程流程

做动画最怕什么？不是画得不够细，而是动起来“很像 AI”——僵硬、匀速、没有情绪。

最近我在 SkillsMP 上挖到一个挺有意思的 Skill：disney-animation-rule-skill，来自 vibe-motion/skills，把迪士尼经典的 12 条动画原则，直接翻译成可落地的设计工程规则。

它到底能干嘛？

简单说，它不帮你“画”动画，而是帮你“想清楚”动画该怎么动。特别适合这些场景：

• 用 React / Remotion / SVG / Canvas / Three.js 做动效时，总觉得动起来怪怪的
• 做 UI 微交互、品牌动效、网页动画，但不知道怎么调 easing
• 写 2D/3D 程序化动画时，希望角色、镜头、物体有“重量感”
• 排查现有动画问题：僵硬、机械、节奏不对、看起来物理正确但视觉很弱

为什么值得试？

过去学迪士尼 12 原则，大多靠视频教程和感觉。这个 Skill 不一样，它把原则拆成了工作流：

• 先拆动作阶段：预备、发力、顶点、接触、缓冲、恢复，先想清楚再调曲线
• 再建运动层级：主线 → 变形 → 跟随 → 二次动作 → 点缀，按优先级来
• 确定性优先：动画状态要可计算、可复现，不能靠随机
• 感知调优：用帧间距判断速度感，用剪影判断可读性，而不是只看曲线美不美

最实用的是它还区分场景：按钮按下、相机运动、角色跳跃，用的不是同一套词汇，而是按语义拆 event poses。

真实用法

装好之后，当你遇到“这段动画看着不对劲”时，可以直接让 Claude / Codex 按这套规则帮你 review。不用重写整个动效，很多时候只要把 squash/stretch、overlap、anticipation 加回去，效果就会明显变好。

如果你做品牌动效、网页交互、短视频动效，甚至只是想做更自然的 loading 动画，这个 Skill 都值得放进工具箱。

最后

设计感往往藏在这些老原则里。迪士尼 12 条原则本来就不是秘密，缺的是有人把它们整理成工程师能直接用的工程规则。

想试试的同学，GitHub 地址在这里：https://github.com/vibe-motion/skills/tree/main/disney-animation-rule-skill

GitHub: https://github.com/vibe-motion/skills/tree/main/disney-animation-rule-skill