查看原始文章https://devaradise.com/javascript-react-animation-libraries/以更好地使用目錄進行導航。

動畫可以使您的 Web 應用程式更具吸引力和互動性，從而使它們從優秀走向卓越。它們提供視覺回饋，引導使用者完成介面，並為您的專案增添個性。

有許多動畫庫，從簡單的、基於 CSS 的庫到能夠建立複雜動畫的強大 JavaScript 庫。在本文中，我們將深入探討 React 和現代 Web 應用程式的前 15 個動畫庫。

從著名的 React Spring 和 Framer Motion 到 Vivus 和 Three.js 等專業庫，您將在這裡找到讓您的 Web 專案大放異彩的東西。讓我們探索這些庫，看看它們如何改變您的網站用戶體驗！

適用於一般用例的動畫庫

1. Animate.css - CSS動畫

Animate.css 是一個流行的 CSS 庫，它提供了廣泛的預定義動畫，使您可以輕鬆地將動畫應用到任何 Web 專案。 Animate.css在 GitHub 上擁有超過 80.2k 顆星和數百萬次 npm 下載，是快速、簡單動畫的首選。

安裝及基本使用

npm install animate.css

import 'animate.css';

<div class="animate__animated animate__bounce">An animated element</div>

最佳用例

Animate.css 最適合需要快速實作而不需要 JavaScript 的簡單動畫。

優點

易於使用，輕量級，動畫種類繁多。

缺點

僅限於 CSS 動畫，對動畫行為的控制較少。

2.React Spring

React Spring 是 React 的一個流行動畫庫，提供了一種強大且靈活的方式來建立基於彈簧物理的動畫。它在 GitHub 上擁有超過 27,800 顆星，並在社區中廣泛使用。

安裝及基本使用

npm install @react-spring/web

import React from 'react';
import { useSpring, animated } from '@react-spring/web';

const App = () => {
    const springs = useSpring({
        from: { x: 0 },
        to: { x: 100 }
    });

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                background: '#ff6d6d',
                borderRadius: 8
            }}
        />
    );
};

export default App;

最佳用例

透過對過渡和互動的微調控制來建立複雜的動畫。

優點

高度靈活，支援高級動畫，良好的社區支援。

缺點

對於初學者來說，學習曲線可能很陡峭。

3.Framer Motion

Framer Motion 是一個功能強大的動畫庫，以其易用性和全面的功能而聞名。它在 GitHub 上擁有超過 22,800 顆星，並因其直觀的 API 而受到廣泛讚譽。

安裝及基本使用

npm install framer-motion

import React from 'react';
import { motion } from 'framer-motion';

const App = () => {
    return (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
            Hello, Framer Motion!
        </motion.div>
    );
};

export default App;

最佳用例

使用最少的程式碼建立流暢且具有視覺吸引力的動畫。

優點

直覺的 API，支援關鍵影格動畫，優秀的文件。

缺點

與其他庫相比，套件大小稍大。

4.Anime.js

Anime.js 是一個輕量級的 JavaScript 動畫函式庫，具有強大的 API。它在 GitHub 上擁有超過 49,200 顆星，廣泛用於建立複雜且高度可自訂的動畫。

安裝及基本使用

npm install animejs

import anime from 'animejs/lib/anime.es.js';

anime({
    targets: 'div',
    translateX: 250,
    rotate: '1turn',
    duration: 800
});

最佳用例

透過精確控制建立複雜而詳細的動畫。

優點

輕量級、多功能、高度客製化。

缺點

需要 JavaScript 知識，簡單的動畫可能會很複雜。

5.GSAP （GreenSock動畫平台）

GSAP 是一個強大的 JavaScript 動畫庫，以其高效能和豐富的功能集而聞名。它在 GitHub 上擁有超過 19,200 顆星，廣泛應用於 Web 和行動應用程式。

安裝及基本使用

npm install gsap

import { gsap } from 'gsap';

gsap.to('.box', { rotation: 27, x: 100, duration: 1 });

最佳用例

高效能動畫和複雜序列。

優點

極其強大、堅固、高性能。

缺點

捆綁包尺寸較大，需學習時間。

6.Popmotion

Popmotion 是一個功能強大、靈活的 JavaScript 動畫函式庫。它為 Framer Motion 中的動畫提供動力。它在 GitHub 上擁有超過 19900 顆星，並提供一系列用於建立動畫和互動的工具。

安裝及基本使用

npm install popmotion

import { animate } from 'popmotion';

animate({
    from: 0,
    to: 100,
    onUpdate: (latest) => {
        console.log(latest);
    }
});

最佳用例

建立低級、複雜的互動和高度可自訂的動畫。

優點

功能性 API，靈活、可擴充且微型捆綁。

缺點

對於簡單的用例來說可能很複雜。

7.Mo.js

Mo.js 是一個網路動態圖形工具帶。它在 GitHub 上擁有超過 18,300 顆星，並提供各種用於建立動畫的工具。

安裝及基本使用

npm install @mojs/core

import { Mojs } from '@mojs/core';

const bouncyCircle = new mojs.Shape({
    parent: '#bouncyCircle',
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000,
    isYoyo: true,
    isShowStart: true,
    easing: 'elastic.inout',
    repeat: 1
});

bouncyCircle.play();

最佳用例

建立複雜的運動圖形和動畫。

優點

用途廣泛，功能強大，非常適合動態圖形。

缺點

學習曲線更陡峭，捆綁包尺寸更大。

適用於特定用例的動畫庫

8. Remotion - 使用 React 產生動畫影片

Remotion 可讓您使用 React 以程式設計方式建立影片。它是一個獨特的庫，在 GitHub 上擁有超過 19,600 顆星，使開發人員能夠利用 React 的強大功能來建立視訊內容。

安裝與基本使用

