ورقة غش مكتبات الرسوم المتحركة للويب

مكتبات الرسوم المتحركة لـ JavaScript

GSAP

مكتبة رسوم متحركة عالية الأداء رائدة في الصناعة، تدعم خصائص CSS و SVG و Canvas وما إلى ذلك، ويمكن دمجها بسلاسة مع أطر عمل مثل React و Vue.

• الميزات: أداء عالي، سهلة الاستخدام، قوية، تدعم الجداول الزمنية

• التثبيت: npm install gsap

• الاستخدام:

  import { gsap } from "gsap";
  
  gsap.to(".box", { duration: 2, x: 100 });

Anime.js

مكتبة رسوم متحركة خفيفة الوزن لـ JavaScript، تدعم خصائص CSS و SVG وخصائص DOM ورسوم كائنات JavaScript المتحركة.

• الميزات: بسيطة وسهلة الاستخدام، خفيفة الوزن، تدعم أنواع رسوم متحركة متعددة

• التثبيت: npm install animejs

• الاستخدام:

  import anime from 'animejs/lib/anime.es.js';
  
  anime({
    targets: '.box',
    translateX: 250,
    duration: 2000
  });

Velocity.js

تجمع بين سهولة استخدام jQuery والأداء العالي لـ CSS، وتدعم قوائم انتظار الرسوم المتحركة وعناصر السياق.

• الميزات: قوائم انتظار الرسوم المتحركة، عناصر السياق، سهلة الاستخدام

• التثبيت: npm install velocity-animate

• الاستخدام:

  import velocity from 'velocity-animate';
  
  velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

مكتبات الرسوم المتحركة لـ CSS

Animate.css

مكتبة رسوم متحركة لـ CSS غنية بالتأثيرات، ما عليك سوى إضافة أسماء الفئات لتحقيق تأثيرات الرسوم المتحركة.

• الميزات: تأثيرات رسوم متحركة غنية، سهلة الاستخدام، توافق جيد

• التثبيت: npm install animate.css --save

• الاستخدام:

  <link rel="stylesheet" href="animate.css">
  <div class="animated bounce">Hello World!</div>

Hover.css

مكتبة تأثيرات تمرير الماوس للأزرار تم تنفيذها باستخدام CSS3 فقط، وتتضمن مجموعة متنوعة من تأثيرات التمرير.

• الميزات: تأثيرات غنية، تم تنفيذها باستخدام CSS3 فقط، سهلة الاستخدام

• التثبيت: npm install hover.css

• الاستخدام:

  <link rel="stylesheet" href="hover.css">
  <a class="hvr-grow">Grow</a>

CSShake

مجموعة من فئات الرسوم المتحركة لـ CSS3، تُستخدم لإنشاء تأثيرات الاهتزاز والاهتزاز وما إلى ذلك.

• الميزات: تأثيرات رسوم متحركة فريدة، تم تنفيذها باستخدام CSS3 فقط، سهلة الاستخدام

• التثبيت: npm install csshake

• الاستخدام:

  <link rel="stylesheet" href="csshake.css">
  <div class="shake-little">Shake it!</div>