15 ספריות אנימציה מובילות עבור אפליקציות React ו-Javascript מודרניות

מדריכים

סרט המקורי devaradise.com/javascript-react-animation-l.. עבור ניווט טוב יותר עם תוכן תבררון.

אנימציות יכולות להעלות את היישומים שלכם מטובים למעולים על ידי הפיכתם ליותר מעניינים ואינטראקטיביים. הן מספקות משוב ויזואלי, מדריכות את המשתמשים דרך הממשק ומוסיפות מרגל אישי לפרוייקטים שלכם.

יש המון ספרי אנימציות מספרים פשוטים, בעלי קישורי CSS, עד לספרים חזקים בעלי עוצמה של JavaScript שמסוגלים ליצור אנימציות מורכבות. במאמר הזה, אנחנו נשחת לאחר 15 ספרי אנימציות העיקריים עבור React ויישומים רשתיים מודרניים.

מספרים ידועים כמו React Spring ו Framer Motion עד לספרים מיומנים כמו Vivus ו Three.js, תמצאו פה משהו שיהיה בעל הכוח להדהים את הפרוייקטים שלכם. בואו נחקור את הספרים האלה ונראה איך הם יכולים לשנות את החוויה של המשתמש באתר שלכם!

Animate.css היא ספרייה CSS פופולרית שמספקת סט רחב של אנימציות מוגדרות מראש, שמקל ליישם אנימציות בפרוייקטים אינטרנטיים. עם יותר מ 80,200 כוכבים על GitHub ומיליוני 下载s מ npm, Animate.css היא בחירה קלה לאנימציות מהירות ופשוטות.

npm install animate.css

import 'animate.css';

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

Animate.css מועדה בעלה לאנימציות פשוטות שצריך להיות מיועדות במהירות ללא צורך בJavaScript.

קל להשתמש, חלק קל, מגוון רחב של אנימציות.

מגבלת לאנימציות CSS, פחות שליטה על התנהגות האנימציה.

React Spring היא ספרייה לאנימציות פופולרית עבור React, שמספקת דרך חזקה וגמישה ליצירת אנימציות על פי פיזיקת מפעילים. יש להיות לה יותר מ 27,800 כוכבים על GitHub והיא נעשית בר-שימוש בקהילה.

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;

יצירת אנימציות מורכבות עם שליטה מפורטת על העברים והאינטראקציות.

גמיש מאוד, תומך באנימציות מתקדמות, תמיכה טובה בקהילה.

עליה במידע יכולה להיות גבוהה עבור מתחים.

Framer Motion היא ספרייה חזקה לאנימציות שידועה על ידי קלות השימוש והתכונות המקיפות שלה. יש לה 22,800 כוכבים על GitHub והיא מאוד מפורסמת על ידי ה API האינטuitiv שלה.

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 אינטuitiv, תומך באנימציות מפרמטים, מדעניקה טובה.

סגול יותר בגודל מאשר ספריות אחרות.

Anime.js היא ספרייה קלה לאנימציות בJavaScript עם API חזק. יש לה 49,200 כוכבים על GitHub והיא נעשית נרחבת ביצירת אנימציות מורכבות ושימושיות ביעד.

npm install animejs

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

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

יצירת אנימציות מורכבות ופרטניות בשליטה מדויקת.

קלה, גדולה ביצירה, שימושית ביעד.

דרשת ידע בJavaScript, יכולה להיות מורכבת עבור אנימציות פשוטות.

גסאפ (GSAP) היא ספריית אנימציות ג 'אסקript חזקה שידועה עבור ביצועים גבוהים וערך שלם של תכונות. יש לה מעל 19.2k כוכבים על GitHub והיא מושמת רחבה בין יישומים רשתיים לסלולריים.

npm install gsap

import { gsap } from 'gsap';

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

אנימציות ביצועים גבוהים ורצפים מורכבים.

חזק ביותר, עמיד, ביצועים גבוהים.

גודל באגרון גדול, דורשת זמן לימוד.

Popmotion היא ספריית אנימציות ג 'אסקript פונקציונלית וגמישה. היא מעצבת את האנימציות בFramer Motion. יש לה מעל 19.9k כוכבים על GitHub ומציעה סדרה של כלים ליצירת אנימציות ואינטראקציות.

npm install popmotion

import { animate } from 'popmotion';

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

יצירת אינטראקציות נמוכות מורכבות ואנימציות מותאמות בדיוק.

API פונקציונלי, גמיש, מסוגל להתרחב וערך קטן.

