小編精選 - 技術文章翻譯  ·  07月24日

適用於 React 和現代 Javascript 應用程式的 15 個動畫庫

適用於 React 和現代 Javascript 應用程式的 15 個動畫庫

查看原始文章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動畫

動畫.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

動漫.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.io

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

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

類型化.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 函式庫

三.js

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

Theater.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

0個讚   0留言 66瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 適用於 React 和現代 Javascript 應用程式的 15 個動畫庫
🔥 24 款值得在 2023 年認識一下的 open source 專案
🔥 關於css的新手問題(已解決)
🔥 永遠別擔心「要是爆紅怎麼辦」
🔥 上線之後，絕對跟一開始想的不一樣
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 第一 AWS for 語言 分享 開源 api 工作 js 網站 AI JavaScript 專案 hooks API COM app 學習 分析 主題 codeigniter 結構 HTML 入門 this Ai JS 測試 查詢 網頁 研究 使用 Vue id onClick Toptal 非同步訓練 imgur 邁向資深 HTML' github codesandbox onclick 技術 聊天 react PYTHON 資料庫 練習 Python GIT Github 搜尋 熱情 lock git 站長阿川 VUE codecademy 開發 line python' gml html jav 部落格 strapi create' php' Line Node Promise 畢業 作為 Html Javas ul python 電子書 謝謝 日曆 編輯 後端 javascript 面試 Gpt 媒體 ci tailwind 職缺 Ml IOC csp 系列九 遊戲 pchun Fetch API 筆電 深度學習 vue
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。