适

适用于 React 和现代 JavaScript 应用的 15 个最佳动画库

2025-05-27

适用于 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.2 万颗星，npm 下载量达数百万次，是快速制作简单动画的首选。

安装和基本使用




npm install animate.css
Enter fullscreen mode Exit fullscreen mode 



import 'animate.css';
Enter fullscreen mode Exit fullscreen mode 



<div class="animate_animated animate_bounce">An animated element</div>
Enter fullscreen mode Exit fullscreen mode




最佳用例

Animate.css 最适合需要快速实现而无需 JavaScript 的简单动画。

优点

易于使用、轻量、动画种类繁多。

缺点

仅限于 CSS 动画，对动画行为的控制较少。

2. React Spring

反应弹簧

React Spring 是一个流行的 React 动画库，它提供了一种基于弹簧物理机制创建动画的强大而灵活的方法。它在 GitHub 上拥有超过 27.8k 个 Star，在社区中被广泛使用。

安装和基本使用




npm install @react-spring/web
Enter fullscreen mode Exit fullscreen mode 



import React from 'react';

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



const App = () => {

    const springs = useSpring({

        from: { x: 0 },

        to: { x: 100 }

    });




<span class="k">return </span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">animated</span><span class="p">.</span><span class="nx">div</span>
        <span class="nx">style</span><span class="o">=</span><span class="p">{{</span>
            <span class="na">width</span><span class="p">:</span> <span class="mi">80</span><span class="p">,</span>
            <span class="na">height</span><span class="p">:</span> <span class="mi">80</span><span class="p">,</span>
            <span class="na">background</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#ff6d6d</span><span class="dl">'</span><span class="p">,</span>
            <span class="na">borderRadius</span><span class="p">:</span> <span class="mi">8</span>
        <span class="p">}}</span>
    <span class="sr">/</span><span class="err">&gt;






    
        Enter fullscreen mode
    


    
        Exit fullscreen mode
    









    );

};



export default App;
Enter fullscreen mode Exit fullscreen mode




最佳用例

通过对过渡和交互进行精细控制来创建复杂的动画。

优点

高度灵活，支持高级动画，良好的社区支持。

缺点

对于初学者来说，学习曲线可能比较陡峭。

3.帧运动

帧运动

Framer Motion 是一个功能强大的动画库，以其易用性和全面的功能而闻名。它在 GitHub 上拥有超过 22.8k 个 Star，并因其直观的 API 而广受好评。

安装和基本使用




npm install framer-motion
Enter fullscreen mode Exit fullscreen mode 



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;
Enter fullscreen mode Exit fullscreen mode




最佳用例

使用最少的代码创建流畅且视觉上吸引人的动画。

优点

直观的 API，支持关键帧动画，出色的文档。

缺点

与其他库相比，捆绑包大小略大。

4. Anime.js

Anime.js

Anime.js 是一个轻量级的 JavaScript 动画库，拥有强大的 API。它在 GitHub 上拥有超过 49.2k 个 star，被广泛用于创建复杂且高度可定制的动画。

安装和基本使用




npm install animejs
Enter fullscreen mode Exit fullscreen mode 



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



anime({

    targets: 'div',

    translateX: 250,

    rotate: '1turn',

    duration: 800

});
Enter fullscreen mode Exit fullscreen mode




最佳用例

通过精确的控制创建复杂而详细的动画。

优点

轻量、多功能、高度可定制。

缺点

需要 JavaScript 知识，对于简单的动画来说可能很复杂。

5. GSAP（GreenSock动画平台）

GSAP

GSAP 是一个功能强大的 JavaScript 动画库，以其高性能和丰富的功能集而闻名。它在 GitHub 上拥有超过 19.2k 个 Star，广泛应用于 Web 和移动应用程序。

安装和基本使用




npm install gsap
Enter fullscreen mode Exit fullscreen mode 



import { gsap } from 'gsap';



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




最佳用例

高性能动画和复杂序列。

优点

极其强大、坚固、高性能。

缺点

捆绑包尺寸较大，需要学习时间。