יכולה להיות מורכבת במקרים פשוטים.

Mo.js הוא חגיג גרפיקים בעל פעולות עבור הרשת. יש לו מעל 18.3k כוכבים על GitHub והוא מציע מערך רחב של כלים ליצירת אנימציות.

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();

יצירת גרפיקים ואנימציות מורכבות.

גיוון, חזק, מועיל בשל גרפיקים בעלי תנועה.

עקומה למידה יותר קשה, גודל עניין גדול יותר.

Remotion מאפשר לך ליצור וידאו באופן מתמחה בעזרת React. זהו ספרת ייחודית עם מעל 19.6k כוכבים על GitHub, שמאפשרת למפתחים לנצל את הכוח של 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, יכולות חזקות ביצירת וידאו.

שימוש נייץ, יכול להיות מורכב בשביל מתחילים.

ויווס היא ספרייה קלה לג 'יבסק립ט עבור אנימציות סימנים סימנים (SVGs). עם מעל 15,100 כוכבים על GitHub, זהו בחירה טובה ליצירת אנימציות סימנים.

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>;

יצירת אנימציות ציור עבור סימנים.

קל, מיומנת לסימנים, קל לשימוש.

מוגבלת לסימנים, לא מתאימה לסוגים אחרים של אנימציות.

Lottie היא ספרייה להדמיית אנימציות שנוצרות ב Adobe After Effects. עם מעל 29,900 כוכבים על GitHub, היא מושממת רחבה לשילוב אנימציות מורכבות.

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 עבור יצירת האנימציות, קבצים גדולים יותר.

סקרולריבל (ScrollReveal) הוא ספרייה ב-JavaScript בשביל הנפשה קלה של אלמנטים בזמן שהם נכנסים או יוצאים מתוך המרחב הנראה. עם 22,200 כוכבים בגיתאבּוץבּ (GitHub), הוא מושלם לאנימציות על-גבי הסקול.

npm install scrollreveal

import ScrollReveal from 'scrollreveal';

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

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

הוספת אנימציות גלובליות על-גבי הסקול.

קל לשימוש, קל משקל, מעולה לאנימציות על-גבי הסקול

מגבלת לאנימציות על-גבי הסקול.

סקרולמיק הוא ספרייה ליצירת אינטראקציות ואנימציות על-גבי הסקול. עם 14,800 כוכבים בגיתאבּוץבּ (GitHub), היא מענינת בדרך לטפל באנימציות על-גבי הסקול.

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

יכולה להיות מורכבת עבור אנימציות פשוטות, גודל ענק של החבילה.

Typed.js היא ספרייה בJavaScript שמטיית טקסט, שגורמה לו להראות כאילו הוא מוטיף בידי אדם. עם מעל 15.1k כוכבים על GitHub, היא מועילה מעולה להוספת אנימציות טיפוי טקסט.

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
});

יצירת אנימציות טיפוי טקסט לטקסט.

קל בשימוש, קל משקל, מעולה לאפקטים טיפוי.

מגבלת לאנימציות טיפוי, פחות גמישות.

Three.js היא ספרייה בעלת עוצמה של שלושה מימדים עבור JavaScript, שמאפשרת לך ליצור אנימציות ויזואלים מורכבים. עם מעל 101k כוכבים על GitHub, היא מורכבת במידה רבה ביותר עבור יישומים ויזואליים ברשת.

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 מורכבות.

עלילה למידה גבוהה, גודל מאגר גדול.

תיאטרון.js היא ספריית אנימציה מתקדמת ליצירת ולשליטה באנימציות באופן תכנותי. עם מעל 11 אלף כוכבים ב-GitHub, היא מספקת גישה מבוססת ציר זמן עבור אנימציות.

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

כל ספרייה מחזקת שלה, לכן כדאי להעריך אותן בהתבסס על גורמים כמו קלות השימוש, תמיכת קהילה והתכונות הספציפיות שאתה זקוק אליהן. ניתן להתחיל לנסות עם ספריות האנימציה המובילות הללו לפני שמחילה אותן בפרויקט שלך.

יש לך ספריות אחרות ששווה לציין? אל תהסס לשתף אותן בתגובה למטה!. אם מצאת את הפוסט הזה מועיל, שתף אותו עם המפתחים החברים שלך וחקור עוד מדריכים באתר זה.

תודה. יום נפלא!

Source:
https://devaradise.hashnode.dev/top-15-animation-libraries-for-react-modern-javascript-apps-clyppjb22000b09l26nxe85v7