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

مقدمة Popmotion: مخصص الرسوم المتحركة الغسيل

by
Difficulty:IntermediateLength:MediumLanguages:

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

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

في الجزء الثاني ، تعلمنا كيفية استخدام تتبع المؤشر وتسجيل السرعة. ثم استخدمنا ذلك لتشغيل الرسوم المتحركة المستندة إلى السرعة في الربيع ، والاضمحلال ، والفيزياء.

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

جربها بنفسك:

ابدء

وضع علامة على

أولاً ، قم بتشوير CodePen هذا لقالب HTML. كما كان من قبل ، لأن هذا هو برنامج تعليمي وسيط ، لن أذهب من خلال كل شيء.

الميل الرئيسي للملاحظة هو أن المقبض الموجود على جهاز الغسيل يتكون من عنصرين من div: .handle و .handle-hit-area.

.handle هو المؤشر البصري المستدير الأزرق حيث يوجد مقبض جهاز التنظيف. لقد قمنا بلفها في عنصر منطقة ضرب غير مرئي لجعل عملية انتزاع العنصر أسهل للمستخدمين الذين يستخدمون الشاشة اللمسية.

استيراد وظائف

في الجزء العلوي من لوحة JS ، استورد كل شيء سنستخدمه في هذا البرنامج التعليمي:

حدد العناصر

سنحتاج إلى ثلاثة عناصر في هذا البرنامج التعليمي. سنقوم بتحريك .box ، وسحب وتحريك منطقة .handle-hit ، وقياس.

دعنا أيضًا نبتكر عناصر مميزة للعناصر التي سنقوم بتحريكها:

Keyframes الرسوم المتحركة

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

سيتم الآن تشغيل الرسوم المتحركة الخاصة بك. لكننا لا نريد ذلك! دعونا وقفة في الوقت الحالي:

سحب المحور السيني

حان الوقت لاستخدام المؤشر لسحب مقبض جهاز التنظيف الخاص بنا. في البرنامج التعليمي السابق ، استخدمنا خصائص x و y ، ولكننا نحتاج إلى x مع جهاز تنظيف.

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

ستعمل تمامًا مثل المؤشر ، إلا أنها ستأخذ فقط رقمًا واحدًا كوسيطة وإخراج رقم واحد فقط (س):

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

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

في هذه الحالة ، وظيفتنا هي ببساطة:

كل ما تفعله هو أخذ الكائن {x، y} عادةً بإخراج المؤشر وإرجاع محور x فقط.

المستمعون الحدث

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

في البرنامج التعليمي الأخير ، استخدمنا الوظيفة addEventListener التقليدية. في هذه المرة ، سنستخدم وظيفة Popmotion أخرى تسمى الاستماع. كما يوفر الاستماع طريقة أنبوب ، وكذلك الوصول إلى جميع أساليب العمل ، لكننا لن نستخدم ذلك هنا.

يسمح لنا الاستماع بإضافة مستمعي الأحداث إلى أحداث متعددة مع وظيفة واحدة ، على غرار jQuery. لذا يمكننا تكثيف المستمعين الأربعة السابقين للحدث إلى اثنين:

تحريك المقبض

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

الآن يمكننا إضافة وظائف startDrag و stopDrag:

في الوقت الحالي ، يمكن إزالة المقبض إلى ما وراء حدود شريط التمرير ، لكننا سنعود إلى ذلك لاحقًا.

حك

الآن لدينا جهاز تنظيف وظيفي بصريًا ، لكننا لا نقوم بتنقية الرسوم المتحركة الفعلية.

كل قيمة لها طريقة الاشتراك. يتيح لنا ذلك إرفاق عدة مشتركين بنيران عندما تتغير القيمة. نريد أن نبحث عن الرسوم المتحركة في keyframes عند تحديث handleX.

أولاً ، قم بقياس شريط التمرير. على السطر بعد تحديد النطاق ، أضف:

يقبل keyframes.seek قيمة التقدم كما هو موضح من 0 إلى 1 ، بينما يتم تعيين handleX الخاص بنا مع قيم البكسل من 0 إلى rangeWidth.

يمكننا التحويل من قياس البيكسل إلى نطاق 0 إلى 1 عن طريق قسمة قياس البيكسل الحالية حسب النطاق. على السطر بعد boxAnimation.pause () ، أضف طريقة الاشتراك هذه:

الآن ، إذا كنت تلعب مع جهاز التنظيف ، فستتغذى الرسوم المتحركة بنجاح!

اكسترا مايل

حدود الربيع

لا يزال من الممكن سحب جهاز التنظيف خارج حدود النطاق الكامل. لحل هذه المشكلة ، يمكننا ببساطة استخدام وظيفة المشبك لضمان عدم إخراج القيم خارج نطاق 0 ، rangeWidth.

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

سنجعل هذه العملية دالة واحدة يمكننا توفيرها إلى طريقة pointerX pipe. من خلال إنشاء وظيفة واحدة قابلة لإعادة الاستخدام ، يمكننا إعادة استخدام هذه الشفرة مع أي حركة Popmotion متحركة ، مع نطاقات قابلة للتكوين ونقاط قوة الربيع.

أولاً ، دعنا نطبق الربيع على أقصى اليسار. سنستخدم محولين ، شرطيين وخطيين.

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

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

استبدل وظيفة startDrag الخاصة بنا بهذا:

نحن الآن نمرر إزاحة المؤشر من خلال وظيفة springRange ، لذلك إذا سحبت المقبض بعد الجانب الأيسر ، ستلاحظ أنه يسحب للخلف.

تطبيق الشيء نفسه على الجانب الأيمن هو مسألة تكوين شرطي ثانٍ باستخدام الأول باستخدام وظيفة الأنبوب المستقلة:

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

إذا تركت المقبض بينما يقع خارج النطاق ، فيجب أن يعود الآن إلى النطاق. لذلك ، سنحتاج إلى ضبط وظيفة stopDrag لإطلاق الرسوم المتحركة في الربيع:

تبدو الدالة snapHandleToEnd الخاصة بنا كما يلي:

يمكنك رؤية ذلك لتعيين إما على شكل 0 أو rangeWidth حسب أي جانب من شريط التمرير يجلس المقبض حاليًا. من خلال اللعب مع التخميد والتصلب ، يمكنك اللعب مع مجموعة متنوعة من زنبرك.

التمرير الزخم

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

في stopDrag ، استبدل handleX.stop () with momentumScroll (x).

ثم ، على السطر بعد الدالة snapHandleToEnd ، إضافة وظيفة جديدة تسمى momentumScroll:

الآن ، إذا رميت المقبض ، سيصل إلى توقف تدريجي. كما سيتم تحريكه خارج نطاق شريط التمرير. يمكننا إيقاف ذلك عن طريق تمرير محول المشبك إلى طريقة decay.pipe:

استنتاج

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

باستخدام الأنابيب ، فإننا نؤلف وظائف نقية بسيطة إلى سلوكيات أكثر تعقيدًا مع ترك الأجزاء المركبة القابلة للاختبار وقابلة لإعادة الاستخدام.

الخطوات التالية

ماذا عن تجربة هذه التحديات:

  • جعل نهاية التمرير الزخم مع ترتد إذا كان المقبض يضرب إما نهاية الغاسل.
  • اجعل المقبض متحركًا لأي نقطة على جهاز الغسيل عندما ينقر المستخدم على جزء آخر من شريط النطاق.
  • أضف أدوات التحكم في التشغيل بالكامل ، مثل زر التشغيل / الإيقاف المؤقت. قم بتحديث موضع مقبض جهاز التنظيف أثناء تقدم الرسوم المتحركة.
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.