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