---

名称: 动画规范 描述: 生成动画规范、缓动曲线和动效设计文档 允许使用的工具:

• 读取
• 写入
• 编辑
• Bash
• Glob
• Grep

---

动画规范技能

目的

为保持UI动画的一致性，生成包含缓动曲线、时间值和动效设计指南的全面动画规范。

能力

• 定义自定义缓动曲线（cubic-bezier）
• 为不同场景计算动画时序
• 生成CSS动画关键帧
• 创建Lottie动画规范
• 编写动效设计指南
• 导出动画设计令牌

目标流程

• component-library.js (interactionAnimationTask)
• hifi-prototyping.js
• design-system.js

集成点

• CSS动画
• Lottie动画
• Framer Motion
• GSAP

输入模式

{
  "type": "object",
  "properties": {
    "animationType": {
      "type": "string",
      "enum": ["entrance", "exit", "emphasis", "transition", "loading", "feedback"],
      "description": "动画类别"
    },
    "duration": {
      "type": "object",
      "properties": {
        "fast": { "type": "number", "default": 150 },
        "normal": { "type": "number", "default": 300 },
        "slow": { "type": "number", "default": 500 }
      }
    },
    "easing": {
      "type": "object",
      "properties": {
        "standard": { "type": "string" },
        "decelerate": { "type": "string" },
        "accelerate": { "type": "string" }
      }
    },
    "elements": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "properties": { "type": "array" },
          "stagger": { "type": "number" }
        }
      }
    },
    "outputFormat": {
      "type": "string",
      "enum": ["css", "js", "lottie", "tokens"],
      "default": "css"
    }
  },
  "required": ["animationType"]
}

输出模式

{
  "type": "object",
  "properties": {
    "animationSpec": {
      "type": "object",
      "description": "完整的动画规范"
    },
    "easingCurves": {
      "type": "object",
      "description": "Cubic-bezier值"
    },
    "cssKeyframes": {
      "type": "string",
      "description": "CSS @keyframes代码"
    },
    "tokens": {
      "type": "object",
      "description": "动画设计令牌"
    },
    "documentation": {
      "type": "string",
      "description": "动效设计指南"
    }
  }
}

使用示例

const result = await skill.execute({
  animationType: 'entrance',
  duration: { fast: 150, normal: 300, slow: 500 },
  easing: {
    standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
    decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
    accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
  },
  outputFormat: 'css'
});