Anime.js 动画技能

概述

本技能使 WorkBuddy 能够创建、演示并生成 Anime.js 动画。Anime.js 是一个轻量级 JavaScript 动画库，支持对 CSS 属性、SVG 路径、DOM 元素进行动画，并可构建基于时间轴的动画。

当触发该技能时，WorkBuddy 应执行以下操作：

1. 理解用户提出的动画需求
2. 在对话中使用 show_widget 展示动画演示（如用户明确要求或场景合适）
3. 生成完整、开箱即用的 Anime.js 代码（HTML + JS）

核心能力

1. 在对话中展示动画演示

当用户希望查看动画效果时，使用 show_widget 创建一个交互式 HTML 小部件以演示动画。

关键要求：

• 从 CDN 加载 Anime.js：https://unpkg.com/animejs@3.2.2/lib/anime.min.js
• 构建自包含的 HTML 小部件，内联

  常见动画模式

  CSS Transform 动画

  对 DOM 元素的位置、旋转、缩放和透明度进行动画。

  anime({
    targets: '.box',
    translateX: 250,
    rotate: 360,
    scale: 2,
    duration: 1000,
    easing: 'easeInOutQuad'
  });
  

  错序动画（Stagger Animation）

  对多个元素依次施加延迟，实现逐个动画效果。

  anime({
    targets: '.item',
    scale: [0, 1],
    delay: anime.stagger(100), // 每个元素之间延迟 100ms
    easing: 'easeOutQuad'
  });
  

  SVG 路径动画

  使元素沿 SVG 路径运动。

  anime({
    targets: 'circle',
    translateX: anime.path('path').x,
    translateY: anime.path('path').y,
    duration: 2000,
    easing: 'easeInOutSine'
  });
  

  时间轴动画（Timeline Animation）

  按精确时间顺序串联多个动画。

  var timeline = anime.timeline({
    easing: 'easeOutQuad',
    loop: true
  });
  
  timeline
    .add({ targets: '.el1', translateX: 250, duration: 500 })
    .add({ targets: '.el2', translateX: 250, duration: 500 }, '-=400'); // 重叠 400ms
  

  工作流程

  当用户请求动画时：

  1. 明确需求（若需求模糊）：需动画的元素？期望效果？持续时间？是否循环？

  2. 展示演示（可选）：使用 show_widget 在对话中呈现交互式演示

  3. 生成代码：提供含完整 Anime.js 代码的 HTML 文件

  4. 说明要点：简要解释关键动画参数及自定义方法

  参考资料

  references/api_reference.md

  包含 Anime.js 的完整 API 参考文档，涵盖所有可用属性、缓动函数及方法。当需要查阅 API 细节（如属性、缓动类型、时间轴语法等）时，请加载该文件。

  references/examples.md

  包含 15+ 个常见用例的动画示例及其代码片段。当需要灵感或特定动画类型（如错序动画、时间轴动画、SVG 路径动画等）的参考代码时，请加载该文件。