animejs-animation 中文使用指南 - Skill ZIP 下载与风险提示

输入：任务目标、上下文材料、文件路径、约束条件或需要处理的内容。

输出：按 Skill 说明生成的文档、代码、检查结果、计划、建议或操作步骤。

示例任务

安装方式

风险边界

使用前请检查权限、外部依赖和要处理的数据类型。不要把密码、密钥、身份信息或敏感客户资料交给未经确认的 Skill。

SKILL.md 文档介绍

Anime.js Animation Skill

Anime.js is a lightweight but extremely powerful JavaScript animation engine. It excels at complex timelines, staggering, and precise control over DOM, CSS, and SVGs.

Context

This skill is used for creating high-fidelity, jaw-dropping web animations that go far beyond simple CSS transitions. It's the tool of choice for awards-caliber interactive sites.

When to Use

Trigger this skill when:

Creating complex, multi-stage landing page orchestrations.
Implementing staggered animations for revealing grids, text, or data visualizations.
Animating SVG paths (morphing shapes, drawing dynamic lines).
Building highly interactive, kinetic UI elements that respond fluidly to user input.

Execution Workflow

1. Identify Targets: Select the DOM elements or SVGs to be animated.

2. Define Properties & Easing: Specify values to animate. Crucially, utilize advanced easing functions (e.g., custom cubicBezier, spring, or elastic) instead of basic linear or ease-in-out to make the motion feel expensive and natural.

3. Orchestrate Timelines: Use anime.timeline() to sequence complex choreography. Master the use of timeline offsets (relative '-=200' vs absolute) to create seamless overlapping motion.

4. Implement:

   const tl = anime.timeline({
     easing: "spring(1, 80, 10, 0)",
     duration: 1000,
   });
   tl.add({
     targets: ".hero-text",
     translateY: [50, 0],
     opacity: [0, 1],
     delay: anime.stagger(100),
   }).add(
     { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
     "-=800",
   );

Strict Rules

ABSOLUTE MANDATE: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build common, boring transitions. Every animation should feel bespoke, fluid, and heavily polished.
Staggering: Leverage anime.stagger() extensively to add organic rhythm to multiple elements.
Performance: Monitor main thread usage; use will-change: transform, opacity where appropriate for GPU acceleration.

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

animejs-animation

快速判断

适合任务

输入与输出