AI导哈

动画代码生成工具

一个专家级动画建议MCP，通过简单的自然语言命令生成生产级的anime.js代码，处理时间线、交错效果、运动路径和复杂序列。

  • by Microck
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 Microck/animejs-mcp

使用说明

阿尼梅杰斯·麦克普

一个专业的动画顾问mcp，为您的web项目生成生产就绪的anime.js代码。它通过简单的自然语言命令处理时间线、交错、运动路径和复杂序列。

安装

注： 对于人工智能原生环境，安装过程得到了简化。

法典

告诉codex：

Fetch and follow instructions from https://raw.githubusercontent.com/microck/animejs-mcp/master/.codex/INSTALL.md

开源代码

告诉opencode：

Fetch and follow instructions from https://raw.githubusercontent.com/microck/animejs-mcp/master/.opencode/INSTALL.md

特征

  • 即时动画：使用一个提示为单个或多个元素生成css/svg动画。
  • 时间线生成器：使用创建复杂的排序 anime.timeline() 以协调多种效果。
  • 交错效应：自动为网格、列表和文本生成交错代码。
  • 运动路径：创建svg路径跟踪动画(anime.path()).
  • 放松专家：建议最佳缓解功能(spring, elastic, steps)根据你的描述。

用法

工具

  • animate：为特定元素生成基本动画代码。
  • timeline：生成用于对多个动画进行排序的时间线代码。
  • stagger：生成交错效果代码。
  • svg_path：生成svg路径动画代码。

例子

{
  "name": "animate",
  "arguments": {
    "targets": ".box",
    "properties": { "translateX": 250, "rotate": "1turn" },
    "duration": 800,
    "easing": "easeInOutSine"
  }
}

{
  "name": "timeline",
  "arguments": {
    "animations": [
      { "targets": ".el-1", "properties": { "opacity": 1 } },
      { "targets": ".el-2", "properties": { "opacity": 1 }, "offset": "-=500" }
    ],
    "loop": true
  }
}

许可证

麻省理工学院

相关 MCP