6. Popmotion

Popmotion.io

Popmotion 是一个功能强大、灵活的 JavaScript 动画库。它为 Framer Motion 中的动画提供支持。它在 GitHub 上拥有超过 19.9k 个 star，并提供了一系列用于创建动画和交互的工具。

安装和基本使用




npm install popmotion
Enter fullscreen mode Exit fullscreen mode 



import { animate } from 'popmotion';



animate({

    from: 0,

    to: 100,

    onUpdate: (latest) => {

        console.log(latest);

    }

});
Enter fullscreen mode Exit fullscreen mode




最佳用例

创建低级、复杂的交互和高度可定制的动画。

优点

功能性 API，灵活、可扩展且小巧。

缺点

对于简单的用例来说可能会很复杂。

7. Mo.js

Mo.js

Mo.js 是一款 Web 端的动态图形工具箱。它在 GitHub 上拥有超过 18.3 万颗星，并提供了多种动画创作工具。

安装和基本使用




npm install @mojs/core
Enter fullscreen mode Exit fullscreen mode 



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();
Enter fullscreen mode Exit fullscreen mode




最佳用例

创建复杂的运动图形和动画。

优点

功能多样、功能强大，非常适合动态图形。

缺点

学习曲线更陡峭，捆绑包尺寸更大。

特定用例的动画库

8. Remotion - 使用 React 生成动画视频

移除

Remotion 允许您使用 React 以编程方式创建视频。它是一个独特的库，在 GitHub 上拥有超过 19.6 万颗星，使开发人员能够利用 React 的强大功能进行视频内容创作。

安装和基本使用




# new project

npx create-video@latest



# install to existing project

npm i --save-exact remotion@4.0.181 @remotion/cli@4.0.181
Enter fullscreen mode Exit fullscreen mode 



export const MyComposition = () => {

    return null;

};
Enter fullscreen mode Exit fullscreen mode 



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}

      />

    </>

  );

};
Enter fullscreen mode Exit fullscreen mode 



import { registerRoot } from 'remotion';

import { RemotionRoot } from './Root';

registerRoot(RemotionRoot);
Enter fullscreen mode Exit fullscreen mode




最佳用例

使用 React 以编程方式生成视频。

优点

独特的功能，利用 React 技能，强大的视频创作能力。

缺点

小众用例，对于初学者来说可能很复杂。

9. Vivus - SVG 绘图动画

维武斯

Vivus 是一个用于制作 SVG 动画的轻量级 JavaScript 库。它在 GitHub 上拥有超过 15.1k 个 star，是创建 SVG 动画的绝佳选择。

安装和基本使用




npm install vivus
Enter fullscreen mode Exit fullscreen mode 



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>;
Enter fullscreen mode Exit fullscreen mode




最佳用例

为 SVG 创建绘图动画。

优点

轻量级，专门用于 SVG，易于使用。

缺点

仅限于 SVG，不适合其他类型的动画。

10. Lottie for Web - 渲染 After Effects 动画

洛蒂

Lottie 是一个用于渲染 Adob​​e After Effects 动画的库。它在 GitHub 上拥有超过 29.9k 个 star，被广泛用于集成复杂的动画。

安装和基本使用




npm install lottie-web
Enter fullscreen mode Exit fullscreen mode 



import lottie from 'lottie-web';

import animationData from './animation.json';



lottie.loadAnimation({

    container: document.getElementById('animation'),

    renderer: 'svg',

    loop: true,

    autoplay: true,

    animationData: animationData

});
Enter fullscreen mode Exit fullscreen mode




最佳用例

集成在 After Effects 中创建的动画。

优点

高质量动画，与 After Effects 完美集成。

缺点

需要 After Effects 来创建动画，文件较大。

11.滚动显示

滚动显示

ScrollReveal 是一个 JavaScript 库，可轻松实现元素进入或离开视口时的动画效果。它在 GitHub 上拥有超过 22.2 万颗星，非常适合用于实现基于滚动的动画。

安装和基本使用




npm install scrollreveal
Enter fullscreen mode Exit fullscreen mode 



