Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

الشروع في العمل مع مكتبة الرسوم المتحركة Mojs: وحدة HTML

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started with Mojs Animation Library.
Getting Started With the Mojs Animation Library: The Shape Module

Arabic (العربية/عربي) translation by Aisy Abdullah (you can also view the original English article)

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

المكتبة سهل جداً للاستخدام بسبب لها API تعريفية بسيطة. الحركات التي يمكنك إنشاءها مع مويس سيكون كل سلسة والشبكية جاهزة حيث أن كل شيء يبدو المهنية.

تثبيت Mojs

هناك العديد من الطرق لتشمل mojs في مشاريعك. يمكنك انتزاع المكتبة من repository GitHub الخاص بها. بدلاً من ذلك ، يمكنك تضمين ارتباط إلى أحدث إصدار من المكتبة من شبكات CDN المختلفة في مشروعك مباشرةً.

يمكن أيضا تثبيت المطورين مويس باستخدام حزمة المديرين مثل متحف القصر الوطني وكوخ في الريف عن طريق تشغيل الأمر التالي:

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

وحدة HTML في Mojs

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

أول شيء يتعين عليك فعله لتحريك عنصر DOM هو إنشاء كائن Html mojs. يمكنك تحديد محدد العنصر وخصائصه التي تريد تحريكها داخل هذا الكائن.

سيتيح لك تعيين قيمة لـ el تحديد العنصر الذي تريد تحريكه باستخدام mojs. يمكنك إما تعيين قيمته كمحدد أو عقدة DOM.

تحتوي وحدة HTML على بعض السمات المحددة مسبقًا والتي يمكن استخدامها لتحريك خصائص مختلفة متعلقة بالتحويل لعنصر DOM. على سبيل المثال ، يمكنك التحكم في حركة الترجمة لعنصر على طول المحاور x و y و z من خلال تحديد قيم البداية والنهاية للخصائص x و y و z. يمكنك أيضًا تدوير أي عنصر على محاور مختلفة باستخدام خصائص angleX و angleY ​​و angleZ. هذا مماثل للتحويلات rotateX() و rotateY() و rotateZ() المناظرة في CSS. يمكن لك أيضا أن تحرف عنصر على طول المحور X أو Y بمساعدة skewX وخصائص skewY.

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

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

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

إذا كنت تريد تشغيل الرسم المتحرك للخلف بمجرد وصوله إلى الحالة النهائية ، فيمكنك تعيين قيمة الخاصية isYoyo إلى true. يتم تعيينه على false بشكل افتراضي. وأخيراً، يمكنك تعيين السرعة التي ينبغي أن لعبت الحركة باستخدام الخاصية سرعة. القيمة الافتراضية هي 1. تعيين إلى 2 سوف تلعب الرسوم المتحركة أسرع مرتين. وبالمثل، تعيينها إلى 0.5 سوف تلعب الرسوم المتحركة بنصف السرعة.

مويس كائنات Html التي قمت بإنشائها سوف لا تحريك عناصر كل منها بأنفسهم. سيكون لديك لاستدعاء الأسلوب play () على كل مويس حركة Html الذي تريد تشغيله. في ما يلي مثال يوضح ثلاثة مربعات مختلفة تستخدم جميع الخصائص التي ناقشناها للتو:

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

إذا كانت الخاصية CSS التي تريد تحريكها تحتوي على واصلة ، فيمكنك إزالة الواصلة وتحويل اسم الخاصية إلى camelCase عند تحديد القيم الأولية والنهائية داخل كائن mojs Html. وهذا يعني أنه يمكنك تحريك border-radius عن طريق تعيين قيمة صالحة لخاصية borderRadius. يجب أن يوضح المثال التالي كل شيء:

في المثال أعلاه، تغيير لون الحدود من الأسود إلى الأحمر بينما يدور حدود دائرة نصف قطرها من 0 إلى 50%. يجب ملاحظة أن عدد انيتلس سوف تعتبر قيمة بكسل، بينما ينبغي أن تحدد عدد وحدات كسلسلة مثل 50% '.

حتى الآن لقد استخدمنا مجموعة واحدة من خصائص توين للتحكم في تشغيل الحركات المختلفة. وهذا يعني أن عنصر الوقت نفسه للانتقال من x: 0 إلى x: 200 كما سوف يستغرق على مقياس من مقياس: 1  مقياس: 2.

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

تخفيف الدالات المتوفرة في مويس

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

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

هناك طريقتان لتحديد وظيفة التخفيف للرسوم المتحركة. يمكنك إما استخدام سلسلة مثل elastic.in أو يمكنك الوصول إلى وظائف التخفيف مباشرة باستخدام كائن mojs.easing مثل mojs.easing.elastic.inout. في العرض التوضيحي CodePen المضمن ، قمت بتطبيق وظائف تخفيف مختلفة على كل شريط بحيث يتغير عرضه بوتيرة مختلفة. سيعطيك هذا فكرة عن مدى اختلاف سرعة الرسوم المتحركة مع كل عملية تخفيف.

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

السيطرة على تشغيل الرسوم المتحركة

توفر Mojs الكثير من الطرق التي تتيح لنا التحكم في تشغيل الرسوم المتحركة للعناصر المختلفة بمجرد بدء التشغيل. يمكنك إيقاف الرسم المتحرك في أي وقت عن طريق استدعاء الأسلوب pause (). وبالمثل ، يمكنك استئناف أي رسوم متحركة متوقفة مؤقتًا عن طريق استدعاء طريقة السيرة الذاتية ().

سيتم دائمًا استئناف الصور المتحركة التي تم إيقافها مؤقتًا باستخدام pause () من النقطة التي قمت عندها باستدعاء pause (). إذا كنت تريد أن يبدأ الرسم المتحرك من البداية بعد أن يتم إيقافه مؤقتًا ، فيجب استخدام أسلوب stop () بدلاً من ذلك.

يمكنك أيضًا تشغيل الرسوم المتحركة إلى الخلف باستخدام طريقة playBackward (). في وقت سابق ، استخدمنا خاصية السرعة للتحكم في السرعة التي لعبت بها mojs صورة متحركة. لديه Mojs أيضا طريقة setSpeed ​​() التي يمكن أن تحدد سرعة الرسوم المتحركة في حين أنها لا تزال قيد التنفيذ. في المثال التالي ، استخدمت كل هذه الطرق للتحكم في تشغيل الرسوم المتحركة بناءً على نقرات الأزرار.

في العرض التوضيحي التالي ، يتم عرض سرعة تشغيل الرسوم المتحركة الحالية في المربع الأسود في الزاوية السفلية اليسرى. سيؤدي النقر على أسرع إلى زيادة السرعة الحالية بمقدار 1 ، وسيؤدي النقر على أبطأ إلى خفض السرعة الحالية إلى النصف.

افكار اخيرة

في هذا البرنامج التعليمي ، تعلمنا كيفية تحريك عناصر DOM مختلفة على صفحة ويب باستخدام وحدة HTML في mojs. يمكننا تحديد العنصر الذي نريد تحريكه باستخدام إما محدد أو عقدة DOM. تتيح لك المكتبة تحريك خصائص تحويل مختلفة وعتامة أي عنصر باستخدام الخصائص المضمنة لكائن mojs Html. ومع ذلك ، يمكنك أيضًا تحريك خصائص CSS الأخرى عن طريق تحديد الاسم باستخدام ترميز camelCase.

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

اسمحوا لي أن أعرف ما إذا كان هناك أي شيء تريد أن توضحه في هذا البرنامج التعليمي. سوف نغطي وحدة الشكل من مكتبة mojs في البرنامج التعليمي التالي.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.