1实现原理 · 为什么它能做到
技术无关的底层：不选技术栈，产出是可直接交给任何实现的「具体数字」——时长、cubic-bezier、stagger 偏移、spring 配置。
skills/animation-principles/SKILL.md
It does not pick a tech stack; it produces concrete numbers (durations, cubic-bezier curves, stagger offsets, spring configs) ready to hand to any implementation.
注：这里在做什么：把「感觉对」拆成可传递的参数，使这套知识能被 Remotion / GSAP / CSS / 手工关键帧任一路径消费——这也是它被本 pack 其他 skill（构图、品牌规范、创意简报）反复交叉引用的原因。
先立三支柱（情感意图 / 视觉叙事 / 动作工艺）再定任何数字；跳过这步就会得到「技术上正确但毫无感觉」的动作。
skills/animation-principles/SKILL.md
Every piece of motion should answer three questions *before* you pick a duration or curve.
注：这里在做什么：给下游所有数值决策一个前置闸门；对「先问时长」这种常见倒置顺序做了纠正。
用三层运动模型（Primary/Secondary/Ambient）解释「扁平感」，并与判断层 skill 的 Hero/Support/Texture 显式对齐。
skills/animation-principles/SKILL.md
Flat motion = only the main thing moves. Believable motion runs three layers at once:
注：这里在做什么：把「只有主体在动」定义为扁平化的根因，并给同义映射以免两套术语打架；shot-composition 会把这三个角色投影到 Z 轴当视差速度。
缓动被定为最大杠杆：linear 只留给连续循环，离散事件必须有加速度，并按进/出/位移/品牌四类给具体曲线。
skills/animation-principles/SKILL.md
Linear motion reads as robotic. Reserve `linear` for continuous loops (spinners, marquees, infinite scroll) only.
注：这里在做什么：与「入场用 linear」这个高频错误直接对应；随后每类曲线都给到 4 位小数，可复制即用。
时长按元素尺度分四档（微交互 100-200ms → 电影镜头 800-2000ms），并要求距离/面积变化时等比放大时长。
skills/animation-principles/SKILL.md
Distance and size scale duration.
注：这里在做什么：给「同一时长套所有元素」提供量化规则（距离或面积约翻倍时加 30-50% 时长），使不同尺度元素保持近似恒定感知速度。
交错与 1/3 规则两形态用来防止「整组一起出现」——列表 40-80ms、密集网格 20-40ms，总量受 600-800ms 上限约束。
skills/animation-principles/SKILL.md
Never reveal a list, grid, or group all at once — it reads as a single flat event. Stagger each child's start.
注：这里在做什么：把「节奏」拆成可算参数（count × offset 超上限则改距离型交错）；1/3 规则的「同时性」形态也被品牌规范 skill 引用来论证 stagger 上限。
诊断表把症状反向映射到成因（stiff/floaty/cheap/mechanical），使 review 变成可执行的修复清单。
skills/animation-principles/SKILL.md
- **Feels stiff/robotic** -> using `linear` or symmetric easing on an enter; switch to ease-out.
注：这里在做什么：用户通常只会说「感觉不对」，这张表把形容词转成成因 + 处方；与 client-revisions 的模糊反馈转译是同一种设计哲学的不同侧面。
手工关键帧路线被映射到 AE 的 Graph Editor：F9 的 Easy Ease 只是 33% 对称起点，必须做成非对称。
skills/animation-principles/SKILL.md
`F9` (Easy Ease) is only a 33% symmetric starting point — make it asymmetric.
注：这里在做什么：把原则落到 AE 的具体操作手艺（Speed Graph 形状、influence 数值、overshoot/anticipation/bounce 配方），使曲线与手工关键帧两条路都覆盖。
2核心能力
01命名 cubic-bezier 库（进出/位移/overshoot 四族 + Material 标准曲线 + iOS 近似）
02时长档位表（微交互/UI 过渡/英雄元素/电影镜头）+ 距离-时长缩放规则
03交错与节奏：列表 40-80ms、网格 20-40ms、总量上限与距离型交错
04spring 与 duration-based 的选型（可中断交互动作用 spring，时间线锁定用时长+曲线）
05物理直觉三件套：anticipation、follow-through/overlapping、arcs
06节拍同步（BPM 网格量化）与无音乐时的视觉脉冲设定
07AE Graph Editor 手工手艺：Speed/Value Graph、influence/velocity 数值、overshoot/anticipation/bounce 分步配方与衰减弹跳表达式
0812 原则到屏幕动作的数值化改写（按在 UI 中的重要度排序）
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | @react-spring/web（示例 spring 预设值，仅作参考实现） |
| package | SwiftUI / iOS 动画 API（示例 spring 写法，跨平台参考） |
| package | After Effects Graph Editor（手工缓动的落地工具） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 数值是锚点而非答案 — 曲线与时长是跨项目通用的起点，但品牌气质、平台（web vs 视频）与设备性能会让最优值偏移；照抄而不做感知验证容易出现「哪里都对但就是不对」的结果。
- 两处曲线体系并存需自行裁定 — SKILL.md 的 Quick reference 与 easing-curves.md 的 Material 标准曲线族不是同一套取值，文档没给「该用哪套」的规则；混用会导致产品内不一致（可参照 brand-motion-guidelines 的令牌化做法解决）。
- 经验系数无出处 — 距离-时长缩放（+30-50%）、stagger 上限（600-800ms）、1/3 规则等均为经验性断言，仓库内无数据来源（见 second_pass 的 unlocatable 条）。
- 认知层引导 — 它会把审美选择（多快、多弹）导向特定取向（克制、减速入位）；追求极端风格化动作时需有意识偏离。
风险提醒：绿色，放心使用。纯指令/数值方法论：无脚本、无可执行文件、无网络外发、无凭证读取、无本地写盘。唯一的「外部物」是代码示例（@react-spring/web、SwiftUI、AE Graph Editor 操作），属实现侧或用户侧行为，不构成本 skill 的执行行为。注意点仅为对话性（推荐的曲线/时长会锚定审美取向）与领域数值需按自己项目实测校准。
5第二遍独立确认
- [ok] SKILL.md 的曲线值是否与 reference 一致（防两处打架） — SKILL.md 的 Quick reference（Enter `cubic-bezier(0.16, 1, 0.3, 1)`、Exit `(0.7, 0, 0.84, 0)`、Move `(0.65, 0, 0.35, 1)`、Branded `(0.34, 1.56, 0.64, 1)`）与 easing-curves.md 的分族库同型；但 reference 另列一套 Material 标准曲线（如 `0.2, 0, 0, 1`），两套体系并存且文档未给裁决规则——属文档分层而非矛盾，已在 risks 记录。
- [ok] 是否真的没有脚本或可执行资产 — 清点后目录内只有 5 个文件（SKILL.md、3 本 .md reference、1 个 0 字节 README），无 .js/.sh/.py/.json。
- [ok] 「技术无关」声明是否成立（有没有偷偷选边） — 自带代码示例覆盖 CSS 曲线、Framer Motion、react-spring、SwiftUI 与 AE 手工关键帧，且 SKILL.md 明确说「不选技术栈」；示例之间是并列参考，无强制依赖。
- [ok] 交叉引用是否指向真实存在的上游（本 pack 内） — 被引的 motion-art-direction（Hero/Support/Texture）与 shot-composition 都在同一仓库 skills/ 下存在；引用只做术语对齐，不要求安装额外 skill。
- [unlocatable] 「距离或面积翻倍加 30-50% 时长」等缩放系数的来源 — 这是经验规则，pin 仓库内无出处、无测量脚本、无数据文件。作为文档声明记录，不当作已核事实；实际项目应以感知测试校准。
6结论
适合：适合任何「动作该怎么动」的场景：修僵硬/飘/廉价的动作、选入场出场曲线与时长、给列表做交错、判断是否该用 spring、把动作与音乐节拍对齐，以及团队统一动作语言前的判据来源。也适合作为其他 skill（构图、品牌动效规范、创意简报）的下游理论底座。
不适合：不适合：① 需要具体实现代码/组件（应走 gsap-web、remotion-video、web 动画类 skill，本 skill 只到参数层）；② 需要视觉方向/品牌个性决策（应走 motion-art-direction 的判断层）；③ 需要平台工程细节（编解码、渲染管线）——那属于 after-effects / remotion 等；④ 要求所有数值有权威出处的合规场景，这些是经验值。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 animation-principles.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent069d807fa45f71f5…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/motion-design-skills
原始 GitHubiart-ai/motion-design-skills ↗
Stars35
最近推送2026-06-22
本 skill commit
3c129f769d许可MIT（仓库根 LICENSE：'MIT License' / Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段亦为 MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。