13 مكتبة للرسوم المتحركة لجافا سكريبت للمصممين
الرسوم المتحركة هي السلاح السري لمصمم الويب الجيد. الرسوم المتحركة تعني إضفاء الحيوية على المحتوى، وبعض اللمسات المتحركة الصغيرة يمكن أن تضفي الحيوية على المحتوى الأكثر مللًا.
لا يعني إنشاء موقع أو صفحة تحتوي على رسوم متحركة بالضرورة بناء كل شيء في تطبيق أو إطار عمل كبير ومعقد للرسوم المتحركة. حتى شيء بسيط مثل تحريك تأثير تمرير الرابط باستخدام CSS يضيف القليل من التألق البصري.
يمكن الجمع بين انتقالات وتحولات CSS لإنشاء تأثيرات رائعة، بما في ذلك مسح الشاشة بأسلوب Star Wars. ولكن قد تحتاج إلى التفكير في استخدام JavaScript لمزيد من المرونة والتحكم.
بالنسبة للمصمم، وخاصة الشخص الذي لا يقوم بالكثير من البرمجة، قد تبدو هذه الفكرة مزعجة بعض الشيء. ولكن من المفيد أن يوجد عدد من مكتبات JavaScript مصممة خصيصًا لإنشاء تأثيرات متحركة. سوف تحتاج إلى الدخول في التعليمات البرمجية قليلاً، ولكن الهدف من هذه المكتبات هو أن شخصًا ما قد قام بالفعل بمعظم العمل الثقيل نيابةً عنك. إذا كان بإمكانك اتباع التعليمات البسيطة، فيمكنك استخدام مكتبات JavaScript لتحسين تصميماتك.
قبل أن تبدأ بالبحث عن مكتبة، من المفيد أن تكون واضحًا بشأن ما تبحث عنه. فكر في تأثيرات الرسوم المتحركة التي تريدها، ثم قم بتقسيمها إلى الأجزاء المكونة لها. تنقسم جميع الرسوم المتحركة البسيطة إلى التلاشي، أو الانزلاق، أو القياس، أو التدوير، ويتم التحكم فيها بواسطة أجهزة ضبط الوقت التي تتعامل مع التأخير، والتخفيف، وترتيب التشغيل، والمشغلات (الأحداث) - مثل التمرير، أو النقر، أو تحميل الصفحة - التي تبدأ الرسوم المتحركة وتوقفها جري. كلما قمت بدمج هذه الوظائف أكثر، أصبحت الرسوم المتحركة أكثر تعقيدًا.
لقد انتهينا من ذلك الآن، فلنلقِ نظرة على بعض المكتبات، بدءًا من أبسطها والانتقال إلى العروض الأكثر تحديًا (ولكن لا يزال من الممكن التحكم فيها).
AniJS
إذا كنت جديدًا في مجال الرسوم المتحركة أو JavaScript، فإن AniJS يعد مكانًا رائعًا للبدء. إنها مكتبة تفاعلية لواجهة المستخدم تتيح لك استخدام JavaScript للتحكم في الرسوم المتحركة CSS دون كتابة أي JavaScript. إنه يحول JavaScript إلى لغة "عادية" - إذا: حدث، افعل: إجراء، إلى: عنصر. نظرًا لأن هذا يحاكي أيضًا بناء جملة JavaScript الأساسي، فيمكن أن يساعد غير المبرمجين على الشعور بالراحة مع JS. بالإضافة إلى ذلك، يمكنك الحصول على المزيد من التقدم به إذا كنت ترغب في ذلك.
هناك الكثير من العروض التوضيحية والأمثلة، وتحتوي على صفحة موارد - AniCollection - والتي تحتوي على الكثير من الرسوم المتحركة الجاهزة التي يمكنك تنزيلها واستخدامها.
إذا كنت ترغب في الاستفادة من JavaScript ولكنك لا تشعر بأنك مستعد للتعمق في الموارد أدناه، فإن AniJS هو الحل المناسب لك.
المكتبات الدقيقة Micro Libraries
هناك طريقة أخرى للبدء في الرسوم المتحركة وهي تجربة مكتبة تركز على شيء واحد. تتمتع هذه المكتبات الصغيرة بميزة كونها صغيرة، ولأنها محدودة في وظائفها، فعادةً ما يكون من السهل تنفيذها. فيما يلي بعض الاقتراحات التي يمكنك تجربتها:
ScrollReveal
يقوم ScrollReveal بتنفيذ ما هو مذكور على العلبة إلى حد كبير - حيث يتم تحريك العناصر عند ظهورها أو عند خروجها من إطار العرض. هذا تأثير شائع يمكن أن يُسعد المستخدم بينما يكون دقيقًا.
أحد العوائق المحتملة هو أنه يجب عليك تحميله في رأس المستند لتجنب "وميض" المحتوى. وقد تمت معالجة هذا الأمر في وثائقه.
AOS
يرمز AOS إلى الرسوم المتحركة عند التمرير، وهو مخصص - نعم، لقد خمنت ذلك - لتحريك العناصر المستهدفة أثناء تمرير المستخدم. يمكن أن يكون لهذا التأثير الشائع وظيفة عملية ويضيف اهتمامًا بصريًا.
Granim.js
يتيح لك Granim.js تحريك التدرجات اللونية. يمكنك التحكم في الألوان والاتجاه وأوضاع المزج واستخدامها مع أقنعة الصور. في البداية، يبدو هذا مجرد ديكور، ولكن يمكنك تطبيقه على تفاعلات المستخدم مثل أحداث الماوس.
TypeIt
يقوم TypeIt بإنشاء رسوم متحركة بتأثير الآلة الكاتبة. وهذا هو التأثير الذي نراه كثيرًا على مواقع المحفظة. فهو يساعد على إشراك المستخدم ويمكنه المساعدة في التسلسل الهرمي للمحتوى من خلال لفت الانتباه إلى النص المتحرك.
Vivus
يقوم Vivus بتحريك صور SVG، مما يجعلها تبدو وكأنها مرسومة. قد يكون التعامل مع هذا الأمر أكثر تعقيدًا بعض الشيء، لكن النتائج ممتازة جدًا.
Rough Notation
يضيف Rough Notation تعليقات توضيحية وزخارف نصية متحركة. يمكنك إضافة أقواس مرسومة باليد، وشطب، وتسطير، وإبرازات، وتأثيرات متقاطعة، ودوائر. يمكنك أيضًا الجمع بين تأثيرات مختلفة.
barba.js
يقوم barba.js بتحريك الانتقالات بين الصفحات، مما يعطي انطباعًا بوجود تطبيق من صفحة واحدة. كن حذرًا، تفترض وثائقها الإلمام بصيغة JS وتنصحك بالتأكد من أنك مرتاح لها قبل محاولة استخدامها.
TweenJS
TweenJS هي مكتبة توينينغ تدعم كلاً من خصائص الكائنات الرقمية وخصائص نمط CSS. يمكن ربط الأوامر معًا لإنشاء فتيات مراهقات معقدات.
يجب أن تكون لها مساحة اسمية حتى لا تتعارض مع بعضها البعض. إذا كنت تريد استخدام مكتبتين أو أكثر على نفس صفحة الويب، فيجب عليك ربط كل JavaScript - أي وضع أكبر قدر ممكن من التعليمات البرمجية في نفس الملف بحيث يكون طلب خادم واحد فقط.
مكتبات أكبر Bigger Libraries
إذا وجدت أنك بحاجة إلى استخدام ما يزيد عن 4 أو 5 مكتبات صغيرة في وقت واحد، فقد يكون الوقت قد حان للنظر إلى مكتبة أكثر شمولاً قليلاً، أو حتى إطار عمل كامل، يمكنه التعامل مع كل ما تريد القيام به بنفسه.
كن مستعدًا لأن تصبح الأمور أكثر تعقيدًا بعض الشيء الآن، لكن مكتبات الرسوم المتحركة هذه تميل إلى الحصول على وثائق جيدة ودعم مجتمعي.
GSAP
تعد GSAP، والمعروفة أيضًا باسم GreenSock، إحدى مكتبات JavaScript الأكثر شيوعًا للرسوم المتحركة. يمكنه تحريك أي شيء تقريبًا يمكن لـ JavaScript الوصول إليه، بما في ذلك خصائص ومتغيرات CSS، وخصائص الكائن المخصصة، وSVG، والسلاسل المعقدة، ومكونات React.
إنه معياري، يستخدم المكونات الإضافية لإضافة وظائف اختيارية إلى النواة. وهذا يعني أنك تضيف فقط ما تحتاجه بالفعل، دون أن ينتهي بك الأمر بأي تعليمات برمجية غريبة. إنه سريع جدًا، وقوي، وخفيف الوزن، نظرًا لقوته.
قد يبدو الأمر مخيفًا بعض الشيء لأي شخص ليس على دراية بجافا سكريبت، لكن الوثائق واضحة ومباشرة وشاملة، والدعم جيد.
Anime.js
مكتبة رسوم متحركة أخرى مشهورة جدًا هي Anime.js. يمكنه استهداف خصائص CSS، وSVG، وسمات DOM، وكائنات JavaScript. يحتوي على نظام مذهل مدمج لتسهيل تداخل الرسوم المتحركة وعناصر التحكم الرائعة في التوقيت.
مرة أخرى، قد يبدو الأمر معقدًا إلى حد ما، لكن التوثيق تم بشكل جيد للغاية، مع وجود عروض توضيحية واضحة بجوار كل عنصر تمت تغطيته.
Popmotion
تمت كتابة Popmotion بلغة Typescript ولكنها قابلة للنقل إلى أي بيئة JavaScript. إنه قوي، مع دعم الإطار الرئيسي والرسوم المتحركة الربيعية للأرقام والألوان والسلاسل المعقدة. وفي الوقت نفسه، فهو صغير الحجم، وجميع وظائفه قابلة للاستيراد بشكل فردي، لذلك لا يوجد رمز غير ضروري.
mo.js
يحتوي Mo.js على واجهة برمجة تطبيقات تعريفية لتسهيل إنشاء رسومات متحركة مخصصة. إنها وحدات، مع مكونات مدمجة يمكنك استخدامها كنقطة بداية. وحدة Burst ممتعة بشكل خاص.
كيفية تحريك صفحات الويب
تنقسم الرسوم المتحركة على الويب إلى فئتين رئيسيتين:
عرضي: حيث يتم تشغيل الرسوم المتحركة بغض النظر عما يفعله المستخدم. الرسوم المتحركة العرضية ليست بالضرورة مجرد زخارف؛ يمكن أن تكون عروض شرائح أو عروض توضيحية.
تفاعلية: والتي تنتج عن أحداث مثل التمرير والتمرير والنقر. ويمكن استخدامها للمساعدة في توجيه المستخدمين وتشجيعهم على تنفيذ الإجراءات.
عندما تكون الرسوم المتحركة جزءًا لا يتجزأ من واجهة المستخدم، والتي يتم تشغيلها بواسطة أحداث تفاعل المستخدم، يمكنها تحسين تفاعل المستخدم حيث يشعر المستخدم أنه يتحكم في ما يحدث على الشاشة.
استخدمها لتعزيز التصميم، وتشجيع المستخدمين وطمأنتهم، وإسعادهم عندما يتطلب الأمر ذلك.
عند استخدامها بشكل جيد، تضيف الرسوم المتحركة بعدًا إضافيًا إلى التصميم، لكن لا يجب استخدامها للتعويض عن ضعف تصميم واجهة المستخدم. إذا كنت تعتمد بشكل كامل على الرسوم المتحركة لإنجاز التصميم، فأنت بحاجة إلى إعادة التفكير في التصميم.
يجب أن تكون الرسوم المتحركة مجرد تحسين، من الناحيتين الجمالية والوظيفية. يجب عليك التأكد من أن موقعك لا يزال يعمل في حالة فشل الرسوم المتحركة. إذا فشل تحميل JavaScript أو لم يتم تشغيله، لأي سبب من الأسباب، فيجب أن يظل المستخدم قادرًا على رؤية المحتوى وتنفيذ أي إجراءات.
في الغالبية العظمى من الحالات، الأقل هو بالتأكيد أكثر. إن قصف المستخدم بالكثير من الحركة أمر مزعج. يجب عليك أيضًا أن تحافظ على اتساق الرسوم المتحركة الخاصة بك ومتماسكة من الناحية الجمالية.
على الجانب الفني، يعد الأداء أمرًا بالغ الأهمية، سواء فيما يتعلق بالرسوم المتحركة نفسها أو بالصفحة بشكل عام. تريد أن تبقي الأمور خفيفة قدر الإمكان. إذا كنت تفعل شيئًا مباشرًا، فيمكنك التفكير في كتابته بلغة Vanilla JavaScript (بدون أي تبعيات)، حيث سيكون هذا هو الخيار الأسهل. من ناحية أخرى، إذا كنت لا تعرف JavaScript، فإن ما تحفظه بحجم الملف لا يستحق كل هذا العناء مقابل ما ستوفره على نفسك من الوقت والطاقة باستخدام مكتبة صغيرة.
هناك بعض الأشياء التي تستحق أخذها في الاعتبار عندما يتعلق الأمر بملفات JavaScript ومشكلات الحجم. تنطبق هذه الأمور على JavaScript بشكل عام، وليس فقط على الرسوم المتحركة أو المكتبات.
تميل المكتبات الصغيرة إلى أن تكون بحجم 5 إلى 7 كيلو بايت مضغوطة، لكن حتى المكتبات الأكثر شمولاً التي نظرنا إليها هنا هي أقل من 30 كيلو بايت مضغوطة. عند مقارنة ذلك بحجم ملفات الصور، فهو لا يكاد يذكر. حتى بالمقارنة مع ملفات CSS، فهي ليست ضخمة تمامًا.
عادةً ما يتم تحميل JavaScript كتحسين تدريجي في أسفل المستند. وهذا يعني أنه يتم تحميله أخيرًا ولا يمنع تحميل بقية الصفحة، على عكس CSS، الذي يتم تحميله في الرأس.
لقد ذكرنا هذا بالفعل، ولكن من المفيد أن نقول مرة أخرى: قم بتحميل أقل عدد ممكن من الملفات الخارجية. إذا كنت تستخدم أكثر من مكتبة صغيرة، فقم بتسلسلها. كلما قل عدد المكالمات إلى الخادم، زادت السرعة ص وقت التحميل.
إحدى أكبر المكتبات التي استعرضناها هنا، GreenSock، تحتوي على تعليمات برمجية إضافية لضمان تشغيل الرسوم المتحركة بسلاسة. لذا، فإن بضعة ميلي ثانية إضافية من التحميل الأولي تدفع للمستخدمين عدم تشتيت انتباههم بسبب الأداء الضعيف على الصفحة نفسها.
إذا كنت تواجه مشكلات تتعلق بأوقات التحميل، فانظر إلى ملفات الصور الخاصة بك أولاً: من المحتمل أن يوفر لك تحسين الصور أكثر بكثير من قطع بعض جافا سكريبت. تأكد أيضًا من أن ملفات CSS الخاصة بك خفيفة قدر الإمكان. حقق أقصى استفادة ممكنة من ذاكرة التخزين المؤقت للمتصفح. بمجرد تحميل الملف، سيكون متاحًا عبر موقعك بالكامل. والحفاظ على المكالمات إلى الخادم إلى الحد الأدنى. للحصول على أقصى سرعة تحميل، استخدم CDN لمواردك الخارجية.
الحجم ليس هو نفس الشيء مثل الانتفاخ - الانتفاخ هو الأشياء التي لا تحتاج إليها.
الحجم مهم، ولكن التخلص من التعليمات البرمجية الزائدة ربما يكون أكثر أهمية.
يجب عليك دائمًا استخدام أصغر مكتبة ممكنة للتخلص من التعليمات البرمجية غير المستخدمة، لأسباب ليس أقلها أن Google تلاحظ التعليمات البرمجية غير المستخدمة. يمكن أن يحسب ضدك. العديد من هذه المكتبات معيارية وتسمح لك فقط بتحميل الأشياء التي تحتاجها بالفعل.
هذه الأدوات ليست فقط لغير المبرمجين. إنها توفر الوقت بشكل رائع لمطوري الواجهة الأمامية أيضًا.
إذا كنت تريد استخدام الرسوم المتحركة في تصميماتك بشكل منتظم، فيجب أن تعتاد على JavaScript. ليس من الضروري أن تكون خبيرًا، ولكن يجب أن تكون قادرًا على فهم كيفية عمل ذلك. علاوة على ذلك، فإن الحصول على فهم أساسي لما يجري تحت الغطاء لا يسبب أي ضرر.
اترك تعليقا:
