أفضل 15 مكتبة رسوم متحركة لتطبيقات React وتطبيقات جافا سكريبت الحديثة

الدروس التعليمية

تفقد المشاركة الأصلية devaradise.com/javascript-react-animation-l.. للتنقل أفضل مع جدول محتويات.

يمكن للتحركات تحسين تطبيقات الشبكة العنكبوتية من جيد إلى عظيم من خلال جعلها أكثر تعاملاً وتفاعلاً. يوفرون تعليمات بصرية، وتوجيه المستخدمين خلال الواجهة، وتضيف لمشاريعكم لمس شخصية.

هناك العديد من مكتبات التحركات من المكتبات البسيطة القائمة على الCSS إلى المكتبات الجادة القائمة على الJavaScript التي تمكنك من خلق تحركات معقدة. في هذه المقالة، سنغوص في الـ 15 مكتبة أفضل للتحركات لرياكس وتطبيقات الشبكة العنكبوتية الحديثة.

من المعروف رياكس سبينج وفرامر موشين إلى المكتبات التي تخصص مثل فيفوس وثREE.js، ستجد هنا شيئًا لجعل مشاريعكم العنكبوتية متجاوزة. دعونا نبحث عن هذه المكتبات ورؤية كيف يمكن أن تحول تجارب مستخدميكم على الويب!

ar
Animate.css هو مكتبة CSS مشهورة تقدم مجموعة واسعة من الحركات المحددة مسبقاً، مما يجعل تطبيق الحركات على أي مشروع ويب سهلاً. مع أكثر من 80.2k نجمة على GitHub وملايين التنزيلات من 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.8k نجمة على 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;

إنشاء حركات معقدة مع التحكم الدقيق في التنقلات والتفاعلات.

مرنة جداً، تدعم الحركات المتقدمة، دعم جيد للمجتمع.

منحدر التعلم يمكن أن يكون قاسياً للمبتدئين.

التحرك الرسمي هي مكتبة قوية للتحركات التي تعرف بسهولتها الاستخدام والميزات الشاملة. لديها أكثر من 22.8k نجمة على GitHub وتمت الكثير من التقدير لخصائصها المبدأية.

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 منطقي، تدعم تحركات الأقطاب الرئيسية، ووثيقة جيدة.

تكلفة المجموعة أكبر قليلًا بالمقارنة مع المكتبات الأخرى.

Anime.js هي مكتبة قليلة الوزن للتحركات الجافاسكرية بواجهة البرمجيات القوية. لديها أكثر من 49.2k نجمة على GitHub وتستخدم واسعًا لخلق التحركات المعقدة والقابلة للتخصيص بشكل كبير.

npm install animejs

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

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

خلق تحركات معقدة وتفاصيل كاملة بالسيط الدقيق.

خفيفة الوزن، واسعة المناحي، قابلة للتخصيص بشكل كبير.

تحتاج إلى معرفة الجافاسكر، يمكن أن تكون معقدة للتحركات البسيطة.

قام غرافيس API بإنشاء متغير للتحكم في المرور والتنقل بين المحتويات والصفحات التي يمكن تنقيلها بسهولة وبسرعة عالية ، ويمكن أيضًا تحديد متغيرات أخرى مثل التحكم في الأحجام والأماكن والظواهر والمظاهر. ولديه أكثر من 19.2k نجمة على GitHub ويستخدم بشكل واسع في التطبيقات الويب والنقالة.

npm install gsap

import { gsap } from 'gsap';

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

تشغيل ذو أداء عالٍ وتسلسلات معقدة.

قوي للغاية، مرن، أداء عالٍ.

حجم القاعدة الأكبر، يتطلب وقت تعلم.

يعمل Popmotion مكتبة تحركات الجافاScript الوظيفية والمرنة. إنها تقوم بتحريكات 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، قدرات قوية على إنشاء المحتويات الفيديوية.

حالة تعلم صغيرة، قد يكون معقدا للمبتدئين.

فيفوس هي مكتبة جافا سكريبت خفيفة الوزن لتشكيل التنميزات التي تم إنشاؤها بواسطة الإنترنت. ومع أكثر من 15.1كم من النجوم على جيتابي، فهي خيار عظيم لإنشاء تنميزات ال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>;

إنشاء تحركات رسمية للSVGs.

خفيف الوزن ، تخص الSVGs ، سهل الاستخدام.

قيد التنميز على الSVGs فقط ، غير مناسب لأنماط أخرى من التحركات.

Lottie هي مكتبة لترسيم التحركات التي تم إنشاؤها بواسطة Adobe After Effects. ومع أكثر من 29.9كم من النجوم على جيتابي، يستخدم واسعًا للادغام في التحركات المعقدة.

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.2k نجمة على GitHub، فهي مناسبة جداً للتحركات المتعلقة بالتغير التصاعدي.

npm install scrollreveal

import ScrollReveal from 'scrollreveal';

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

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

إضافة تحركات كشف الأعمال على قدم التصاعد.

سهل الاستخدام، خفيف الوزن، جيد جداً للتحركات التصاعدية

محدود على التحركات التصاعدية فقط.

ScrollMagic هي مكتبة لإنشاء تفاعلات تصاعدية وتحركات. ومع أكثر من 14.8k نجمة على 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 هي متغيرة للجانب الخارجي للتطبيقات المتعددة التي تمكنك من تعديل من المظهر والتجربة للتطبيقات. ومع أكثر من 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 هي متاجر قوية للتحركات المتقدمة للجانب الخارجي للجانب الخارجي التي تمكنك من إنشاء تحركات ثلاثية الأبعاد معقدة وتوثيقات. ومع أكثر من 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);

إنشاء تحركات ثلاثية الأبعاد المتقدمة وتوثيقات.

قوي للغاية، مجموعة كبيرة، يدعم مشاهدات ثلاثية الأبعاد المعقدة.

منحنى تعلم منخفض، حجم مليء.

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