Anime Js

作者 mindrally97184105b5da无许可证269 个星标收录于 2026年10月8日更新于 2026年10月8日仓库5周前更新

Expert guidelines for building performant animations with Anime.js animation library

仅含说明Software Development Design & Creative

AI 生成的概览

使用 Anime.js JavaScript 库构建高性能网页动画的指南与代码示例。

功能: 该技能提供使用 Anime.js 创建动画的专家指导，涵盖安装与导入、基础动画、性能优化、时间轴、交错效果、缓动函数、SVG 动画、基于函数的值、回调、React 集成、Web Animations API 桥接以及减少动态效果的无障碍处理。产出的是说明性文字与 JavaScript 或 TypeScript 代码片段，而非可运行脚本。
适用场景: 在编写或审查网页项目的 Anime.js 动画代码时使用。适用于涉及时间轴、交错效果、SVG 运动、缓动或动画性能调优的任务，包括 React 组件。
运行要求: 不包含脚本，仅为说明性指导。内容假设存在 JavaScript 或 TypeScript 网页项目，并通过 npm 安装 animejs 包；React 集成示例还需要 React。

Anime.js Animation Guidelines

You are an expert in Anime.js, JavaScript, and web animation performance. Follow these guidelines when creating animations.

Core Principles

Installation and Import

javascript

// Full importimport anime from "animejs";
// Modular import for smaller bundle sizeimport { animate, timeline, stagger } from "animejs";

// Full importimport anime from "animejs";
// Modular import for smaller bundle sizeimport { animate, timeline, stagger } from "animejs";

Basic Animation

javascript

anime({  targets: ".element",  translateX: 250,  rotate: "1turn",  duration: 800,  easing: "easeInOutQuad"});

anime({  targets: ".element",  translateX: 250,  rotate: "1turn",  duration: 800,  easing: "easeInOutQuad"});

Performance Optimization

Frame Rate Control

javascript

// Adjust global frame rate for lower-end devicesanime.suspendWhenDocumentHidden = true;
// Control FPS for specific animationsanime({  targets: ".element",  translateX: 250,  update: function(anim) {    // Custom frame rate limiting if needed  }});

// Adjust global frame rate for lower-end devicesanime.suspendWhenDocumentHidden = true;
// Control FPS for specific animationsanime({  targets: ".element",  translateX: 250,  update: function(anim) {    // Custom frame rate limiting if needed  }});

Use Transforms Over Layout Properties

javascript

// Good - uses GPU-accelerated transformsanime({  targets: ".element",  translateX: 100,  // Good  translateY: 50,   // Good  scale: 1.2,       // Good  rotate: 45,       // Good  opacity: 0.5      // Good});
// Avoid - causes layout recalculationanime({  targets: ".element",  left: 100,        // Avoid  top: 50,          // Avoid  width: 200,       // Avoid  height: 150       // Avoid});

// Good - uses GPU-accelerated transformsanime({  targets: ".element",  translateX: 100,  // Good  translateY: 50,   // Good  scale: 1.2,       // Good  rotate: 45,       // Good  opacity: 0.5      // Good});
// Avoid - causes layout recalculationanime({  targets: ".element",  left: 100,        // Avoid  top: 50,          // Avoid  width: 200,       // Avoid  height: 150       // Avoid});

Use Animatable for High-Frequency Updates

javascript

import { Animatable } from "animejs";
// Optimized for continuous updates (mouse tracking, etc.)const animatable = new Animatable(".cursor", {  x: 0,  y: 0});
document.addEventListener("mousemove", (e) => {  animatable.x = e.clientX;  animatable.y = e.clientY;});

import { Animatable } from "animejs";
// Optimized for continuous updates (mouse tracking, etc.)const animatable = new Animatable(".cursor", {  x: 0,  y: 0});
document.addEventListener("mousemove", (e) => {  animatable.x = e.clientX;  animatable.y = e.clientY;});

Timeline Animations

Basic Timeline

javascript

const tl = anime.timeline({  easing: "easeOutExpo",  duration: 750});
tl.add({  targets: ".header",  translateY: [-50, 0],  opacity: [0, 1]}).add({  targets: ".content",  translateY: [30, 0],  opacity: [0, 1]}, "-=500") // Overlap by 500ms.add({  targets: ".footer",  translateY: [30, 0],  opacity: [0, 1]}, "-=500");

const tl = anime.timeline({  easing: "easeOutExpo",  duration: 750});
tl.add({  targets: ".header",  translateY: [-50, 0],  opacity: [0, 1]}).add({  targets: ".content",  translateY: [30, 0],  opacity: [0, 1]}, "-=500") // Overlap by 500ms.add({  targets: ".footer",  translateY: [30, 0],  opacity: [0, 1]}, "-=500");