import ScrollReveal from 'scrollreveal';



ScrollReveal().reveal('.box', { delay: 500 });
Enter fullscreen mode Exit fullscreen mode 



<h1 class="headline">Widget Inc.</h1>
Enter fullscreen mode Exit fullscreen mode




最佳用例

添加基于滚动的显示动画。

优点

易于使用，轻量级，非常适合滚动动画

缺点

仅限于基于滚动的动画。

12.滚动魔法

滚动魔法

ScrollMagic 是一个用于创建滚动交互和动画的库。它在 GitHub 上拥有超过 14.8k 个 star，提供了一种强大的滚动动画处理方法。

安装和基本使用




npm install scrollmagic
Enter fullscreen mode Exit fullscreen mode 



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
Enter fullscreen mode Exit fullscreen mode




最佳用例

创建复杂的滚动交互和动画。

优点

功能强大、灵活，与 GSAP 集成良好。

缺点

对于简单的动画来说可能很复杂，捆绑包尺寸较大。

13. Typed.js

Typed.js

Typed.js 是一个 JavaScript 库，可以输入文本，使其看起来像是人工输入的。它在 GitHub 上拥有超过 15.1k 个 Star，非常适合添加输入动画。

安装和基本使用




npm install typed.js
Enter fullscreen mode Exit fullscreen mode 



import Typed from 'typed.js';



const typed = new Typed('#element', {

    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],

    typeSpeed: 50

});
Enter fullscreen mode Exit fullscreen mode




最佳用例

为文本创建打字动画。

优点

易于使用、重量轻、打字效果极佳。

缺点

仅限于打字动画，灵活性较差。

高级动画库

14. Three.js - 高级 JavaScript 3D 库

Three.js

Three.js 是一个功能强大的 JavaScript 3D 库，可用于创建复杂的 3D 动画和可视化效果。它在 GitHub 上拥有超过 10.1 万颗星，广泛应用于 3D Web 应用程序。

安装和基本使用




npm install three
Enter fullscreen mode Exit fullscreen mode 



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);
Enter fullscreen mode Exit fullscreen mode




最佳用例

创建高级 3D 动画和可视化。

优点

极其强大，社区庞大，支持复杂的3D场景。

缺点

学习曲线陡峭，捆绑包尺寸较大。

15. Theatre.js

Theatre.js

Theatre.js 是一个高级动画库，用于以编程方式创建和控制动画。它在 GitHub 上拥有超过 1.1 万颗星，提供了一种基于时间轴的动画方法。

安装和基本使用




# r3f and its dependencies

npm install --save react three @react-three/fiber



# Theatre.js

npm install --save @theatre/core@0.5 @theatre/studio@0.5 @theatre/r3f@0.5



# Three.js types (when using Typescript)

npm install --save-dev @types/three
Enter fullscreen mode Exit fullscreen mode 



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 />)
Enter fullscreen mode Exit fullscreen mode




最佳用例

创建具有精细控制的基于时间轴的动画。

优点

强大的时间线控制，精确的动画序列。

缺点

较新的图书馆，较小的社区，适合初学者的综合设施。

结论

选择合适的动画库取决于项目的需求和复杂程度。如果您需要简单快捷的动画，像 Animate.css 这样基于 CSS 的库是理想之选。对于更复杂的交互和高性能需求，可以考虑像 GSAP 或 Three.js 这样功能强大的库。

每个库都有其优势，因此请根据易用性、社区支持以及您所需的特定功能等因素进行评估。在将这些顶级动画库应用到您的项目中之前，您可以先进行尝试。

你还有其他值得一提的库吗？欢迎在下面的评论区分享！
如果你觉得这篇文章对你有帮助，请分享给你的开发者同伴，并探索本网站上的更多教程。

谢谢。祝您愉快！

文章来源：https://dev.to/syakirurahman/top-15-animation-libraries-for-react-modern-javascript-apps-2i9m
Devto 翻译
PREV
我厌倦了
NEXT
💸 如何通过编程赚钱：初学者实用指南