Claude 做动画总像流水线？Anime.js v4 Skill 让它直接开挂

Claude 做动画卡住了？Anime.js v4 让它直接开挂 🎨

做过网页设计的人大概都有过这个崩溃时刻：想让 AI 帮你写个酷炫的动画，它给你整出来的东西……怎么说呢，”一看就是 AI 做的”。

僵硬。俗套。流水线。

现在有个新 Skill 专门解决这个问题——Anime.js v4 Animation Skill，专门教 AI 写真正好看的网页动画。

它到底干了什么

Anime.js 是一个轻量级 JavaScript 动画库（完整版 10KB，WAAPI 版只有 3KB），这个 Skill 等于是给 Claude 装了一整套动画引擎的使用手册。

普通 AI 写动画：上来就是 animation: fadeIn 0.3s ease，敷衍了事。

用这个 Skill 的 AI：会用 createTimeline() 编排复杂的时间序列，用 stagger() 给列表元素做有节奏的入场动画，用 spring 物理缓动让运动曲线看起来自然不生硬。

它能搞定哪些场景

滚动动画：配合 onScroll() 追踪视口，元素进入视野时自动触发运动——做落地页的时候特别有用。

SVG 动画：路径绘制（line drawing）、形状变形（morphing）、运动轨迹（motion path），这几个是普通 AI 动画的重灾区，用 Skill 之后输出会明显上一个档次。

Draggable 交互：带物理弹性（spring）的拖拽效果，这个在普通情况下 AI 基本写不对。

Timeline 编排：多阶段动画的顺序、叠加、偏移量控制——这是让动画有”电影感”的关键。

为什么推荐它

核心优势是 Anime.js v4 的模块化设计。Skill 里面写了正确的 import 方式，比如：

import { animate, createTimeline, stagger } from 'animejs';

这比直接 import 整个库更高效，也更符合现代前端的 tree-shaking 规范。

另一个是 Spring 物理缓动。普通 ease-out、ease-in 写出来的动画总有点”机械感”，但用 spring(1, 80, 10, 0) 这类物理参数，运动的加速减速曲线就会自然得多。

安装方式

npx skills add bowtiedswan/animejs-skills

或者用 curl 一键安装：

curl -fsSL https://raw.githubusercontent.com/BowTiedSwan/animejs-skills/main/install.sh | bash

适用人群

如果你经常需要让 AI 帮你做前端页面、落地页、H5 互动页面，这个 Skill 基本上是必装的。它让 AI 输出的动画从”能用”升级到”专业级”。

GitHub 开源地址：
https://github.com/BowTiedSwan/animejs-skills

GitHub: https://github.com/BowTiedSwan/animejs-skills