مكتبات الرسوم المتحركة في JavaScript: 10 خيارات شائعة

أحب تجربة تأثيرات الرسوم المتحركة المختلفة ، خاصة تلك البسيطة والتي يمكن تنفيذها باستخدام CSS. ولكن ، إذا نظرنا إلى الصورة الأوسع - فإن رسوم CSS المتحركة ستأخذك إلى هذا الحد. وإذا كنت ترغب في إنشاء تجارب مستخدم معقدة وتفاعلية - عاجلاً أم آجلاً ، فسيتعين عليك التبديل إلى JavaScript.

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

أنواع مكتبات الرسوم المتحركة في JavaScript

لذلك ، نظرًا لأن مكتبات الرسوم المتحركة لـ JS تأتي في العديد من الأشكال والأشكال ، فإنها تساعد حقًا في تضييق نطاق التركيز المحدد . لا يتم استخدام الكثير من المحركات والأطر فقط للأشياء الأمامية ، ولكن أيضًا لبناء الألعاب وإنشاء محتوى تفاعلي آخر.

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

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

تحتوي كل مكتبة على روابط إلى موقع الويب الخاص بها وصفحة GitHub. لقد أضفت أيضًا مثالًا على CodePen يمكنك تشغيله من هذه الصفحة وموارد إضافية - وهي إما برامج تعليمية أو أدلة فيديو.

# 1 - Three.js

Three.js هي مكتبة الانتقال لإنشاء تأثيرات متحركة ثلاثية الأبعاد تستخدمها في تطوير مواقع الويب الإبداعية. تلغي Three.js حاجة المطورين إلى التعرف على WebGL ، ويمكنها بدلاً من ذلك التركيز على إنشاء تأثيرات تفاعلية ثلاثية الأبعاد بدون تعقيد.

على المستوى العالي ، يتم استخدام Three.js لإنشاء تجارب افتراضية تفاعلية ، مثل Mozilla Hubs. بالإضافة إلى ذلك ، غالبًا ما تُستخدم المكتبة أيضًا في إنشاء تجارب غامرة للصفحة المقصودة. استخدم الناشرون والافتتاحيات ذات المستوى العالمي Three.js لسنوات لبناء صفحات قائمة على البيانات مع تحديثات ديناميكية.

إذا قمت بزيارة الصفحة الرئيسية ، فهناك عدد كبير من المشاريع المميزة المدرجة ، والتي يجب أن تمنحك الكثير من الإلهام / الوضوح فيما يتعلق بكيفية استخدام هذه المكتبة في البيئات اليومية.

Three.js مثال للرسوم المتحركة

انظر خلفية موجات خط القلم الشبكي - THREE.js بواسطة CP Designer (cpandya) على CodePen.

Three.js موارد إضافية

• كيف بنينا كرة جيثب
• تأثير تشويه البكسل مع Three.js

# 2 - Anime.js

من المحتمل أن تكون Anime.js من Julian Garnier هي المكتبة الثانية الأكثر شهرة لدمج الرسوم المتحركة في المشاريع القائمة على الويب. تنبع شعبيتها من وجود أدوات مدمجة للمساعدة في تسريع عملية تحريك عناصر CSS و SVG و DOM.

على سبيل المثال ، يمكنك استهداف محددات CSS معينة ثم تطبيق منطق الرسوم المتحركة المحسن من خلال JavaScript ، بدلاً من كتابة @keyframes بنفسك.

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

فقط باستخدام المقتطف أعلاه وحده ، يمكنك إحداث تأثير يشبه هذا:

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

Anime.js مثال للرسوم المتحركة

شاهد الرسوم المتحركة لشعار Pen anime.js بواسطة Julian Garnier (juliangarnier) على CodePen.

Anime.js موارد إضافية

• دروس Anime.js - محرك الرسوم المتحركة JavaScript في 10 دقائق
• الرسوم المتحركة لواجهة المستخدم مع Anime.js

# 3 - Popmotion

Popmotion هي مكتبة رسوم متحركة منخفضة المستوى مكتوبة بلغة TypeScript. إنها أيضًا المكتبة التي تشغل مكتبة Framer Motion الشهيرة (لدينا مدرجة في هذه المقالة) المستخدمة في مشاريع React. نظرًا لعدم إبداء الرأي ، يمكنك استخدام Popmotion لدمج التأثيرات المخصصة عن طريق كتابة وظائف إضافية ترغب في استخدامها.

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

Popmotion مثال للرسوم المتحركة

شاهد العرض التوضيحي لـ Pen Popmotion بواسطة Arden (aderaaij) على CodePen.

موارد Popmotion الإضافية

• تصور خوارزمية الفطائر باستخدام React و Popmotion.io
• أضف الرسوم المتحركة الربيعية إلى تطبيقك الزاوي باستخدام popmotion

# 4 - mo.js

يركز Mo.js على الرسوم المتحركة ويتفوق في توفير بنية تعليمات برمجية بسيطة يمكنك تنفيذها في مشاريع قائمة بذاتها ، ولكن أيضًا مع أطر عمل مثل React.

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

هنا مقتطف عينة:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

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

mo.js مثال للرسوم المتحركة

شاهد تأثيرات تحوم رابط القلم مع / mo.js بواسطة مايك كوين (mprquinn) على CodePen.

mo.js موارد إضافية

• كيفية استخدام MoJS مع React
• التعامل مع MoJS

# 5 - p5.js

