设计师狂喜！这个 Skill 把动画原理讲透了，12原则+物理引擎全给代码实现

它把动画讲透了，不只是”怎么动”而是”为什么动”

做 UI 动效这么多年，最怕听到产品说”让它更有动感”——这三个字可以是无底洞，也可以是一次深度技术美学探索。今天挖到一个让我眼前一亮的 Skill，叫 animation-specialist，作者是 m-e-conroy，来自 GitHub 上的 Skills-Library 项目。

它覆盖的东西之全，基本相当于一本动画百科：CSS 动画、JavaScript 驱动动效、GSAP 时间线、p5.js 生成艺术、物理模拟、缓动曲线、滚动触发、粒子系统、弹簧动力学、SVG 变形、Three.js、WebGL Shader，14个板块，没有一个是在凑数的。

12原则，这才是动画的底层逻辑

这个 Skill 最让我惊喜的地方，是它把迪士尼经典动画12原则带进了代码层：挤压与拉伸、预备动作、跟随与重叠、缓入缓出、弧线运动、次要动作、时间节奏……每一条都有 CSS/JS 的具体实现代码，不是纸上谈兵。

比如”挤压与拉伸”，它会告诉你：scaleX 和 scaleY 必须互为补偿（宽了就要短），这样体积才守恒，物体才有重量感。一个 rigid object（不做形变的物体）看起来就是塑料的、假的。这个知识点我以前只知道概念，但它给出了完整的 CSS keyframes 实现。

物理引擎也给你安排明白了

更硬核的是它还讲物理模拟：欧拉积分 vs 维莱积分（稳定性差异巨大）、胡克定律弹簧 F=-kx-bv、碰撞检测（AABB、圆形、凸包）、摆动公式 theta” = -(g/L)*sin(theta)……

这些在创意编程里是真正的底层能力。学会这些，你做的动画就不再是”匀速位移”，而是真正有重量、有弹性、有物理感的运动。

GSAP 专题，ScrollTrigger 讲得很透

如果你是 GSAP 用户，这个 Skill 的 ScrollTrigger 部分值得细读——scrub、pin、snap、batch、进度联动动效，都有示例代码和性能建议（包括 will-change、gsap.ticker、invalidateOnRefresh 这些生产级细节）。

适合谁用

• 前端开发者，想让 UI 真正”活”起来而不是只会调 transition
• 创意编程爱好者，做生成艺术、粒子系统、物理模拟
• UX/产品设计师，想理解动效背后的原理而不是只会说”更有动感”

实操方式：装好后在 Claude/Codex 里直接说”animate this”或”make it move”，它就会介入。官方安装命令：

npx skills add https://github.com/m-e-conroy/Skills-Library --skill animation-specialist

GitHub 链接我放结尾了，对动画/动效感兴趣的设计师和开发者，这个 Skill 值得收藏。

https://github.com/m-e-conroy/Skills-Library/tree/main/.github/skills/animation-specialist

GitHub: https://github.com/m-e-conroy/Skills-Library/tree/main/.github/skills/animation-specialist