Timeline Controls

javascript

const tl = anime.timeline({  autoplay: false});
// Control methodstl.play();tl.pause();tl.restart();tl.reverse();tl.seek(1000); // Go to 1 second

const tl = anime.timeline({  autoplay: false});
// Control methodstl.play();tl.pause();tl.restart();tl.reverse();tl.seek(1000); // Go to 1 second

Stagger Animations

Basic Stagger

javascript

anime({  targets: ".grid-item",  translateY: [50, 0],  opacity: [0, 1],  delay: anime.stagger(100) // 100ms delay between each});

anime({  targets: ".grid-item",  translateY: [50, 0],  opacity: [0, 1],  delay: anime.stagger(100) // 100ms delay between each});

Advanced Stagger Options

javascript

// Stagger from centeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(100, { from: "center" })});
// Grid staggeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(50, {    grid: [14, 5],    from: "center"  })});
// Stagger with easinganime({  targets: ".item",  translateX: 250,  delay: anime.stagger(100, { easing: "easeOutQuad" })});

// Stagger from centeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(100, { from: "center" })});
// Grid staggeranime({  targets: ".grid-item",  scale: [0, 1],  delay: anime.stagger(50, {    grid: [14, 5],    from: "center"  })});
// Stagger with easinganime({  targets: ".item",  translateX: 250,  delay: anime.stagger(100, { easing: "easeOutQuad" })});

Easing Functions

Built-in Easings

javascript

// Common easingsanime({  targets: ".element",  translateX: 250,  easing: "easeOutExpo"     // Fast start, slow end  // easing: "easeInOutQuad" // Smooth both ends  // easing: "easeOutElastic(1, .5)" // Bouncy  // easing: "easeOutBounce" // Bounce effect  // easing: "spring(1, 80, 10, 0)" // Physics-based});

// Common easingsanime({  targets: ".element",  translateX: 250,  easing: "easeOutExpo"     // Fast start, slow end  // easing: "easeInOutQuad" // Smooth both ends  // easing: "easeOutElastic(1, .5)" // Bouncy  // easing: "easeOutBounce" // Bounce effect  // easing: "spring(1, 80, 10, 0)" // Physics-based});

Custom Easing

SVG Animation

Path Animation

javascript

const path = anime.path(".motion-path");
anime({  targets: ".element",  translateX: path("x"),  translateY: path("y"),  rotate: path("angle"),  easing: "linear",  duration: 2000,  loop: true});

const path = anime.path(".motion-path");
anime({  targets: ".element",  translateX: path("x"),  translateY: path("y"),  rotate: path("angle"),  easing: "linear",  duration: 2000,  loop: true});

Line Drawing

javascript

anime({  targets: "path",  strokeDashoffset: [anime.setDashoffset, 0],  easing: "easeInOutSine",  duration: 1500,  delay: anime.stagger(250)});

anime({  targets: "path",  strokeDashoffset: [anime.setDashoffset, 0],  easing: "easeInOutSine",  duration: 1500,  delay: anime.stagger(250)});

Morphing

javascript

anime({  targets: "path",  d: [    { value: "M10 10 L90 10 L90 90 L10 90 Z" },    { value: "M10 50 Q50 10 90 50 Q50 90 10 50 Z" }  ],  easing: "easeInOutQuad",  duration: 1000,  loop: true,  direction: "alternate"});

anime({  targets: "path",  d: [    { value: "M10 10 L90 10 L90 90 L10 90 Z" },    { value: "M10 50 Q50 10 90 50 Q50 90 10 50 Z" }  ],  easing: "easeInOutQuad",  duration: 1000,  loop: true,  direction: "alternate"});

Function-Based Values

Dynamic Values

javascript

anime({  targets: ".element",  translateX: function(el, i) {    return i * 100; // Each element moves further  },  rotate: function(el, i, total) {    return (360 / total) * i; // Distribute rotation  },  delay: function(el, i) {    return i * 50;  }});

anime({  targets: ".element",  translateX: function(el, i) {    return i * 100; // Each element moves further  },  rotate: function(el, i, total) {    return (360 / total) * i; // Distribute rotation  },  delay: function(el, i) {    return i * 50;  }});

Callbacks and Events

Animation Events

javascript

anime({  targets: ".element",  translateX: 250,  begin: function(anim) {    console.log("Animation started");  },  update: function(anim) {    console.log(Math.round(anim.progress) + "%");  },  complete: function(anim) {    console.log("Animation completed");  }});

anime({  targets: ".element",  translateX: 250,  begin: function(anim) {    console.log("Animation started");  },  update: function(anim) {    console.log(Math.round(anim.progress) + "%");  },  complete: function(anim) {    console.log("Animation completed");  }});

Looping

javascript

anime({  targets: ".element",  translateX: 250,  direction: "alternate",  loop: true,  loopComplete: function(anim) {    console.log("Loop completed");  }});

anime({  targets: ".element",  translateX: 250,  direction: "alternate",  loop: true,  loopComplete: function(anim) {    console.log("Loop completed");  }});

React Integration

Basic React Usage

tsx

import { useEffect, useRef } from "react";import anime from "animejs";
function AnimatedComponent() {  const elementRef = useRef(null);
  useEffect(() => {    const animation = anime({      targets: elementRef.current,      translateX: 250,      duration: 800    });
    return () => {      animation.pause(); // Cleanup    };  }, []);
  return <div ref={elementRef}>Animated</div>;}

import { useEffect, useRef } from "react";import anime from "animejs";
function AnimatedComponent() {  const elementRef = useRef(null);
  useEffect(() => {    const animation = anime({      targets: elementRef.current,      translateX: 250,      duration: 800    });
    return () => {      animation.pause(); // Cleanup    };  }, []);
  return <div ref={elementRef}>Animated</div>;}

With useCallback for Controls

tsx

function ControlledAnimation() {  const elementRef = useRef(null);  const animationRef = useRef(null);
  const playAnimation = useCallback(() => {    animationRef.current = anime({      targets: elementRef.current,      translateX: [0, 250],      duration: 800    });  }, []);
  useEffect(() => {    return () => {      animationRef.current?.pause();    };  }, []);
  return (    <>      <div ref={elementRef}>Animated</div>      <button onClick={playAnimation}>Play</button>    </>  );}

function ControlledAnimation() {  const elementRef = useRef(null);  const animationRef = useRef(null);
  const playAnimation = useCallback(() => {    animationRef.current = anime({      targets: elementRef.current,      translateX: [0, 250],      duration: 800    });  }, []);
  useEffect(() => {    return () => {      animationRef.current?.pause();    };  }, []);
  return (    <>      <div ref={elementRef}>Animated</div>      <button onClick={playAnimation}>Play</button>    </>  );}

Web Animations API Bridge

Using WAAPI for Native Performance

javascript

import { wapiAnimate } from "animejs";
// Uses browser's native Web Animations APIwapiAnimate(".element", {  translateX: 250,  duration: 800});

import { wapiAnimate } from "animejs";
// Uses browser's native Web Animations APIwapiAnimate(".element", {  translateX: 250,  duration: 800});

Accessibility

Respect Reduced Motion

javascript

const prefersReducedMotion = window.matchMedia(  "(prefers-reduced-motion: reduce)").matches;
anime({  targets: ".element",  translateX: 250,  duration: prefersReducedMotion ? 0 : 800,  easing: prefersReducedMotion ? "linear" : "easeOutExpo"});

const prefersReducedMotion = window.matchMedia(  "(prefers-reduced-motion: reduce)").matches;
anime({  targets: ".element",  translateX: 250,  duration: prefersReducedMotion ? 0 : 800,  easing: prefersReducedMotion ? "linear" : "easeOutExpo"});

Best Practices Summary

Use transforms (translate, scale, rotate) over layout properties
Import only needed modules for smaller bundle size
Use stagger for multiple element animations
Clean up animations on component unmount
Use Animatable for high-frequency updates
Leverage timeline for complex sequences
Use function-based values for dynamic animations
Respect reduced motion preferences
Consider WAAPI bridge for native performance
Test on lower-powered devices

来源与署名

来源：mindrally/skills位于anime-js提交9718410

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Anime Js

Anime.js Animation Guidelines

Core Principles

Installation and Import

Basic Animation

Performance Optimization

Frame Rate Control

Use Transforms Over Layout Properties

Use Animatable for High-Frequency Updates

Timeline Animations

Basic Timeline

Timeline Controls

Stagger Animations

Basic Stagger

Advanced Stagger Options

Easing Functions

Built-in Easings

Custom Easing

SVG Animation

Path Animation

Line Drawing

Morphing

Function-Based Values

Dynamic Values

Callbacks and Events

Animation Events

Looping

React Integration

Basic React Usage

With useCallback for Controls

Web Animations API Bridge

Using WAAPI for Native Performance

Accessibility

Respect Reduced Motion

Best Practices Summary

来源与署名

更多来自 mindrally/skills 的技能

Zustand State Management

Zod Schema Validation

Woocommerce

Wordpress

Websocket Development

Web Development

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices