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

إنشاء دائره مثاليه ، الجزء 3

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Create the Perfect Carousel.
Create the Perfect Carousel, Part 2

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

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

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

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

يمكنك التقاط المكان الذي توقفت عنده باستخدام CodePen .

إمكانية الوصول إلى لوحة المفاتيح

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

والخبر السار هو أنه من السهل تنفيذه عادة! في الواقع ، تقوم المتصفحات بمعظم العمل بالنسبة لنا. على محمل الجد: جرّب وضع علامة التبويب في الدوّار الذي أنشأناه. لأننا استخدمنا الترميز الدلالي ، يمكنك بالفعل!

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

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

تعمل أيضًا المكتبة الدوارة لـ Netflix بهذه الطريقة. ولكن نظرًا لأن معظم عناوين الكتب تحمل ببطى ، كما أنها قابلة للدخول إلى لوحة المفاتيح بشكل سلبي (بمعنى أنها لم تكتب أي شفرة على وجه التحديد للتعامل معها) ، فلا يمكننا في الواقع تحديد أي عناوين بخلاف العدد القليل المحمل بالفعل. يبدو هذا أيضا فظيع:

Keyboard Accessibility

يمكننا أن نفعل ما هو أفضل.

التعامل مع الحدث التركيز

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

في نهاية وظيفة الرف الدائري ، أضف مستمع الحدث:

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

فوق مجموعتنا المتنامية من مستمعي الحدث ، أضف وظيفة onFocus :

سنكون عملنا في هذه الوظيفة لبقية هذا القسم.

نحن بحاجة إلى قياس العنصر الأيسر و حق تعويض وتحقق ما إذا كان أي من هذه النقطة تكمن خارج مساحة للعرض حاليا.

يتم توفير العنصر من خلال المعلمة المستهدفة للحدث ، ويمكننا قياسه باستخدامgetBoundingClientRect :

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

الآن ، يمكننا إجراء فحص بسيط لمعرفة ما إذا كان العنصر خارج المنطقة المرئية للشريط التمرير وثلاث صفحات في هذا الاتجاه:

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

إعادة قراءة الدائره

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

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

الآن ، بالقرب من بداية وظيفة الرف الدائري ، بعد الخط الذي نحدد به شريط التقدم ، نريد استبدال ثلاثة من هذه القياسات const بالسماح ، لأننا سنغيرها عند تغيير إطار العرض:

بعد ذلك ، يمكننا نقل المنطق الذي كان يحسب هذه القيم سابقًا إلى مقياس جديد وظيفةCousousel :

نريد استحضار هذه الوظيفة على الفور حتى نضع هذه القيم على التهيئة. على السطر التالي ، قم بقياس callCarousel :

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

والآن ، إذا قمت بتغيير حجم مكتبة الصور وحاول ترقيم الصفحات ، فستستمر في العمل كما هو متوقع.

ملاحظة حول الأداء

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

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

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

دالة debounce تقول بشكل أساسي: "فقط أطلق هذه الدالة عندما لم يتم استدعاؤها عبر xمللي ثانية." يمكنك قراءة المزيد عن الإعلان عن كتاب ديفيد وولش الممتازة ، والتقاط بعض أمثلة التعليمات البرمجية أيضًا.

اللمسات الأخيرة

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

ولكن هذه ليست سلسلة البرامج التعليمية "إنشاء مكتبة جذّابة جميلة". لقد حان الوقت لكي نظهر قليلاً ، ولتحقيق ذلك ، لدينا سلاح سري. الينابيع .

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

لمسة الربيع

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

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

في determineDragDirection وظيفة، لدينا هذا الرمز:

فوقها مباشرة ، دعنا ننشئ نوابضنا ، واحدة لكل حد لفافة الدوامة:

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

الآن نحتاج فقط إلى كتابة دالة بسيطة تطبق واحدة من هذه النوابض إذا كانت القيمة المقدمة خارج النطاق المسموح به:

