164 lines
7.7 KiB
Markdown
164 lines
7.7 KiB
Markdown
|
# Motion.dev 动画技能
|
|||
|
|
|
|||
|
|
`动画` `Motion.dev` `Claude Code` `TypeScript` `React`
|
|||
|
|
|
|||
|
|
<div align="center">
|
|||
|
|
|
|||
|
|
# Motion.dev 动画技能
|
|||
|
|
|
|||
|
|
**为 Claude Code 提供生产级 Web 动画，由 Motion.dev 驱动。**
|
|||
|
|
|
|||
|
|
[](https://github.com/199-biotechnologies/motion-dev-animations-skill/stargazers)
|
|||
|
|
[](https://x.com/longevityboris)
|
|||
|
|
|
|||
|
|
[](https://docs.anthropic.com/en/docs/claude-code)
|
|||
|
|
[](https://motion.dev)
|
|||
|
|
[](LICENSE)
|
|||
|
|
[](https://www.typescriptlang.org/)
|
|||
|
|
|
|||
|
|
这是一个 Claude Code 技能，使用 Motion.dev（Framer Motion 的继任者）生成 120fps GPU 加速动画。只需说"添加英雄动画"或"创建滚动效果"，即可获得内置无障碍访问和性能优化的生产就绪 TypeScript 代码。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
[为何存在](#为何存在) | [安装](#安装) | [快速开始](#快速开始) | [工作原理](#工作原理) | [动画类型](#动画类型) | [内容结构](#内容结构) | [贡献](#贡献) | [许可证](#许可证)
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 为何存在
|
|||
|
|
|
|||
|
|
Motion.dev 每月下载量超过 1000 万次，是 React、Next.js、Svelte 和 Astro 中 Web 动画的标准方案。但编写优质动画并不容易——你需要弹簧物理、GPU 加速属性、`prefers-reduced-motion` 支持，以及 60fps+ 的性能目标。
|
|||
|
|
|
|||
|
|
本技能为 Claude Code 提供 Motion.dev 模式的深度知识，使其能够从自然语言生成生产级动画代码。不再需要翻阅文档，不再需要猜测弹簧参数，只需描述你想要的效果即可。
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
|
|||
|
|
将其添加到你的 Claude Code 技能目录：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 克隆到技能文件夹
|
|||
|
|
git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
|
|||
|
|
|
|||
|
|
# 或在项目中添加为 git 子模块
|
|||
|
|
git submodule add https://github.com/199-biotechnologies/motion-dev-animations-skill.git .claude/skills/motion-dev-animations
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当你在提示词中提及动画、Motion.dev、滚动效果、视差、悬停效果或交互式 UI 时，该技能会自动激活。
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
安装后，使用自然语言与 Claude Code 交互：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
"为英雄区域创建淡入上升动画"
|
|||
|
|
"为这个落地页添加视差滚动效果"
|
|||
|
|
"构建一个带悬停上升和阴影效果的卡片组件"
|
|||
|
|
"为这个列表实现拖拽排序"
|
|||
|
|
"为 CTA 按钮添加磁性悬停效果"
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Claude Code 会确认你的框架、规划动画策略、生成代码并验证性能。
|
|||
|
|
|
|||
|
|
## 工作原理
|
|||
|
|
|
|||
|
|
该技能遵循四步工作流程：
|
|||
|
|
|
|||
|
|
1. **确认** —— 确定你的框架（React 19+、Next.js 15+、Svelte 5+、Astro 4+）、动画类型和设计目标。
|
|||
|
|
2. **规划** —— 为你的使用场景选择合适的 Motion.dev 模式、弹簧物理和缓动曲线。
|
|||
|
|
3. **实现** —— 使用 GPU 加速属性（仅限 transform、opacity、filter）生成 TypeScript/JSX 代码，无布局抖动。
|
|||
|
|
4. **验证** —— 检查 60fps+ 性能、`prefers-reduced-motion` 支持、键盘导航，以及包体积是否低于 50KB。
|
|||
|
|
|
|||
|
|
该技能使用渐进式加载。核心指令约 2000 个 token，示例、API 参考和模板仅在需要时按需加载。与预先加载所有内容相比，上下文消耗减少了 87%。
|
|||
|
|
|
|||
|
|
## 动画类型
|
|||
|
|
|
|||
|
|
### 入场动画
|
|||
|
|
- **英雄淡入上升** —— Apple 风格的淡入 + 滑入入场效果，适用于落地页
|
|||
|
|
- **英雄交错** —— 标题、副标题、CTA 的编排序列动画
|
|||
|
|
- **滚动显现** —— 基于 Intersection Observer 的滚动触发淡入效果
|
|||
|
|
|
|||
|
|
### 滚动效果
|
|||
|
|
- **视差层叠** —— 使用 `useScroll` 和 `useTransform` 实现多速度深度效果
|
|||
|
|
- **滚动进度** —— 与滚动位置绑定的阅读进度条
|
|||
|
|
|
|||
|
|
### 手势交互
|
|||
|
|
- **卡片悬停** —— 使用 `whileHover` 实现带阴影的上升效果
|
|||
|
|
- **磁性按钮** —— CTA 的光标跟随效果
|
|||
|
|
- **拖拽轮播** —— 使用 `drag` 约束实现触摸友好的水平滑块
|
|||
|
|
|
|||
|
|
### 微交互
|
|||
|
|
- **按钮按压** —— 使用 `whileTap` 实现触觉点击反馈
|
|||
|
|
- **切换开关** —— 使用 `layout` 动画实现平滑状态过渡
|
|||
|
|
- **加载旋转器** —— 基于弹簧的加载动画
|
|||
|
|
|
|||
|
|
### 布局动画
|
|||
|
|
- **列表排序** —— 使用 FLIP 技术实现拖拽排序
|
|||
|
|
- **手风琴** —— 使用 `AnimatePresence` 实现平滑展开/收起
|
|||
|
|
- **标签切换** —— 使用 `layoutId` 实现共享布局过渡
|
|||
|
|
|
|||
|
|
## 内容结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
motion-dev-animations-skill/
|
|||
|
|
├── SKILL.md # 核心指令（约 2000 个 token）
|
|||
|
|
├── examples/ # 动画模式（按需加载）
|
|||
|
|
│ ├── hero-fade-up.md # Apple 风格入场动画
|
|||
|
|
│ ├── scroll-reveal.md # Intersection Observer 显现效果
|
|||
|
|
│ ├── card-hover.md # 悬停上升 + 阴影效果
|
|||
|
|
│ ├── parallax-layers.md # 多速度视差效果
|
|||
|
|
│ ├── magnetic-button.md # 光标跟随按钮
|
|||
|
|
│ └── example-config.json # 示例 motion 配置
|
|||
|
|
├── reference/ # API 文档（按需加载）
|
|||
|
|
│ ├── api-reference.md # 完整 Motion.dev API
|
|||
|
|
│ └── spring-physics.md # 弹簧参数和预设值
|
|||
|
|
├── templates/ # 起始代码
|
|||
|
|
│ ├── nextjs-page.tsx # 带动画的完整页面
|
|||
|
|
│ └── component-library.tsx # 可复用动画组件
|
|||
|
|
├── schema/ # 验证
|
|||
|
|
│ └── motion-config.schema.json # 配置的 JSON Schema
|
|||
|
|
└── scripts/ # 工具
|
|||
|
|
└── validate_motion_config.py # 配置验证器
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 性能标准
|
|||
|
|
|
|||
|
|
本技能生成的每个动画均满足以下目标：
|
|||
|
|
|
|||
|
|
| 指标 | 目标 | 实现方式 |
|
|||
|
|
|------|------|----------|
|
|||
|
|
| 帧率 | 60fps+（理想 120fps） | 仅使用 GPU 加速变换 |
|
|||
|
|
| 包体积 | < 50KB | Tree-shaking、代码分割 |
|
|||
|
|
| 无障碍访问 | 完整支持 | 遵守 `prefers-reduced-motion` |
|
|||
|
|
| 布局偏移 | 零偏移 | 不对宽高进行动画处理 |
|
|||
|
|
| 键盘支持 | 完整支持 | 焦点状态、键盘导航 |
|
|||
|
|
|
|||
|
|
## 框架支持
|
|||
|
|
|
|||
|
|
| 框架 | 版本 | 状态 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| React | 19+ | 完整支持 |
|
|||
|
|
| Next.js | 15+ | 完整支持（App Router） |
|
|||
|
|
| Svelte | 5+ | 完整支持 |
|
|||
|
|
| Astro | 4+ | 完整支持 |
|
|||
|
|
| Vue | 3+ | 使用 `motion-v` 包 |
|
|||
|
|
| 原生 JS | ES2020+ | 通过 `motion` 包 |
|
|||
|
|
|
|||
|
|
## 贡献
|
|||
|
|
|
|||
|
|
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解贡献指南。简而言之：在 `examples/` 中添加示例，在 `reference/` 中扩展 API 文档，或在 `templates/` 中创建模板。
|
|||
|
|
|
|||
|
|
## 许可证
|
|||
|
|
|
|||
|
|
[MIT](LICENSE)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
<div align="center">
|
|||
|
|
|
|||
|
|
由 [Boris Djordjevic](https://github.com/longevityboris) 在 [199 Biotechnologies](https://github.com/199-biotechnologies) | [Paperfoot AI](https://paperfoot.ai) 构建
|
|||
|
|
|
|||
|
|
[](https://github.com/199-biotechnologies/motion-dev-animations-skill/stargazers)
|
|||
|
|
[](https://x.com/longevityboris)
|
|||
|
|
|
|||
|
|
</div>
|