# new project
npx create-video@latest

# install to existing project
npm i --save-exact [email protected] @remotion/[email protected]

export const MyComposition = () => {
    return null;
};

import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';
registerRoot(RemotionRoot);

最佳用例

使用 React 以程式方式產生影片。

優點

獨特的功能，利用React技能，強大的影片創作能力。

缺點

利基用例對於初學者來說可能很複雜。

9. Vivus - SVG 繪圖動畫

Vivus 是一個用於製作 SVG 動畫的輕量級 JavaScript 函式庫。它在 GitHub 上擁有超過 15.1k 顆星，是建立 SVG 動畫的絕佳選擇。

安裝與基本使用

npm install vivus

import Vivus from 'vivus';

new Vivus(
    'my-svg',
    {
        type: 'delayed',
        duration: 200,
        animTimingFunction: Vivus.EASE
    },
    myCallback
);

// svg
<object id='my-svg' type='image/svg+xml' data='link/to/my.svg'></object>;

最佳用例

為 SVG 建立繪圖動畫。

優點

輕量級，專門用於 SVG，易於使用。

缺點

僅限於 SVG，不適合其他類型的動畫。

10. Lottie for Web - 渲染 After Effects 動畫

Lottie 是一個用於渲染在 Adobe After Effects 中建立的動畫的庫。它在 GitHub 上擁有超過 29,900 顆星，廣泛用於整合複雜的動畫。

安裝及基本使用

npm install lottie-web

import lottie from 'lottie-web';
import animationData from './animation.json';

lottie.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
});

最佳用例

整合在 After Effects 中建立的動畫。

優點

高品質動畫，與 After Effects 完美整合。

缺點

需要 After Effects 來建立動畫、較大的檔案。

11.ScrollReveal

ScrollReveal 是一個 JavaScript 函式庫，可在元素進入或離開視窗時輕鬆為其設定動畫。它在 GitHub 上擁有超過 22,200 顆星，非常適合基於滾動的動畫。

安裝及基本使用

npm install scrollreveal

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.box', { delay: 500 });

<h1 class="headline">Widget Inc.</h1>

最佳用例

新增基於滾動的顯示動畫。

優點

易於使用，輕量級，非常適合滾動動畫

缺點

僅限於基於滾動的動畫。

12.ScrollMagic

ScrollMagic 是一個用於建立滾動互動和動畫的函式庫。它在 GitHub 上擁有超過 14,800 顆星，提供了一種處理基於滾動的動畫的強大方法。

安裝及基本使用

npm install scrollmagic

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    duration: 100, // the scene should last for a scroll distance of 100px
    offset: 50 // start this scene after scrolling for 50px
})
    .setPin('#my-sticky-element') // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller

最佳用例

建立複雜的滾動互動和動畫。

優點

功能強大、靈活，與 GSAP 整合良好。

缺點

對於簡單的動畫來說可能很複雜，包包的大小也較大。

13.Typed.js

Typed.js 是一個 JavaScript 函式庫，可以鍵入文本，使其看起來像是由人類鍵入的。它在 GitHub 上擁有超過 15.1k 顆星，非常適合加入打字動畫。

安裝及基本使用

npm install typed.js

import Typed from 'typed.js';

const typed = new Typed('#element', {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
    typeSpeed: 50
});

最佳用例

為文字建立打字動畫。

優點

易於使用，重量輕，非常適合打字效果。

缺點

僅限於打字動畫，彈性較差。

進階動畫庫

14. Three.js - 高階 JavaScript 3D 函式庫

Three.js 是一個強大的 JavaScript 3D 函式庫，可讓您建立複雜的 3D 動畫和視覺化。它在 GitHub 上擁有超過 101k 顆星，廣泛用於 3D Web 應用程式。

安裝及基本使用

npm install three

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

最佳用例

建立高級 3D 動畫和視覺化。

優點

極其強大，龐大的社區，支援複雜的3D場景。

缺點

學習曲線陡峭，捆綁尺寸更大。

15.Theatre.js

Theatre.js 是一個高級動畫庫，用於以程式設計方式建立和控制動畫。它在 GitHub 上擁有超過 11k 顆星，提供了基於時間軸的動畫方法。

安裝及基本使用

# r3f and its dependencies
npm install --save react three @react-three/fiber

# Theatre.js
npm install --save @theatre/[email protected] @theatre/[email protected] @theatre/[email protected]

# Three.js types (when using Typescript)
npm install --save-dev @types/three

import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { getProject } from '@theatre/core'

// our Theatre.js project sheet, we'll use this later
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')

const App = () => {
  return (
    <Canvas
      camera={{
        position: [5, 5, -5],
        fov: 75,
      }}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

createRoot(document.getElementById('root')!).render(<App />)

最佳用例

透過精細控制建立基於時間軸的動畫。

優點

強大的時間軸控制，精確的動畫序列。

缺點

較新的圖書館，較小的社區，對於初學者來說很複雜。

結論

選擇正確的動畫庫取決於專案的需求和複雜性。如果您正在尋找簡單、快速的動畫，基於 CSS 的庫（如 Animate.css）是理想的選擇。對於更複雜的互動和高效能需求，請考慮強大的函式庫，例如 GSAP 或 Three.js。

每個庫都有其優點，因此請根據易用性、社群支援和您需要的特定功能等因素來評估它們。在將這些頂級動畫庫實施到您的專案之前，您可以開始嘗試它們。

您還有其他值得一提的圖書館嗎？請隨時在下面的評論中分享它們！

如果您發現這篇文章有幫助，請與您的開發人員同事分享，並在該網站上探索更多教學。

謝謝。祝你有美好的一天！

原文出處：https://dev.to/syakirurahman/top-15-animation-libraries-for-react-modern-javascript-apps-2i9m