يمكننا استبدال clampXOffset في الكود أعلاه مع applySpring . الآن ، إذا قمت بسحب شريط التمرير بعد حدوده ، فسوف يتراجع!

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

نابض فيزيائي

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

في stopTouchScroll ، قم بنقل تهيئة فيزياء التمرير الموجودة إلى جزء من المنطق الذي يضمن أننا ضمن حدود التمرير:

ضمن البند الأول من عبارة if ، نعرف أن شريط التمرير خارج حدود اللولب ، حتى نتمكن من نابض الإضافة:

نحن نريد أن ننشئ زنبرك يشعر بالنبذ ​​والاستجابة. لقد اخترت قيمة النابض عالية نسبيا أن يكون لديك "البوب" ضيق ، ولقد خفضت الاحتكاك إلى 0.92 للسماح لارتداد قليلا.يمكنك تعيين هذا على 1 لإزالة الارتداد تمامًا.

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

ترقيم الصفحات النابض

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

أولاً ، نريد تعطيل أزرار تقسيم الحدود عند الوصول إلى الحد الأقصى. لنقم أولاً بإضافة قاعدة CSS تقوم بتصنيع الأزرار لإظهار أنها معطلة . في قاعدة الزر ، أضف:

نحن نستخدم فئة هنا بدلا من أكثر الدلالات غير القادره السمة لأننا لا تزال ترغب في التقاط الأحداث نقرة، والتي، كما يوحي الاسم، تعطيل ستمنع.

أضف هذه الفئة المُعطلة إلى الزر "السابق" ، لأن كل دائري يبدأ الحياة بـ 0 offset:

باتجاه الجزء العلوي من الرف الدائري ، أنشئ وظيفة جديدة تسمىcheckNavButtonStatus . نريد أن تقوم هذه الوظيفة ببساطة بمراجعة القيمة المقدمة مقابل minXOffset و maxXOffset وتعيين الفئة المعطلة للزر وفقًا لذلك:

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

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

في السطر الأخير من onWheel ، أضف checkNavButtonStatus (newX)؛ .

في السطر الأخير من goto ، أضف checkNavButtonStatus (targetX)؛ .

وأخيرا، في نهاية determineDragDirection ، وفي بند القوه الدافعه لتمرير (رمز داخل آخر ) من stopTouchScroll ، يحل محل:

مع:

الآن كل ما تبقى هو تعديل gotoPrev و gotoNext للتحقق من فئة زر التشغيل الخاص بهمقائمة الغير قادرين والصفحات الفرعية فقط إذا كانت غير موجوده :

و notifyEnd وظيفة ليست سوى آخر النابض الفيزيائي ، ويبدو مثل هذا:

هل لديك لعبة مع ذلك ، ومرة ​​أخرى ،علم قرص الفيزياء لترضى.

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

مع:

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

نظيف بعد انتهائك

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

في React ، يتم وضع هذا الرمز في methodWillLeave method. يستخدم Vue قبل Destroy . هذا تطبيق JS خالص ، ولكن لا يزال بإمكاننا توفير طريقة تدمير تعمل على قدم المساواة في أي إطار.

حتى الآن ، لم تعُد وظيفة الكتب الدوارة أي شيء. دعونا نغير ذلك.

أولاً ، قم بتغيير السطر الأخير ، الخط الذي يُطلق عليه الدائري ، إلى:

سنقوم بإرجاع شيء واحد فقط من المكتبة ، وهي وظيفة تعمد إلى فك ارتباط جميع مستمعي الحدث. في نهاية وظيفة الرف الدائري ، اكتب:

الآن ، إذا اتصلت بالدائره المدمره وحاولت اللعب مع الرف الدائري ، فلن يحدث شيء! يكاد يكون من المحزن أن أراها هكذا.

وهذا هو الذي

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

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

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.