p5.js هو تطبيق JavaScript للمعالجة - "لغة" منفصلة مخصصة للاستخدام من قبل الفنانين المرئيين. على عكس بعض الأمثلة التي رأيناها حتى الآن ، فإن p5.js هي مكتبة رسوم متحركة عالمية ، تقدم حلولاً ليس فقط للتطبيقات العملية ولكن أيضًا لمشاريع أكثر قوة وتعقيدًا. يتضمن ذلك دعمًا كاملًا للتأثيرات ثنائية وثنائية الأبعاد.

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

عليك فعل كل الرسومات بنفسك ، ولكن مع عدد الموارد المتاحة لـ p5.js - أعتقد أنك ستجد أنه ليس من الصعب البدء. وغني عن القول ، أن المجتمع الذي يقف وراء كلا المشروعين منخرط للغاية.

p5.js مثال للرسوم المتحركة

شاهد القلم P5.JS Twist and Turn. بواسطة Sdsmnc (supastrocat) على CodePen.

موارد إضافية p5.js

• المعالجة و p5.js
• غروب الشمس ونجوم الرماية في p5.js

# 6 - الحركة

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

مثال مقتطف:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

يتم تعريف الرسوم المتحركة في Framer من خلال خصائص motion animate . يتيح لك هذا تحديد المكونات بالكامل وعناصرها الداخلية ، والتي يمكنك بعد ذلك إثرائها بمنطق الرسوم المتحركة المخصص. تعد مقالة Smashing من Nefe Emadamerho-Atori في قسم الموارد نقطة انطلاق رائعة لمعرفة كيفية عمل Framer Motion.

الرسوم المتحركة مثال على الحركة

انظر زر Pen Laser Sight من codebro (codebro) على CodePen.

موارد الحركة الإضافية

• إدخال حركة المبروز
• الرسوم المتحركة المستجيبة مع Framer Motion

# 7 - GSAP

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

لا يقتصر الأمر على تحسين أداء المكتبة فحسب ، بل إنها متوافقة أيضًا بشكل كبير مع التقنيات المفضلة لديك. يتضمن ذلك أطر عمل مثل React & Vue ، وكذلك مكتبات مثل jQuery ، مع دعم إضافي للجوال ومتصفحات الويب القديمة.

نظرًا لأن GSAP قادر على الاستعلام عن أي نوع من عناصر الويب وتحريكه عمليًا (من CSS إلى Canvas إلى كائنات DOM) - يمكنك استخدامه لشيء بسيط مثل التأثير الدوار ، أو الخروج بالكامل وإنشاء تجارب موقع ويب ديناميكية حقًا.

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

مثال للرسوم المتحركة GSAP

شاهد مقدمة Pen Hulu Originals من Hyperplexed (Hyperplexed) على CodePen.

موارد GSAP الإضافية

• تقنيات الرسوم المتحركة المذهلة مع GSAP
• إنشاء تسلسل رسوم متحركة لموقع الويب - برنامج تعليمي GSAP 3

# 8 - Paper.js

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

يمكن تصنيف الكائنات من خلال الطبقات ، مع كل طبقة لها مواصفات رسوم متحركة مخصصة. يكون هذا مفيدًا عند العمل على هياكل معقدة ، مما يتيح لك إزالة / تعطيل طبقات معينة ما لم يطلب المستخدم ذلك.

مثال على Paper.js للرسوم المتحركة

شاهد نظارات تعبئة القلم - Paper.js بقلم فيورالد إسماعيلي (Fiorald) على CodePen.

موارد Paper.js الإضافية

• Paper.js Vector Erase
• موجات في Paper.js

# 9 - رسوم الويب المتحركة

هذه المكتبة عبارة عن منفذ JavaScript مباشر لواجهة برمجة تطبيقات Web Animation. تتكامل المكتبة مباشرة مع Element.animate() ، مما يتيح لك استخدام ميزات الرسوم المتحركة المكتوبة عادةً باستخدام منطق CSS. وشرحها المؤلفون بقولهم:

"تنفيذ JavaScript لواجهة برمجة تطبيقات Web Animations التي توفر ميزات Web Animation في المتصفحات التي لا تدعمها محليًا. يعود polyfill إلى التنفيذ المحلي عندما يكون متاحًا ".

الرسوم المتحركة على شبكة الإنترنت مثال الرسوم المتحركة

شاهد الرسوم المتحركة الحتمية للقلم بواسطة Sam Thorogood (samthor) على CodePen.

موارد إضافية للرسوم المتحركة على الويب

• واجهة برمجة تطبيقات الويب المتحركة - واجهات برمجة تطبيقات الويب | MDN
• رسوم الويب المتحركة المستوى 2 | W3C

# 10 - بروتون

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

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

مثال بروتون للرسوم المتحركة

شاهد القلم الخاص بي باعث بواسطة matsu7089 (@ matsu7089) على CodePen.

موارد إضافية بروتون

• أمثلة على محرك البروتون
• مكون رد الفعل لخلفيات الجسيمات

ملخص

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

قبل كل شيء ، من المفيد معرفة نوع الهدف الذي تحاول تحقيقه ، خاصة إذا كنت ستعمل على رسوم متحركة تنفذ بيانات في الوقت الفعلي أو مدخلات تعتمد على المستخدم.

بعبارة أخرى ، لا يوجد شيء اسمه الأفضل . كل مكتبة لها نقاط قوتها وضعفها. بالنسبة لي ، ربما أختار GSAP لأنه مُحسَّن جيدًا للاستخدام في أي مشروع أمامي تقريبًا يمكن تخيله.

لكن إذا كنت أقوم بمشروع أقل طموحًا ، فستجد مكتبة مثل Popmotion كثيرة.