mcpField
A
animate

animate

github.com/onewave-ai创意与媒体398403 次安装1 周前更新
代码仓库

关于 animate

animate 是一项将自然语言描述转为动画视频和动态图形的技能，输出独立的 Vite + React + Framer Motion 项目。它会规划场景，并按视觉需求选择动画技术栈，随后搭建项目并在浏览器中预览。

主要功能

  1. 01根据描述规划场景
  2. 02选择动画技术栈
  3. 03生成 React 场景组件
  4. 04定制颜色与字体
  5. 05在浏览器中构建和预览

适用场景

  1. 01制作产品介绍动画
  2. 02构建演示或营销动态图形
  3. 03生成粒子或图案视觉效果
  4. 04制作 3D 场景或标志动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onewave-ai/claude-skills --skill animate

安装后在 Claude Code 中输入/animate确认已加载。

详细介绍

动画生成器

通过自然语言描述创建动画视频和动态图形。输出可在浏览器中播放的独立 Vite + React + Framer Motion 项目。

工作流

步骤 1：解析请求

将用户的描述拆解为场景规划：

  • 3-7 个场景，每个场景时长为 3-5 秒
  • 确定故事走向：主角/开场、问题、解决方案、功能、行动号召/结尾
  • 选择符合品牌/氛围的配色方案和字体
  • 使用 $ARGUMENTS 作为用户的动画描述
步骤 2：选择动画技术栈

根据请求自动选择最佳方案：

请求类型技术栈适用场景
产品介绍、演示、营销Framer Motion（默认）基于场景，包含文本、图标和转场
生成艺术、粒子、图案p5.js创意/算法视觉效果
3D 对象、环境、产品渲染Three.js + react-three-fiber需要 3D 场景
简单的文本/Logo 动画仅 CSS 动画极简，无需繁重依赖

除非请求明确需要其他方案，否则默认使用 Framer Motion。

步骤 3：搭建项目脚手架
  1. 创建目录：~/animations/[project-name]/
  2. 运行脚手架脚本：bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]
  3. 将模板文件从 ~/.claude/skills/animate/assets/template-files/ 复制到项目中
步骤 4：生成场景组件

阅读动画预设和场景模式参考文档：

  • references/animation-presets.md — 所有可用的转场、弹簧动画和缓动效果
  • references/scene-patterns.md — 场景代码模式示例

为每个场景在 client/src/components/video/video_scenes/ 中创建一个 React 组件：

  • 使用 motion.div 和场景转场预设（fadeBlur、scaleFade、slideLeft、splitHorizontal、morphExpand 等）
  • 使用 containerVariants 和 itemVariants 实现内容的交错显示
  • 使用 vw 单位进行响应式尺寸设置（适用于任意分辨率）
  • 使用 CSS 变量设置主题（var(--color-accent)、var(--color-bg-dark) 等）
  • 使用 Lucide 图标作为视觉元素
  • 使用 .glass-panel 类制作磨砂玻璃卡片
  • 使用 .text-gradient 和 .text-gradient-accent 制作渐变文本
步骤 5：生成 VideoTemplate

创建 client/src/components/video/VideoTemplate.tsx：

  • 导入所有场景组件
  • 定义 SCENE_DURATIONS 对象（场景名称 -> 毫秒）
  • 使用 useVideoPlayer Hook 管理场景切换
  • 使用 AnimatePresence mode="wait" 包裹场景，实现平滑转场
  • 根据 currentScene 索引有条件地渲染每个场景
步骤 6：自定义主题

更新 client/src/index.css，设置合适的颜色：

  • 如果用户指定了品牌颜色，更新 CSS 变量
  • 选择符合氛围的字体（科技风格可用 Space Grotesk，优雅风格可用 Playfair Display 等）
  • 更新渐变和光晕样式，使其符合配色方案
步骤 7：Gemini 3.1 Pro 增强（可选）

如果 GEMINI_API_KEY 环境变量可用：

  1. 阅读 references/gemini-integration.md 了解 API 详情
  2. 将用户的描述发送给 Gemini 3.1 Pro，请其提供：
    • 场景拆解、场景描述和建议的转场
    • CSS 变量形式的配色方案
    • 每个场景的文案/标题
    • 适用时提供 SVG 图形
  3. 使用 Gemini 的输出辅助生成场景
  4. 如果没有 API 密钥，则跳过此步骤 — 由 Claude 直接处理所有创意决策
步骤 8：构建并预览
cd ~/animations/[project-name]
npm install
npm run dev

告知用户动画正在 http://localhost:5173 运行，并在浏览器中打开。

场景转场参考（速查）

选择与故事节拍相符的转场：

  • fadeBlur — 柔和的开场／结尾、梦幻般的揭示效果
  • scaleFade — 自信的揭示效果、产品展示
  • slideLeft/slideRight — 顺序推进、时间线流动
  • splitHorizontal/splitVertical — 戏剧化揭示、前后对比
  • morphExpand — 盛大收尾、CTA 屏幕
  • clipCircle — 聚焦注意力、聚光灯效果
  • perspectiveFlip — 卡片翻转、视角变化
  • wipe — 干净利落的转场、方向性流动
  • zoomThrough — 沉浸式体验、向前推进的动感
  • crossDissolve — 柔和、富有情感的转场

元素动画参考（速查）

  • popIn — 用于图标／徽章的弹跳式缩放入场
  • fadeUp/fadeDown — 微妙的内容显现效果
  • slideInLeft/slideInRight — 方向性内容
  • blurIn — 柔和的聚焦显现效果
  • elasticScale — 活泼、有活力的入场效果
  • perspectiveRotateIn — 3D 卡片显现效果
  • pulse — 循环吸引注意力
  • float — 轻柔的悬浮效果

重要规则

  1. 调整尺寸时始终使用 vw 单位，确保动画在任何分辨率下都效果良好
  2. 每个场景控制在 3-5 秒，总视频时长为 15-30 秒
  3. 使用 AnimatePresence mode="wait"，确保一个场景退出后下一个场景再进入
  4. 每个场景都必须有背景处理（渐变、图片或动画形状）
  5. 为列表和网格使用交错动画（staggerChildren: 0.1-0.2）
  6. 如果资源较大，请添加加载状态
  7. 项目必须完全自包含，除 npm 包外不得依赖外部内容
  8. 生成的代码或内容中不得使用表情符号

评论

支持 Markdown