تحريكات موجّهة بالإيماءات باستخدام use-gesture

@use-gesture/react هي مكتبة للتعرّف على الإيماءات، صُممت لتعمل بسلاسة مع react-spring. تتعرّف على إيماءات السحب، القرص، التمرير، التحويم، الحركة، وعجلة التمرير، وتوفّر حالة إيماءات موحّدة تمرّرها مباشرةً إلى دوال ضبط النابض لإنشاء تفاعلات سلسة قائمة على الفيزياء.

يستدعي الخطاف useDrag دالة callback عند كل حدث سحب. وتتلقى الدالة كائنًا لحالة الإيماءة يتضمن خصائص أساسية: movement (الإزاحة الكلية منذ بدء السحب)، velocity (السرعة الحالية)، direction (1 أو -1 لكل محور)، first (تكون قيمته true عند بدء السحب)، last (تكون قيمته true عند انتهاء السحب)، وevent (حدث DOM الخام).

تعيد جميع خطافات use-gesture دالة bind(). ويعيد استدعاء bind() كائنًا من خصائص معالجات الأحداث مثل (onPointerDown وonTouchStart وغيرها)، ويمكنك نشر هذه الخصائص على العنصر الذي تريد جعله تفاعليًا. وهذه هي نقطة الربط بين متعرّف الإيماءات وعنصر DOM الخاص بك.

النمط المعتاد هو إنشاء نابض باستخدام الواجهة البرمجية الإجرائية ([springs, api] = useSpring(...))، ثم استخدام useDrag لاستدعاء api.start({ x: movement[0], y: movement[1] }) عند كل حدث سحب. يتبع النابض حركة السحب بسلاسة، ويضيف فيزياء طبيعية إلى ما كان سيصبح بخلاف ذلك تتبعًا جامدًا للمؤشر.

عند انتهاء السحب (حيث تكون last: true في حالة الإيماءة)، تعيد عادةً العنصر إلى موضعه الأصلي. استدعِ api.start({ x: 0, y: 0 }) داخل شرط if (last). يحرّك react-spring العنصر إلى موضعه الأصلي بفيزياء النابض، مع ارتداد لطيف بدلًا من إعادة ضبط فورية، ما يمنح التفاعل إحساسًا فيزيائيًا مُرضيًا.

تتيح قيمة velocity في حالة الإيماءة تنفيذ سلوك القذف. فعندما يحرّر المستخدم العنصر بسرعة عالية، يمكنك قذفه في اتجاه السحب بدلًا من إعادته إلى موضعه الأصلي. تحقّق من if (last && velocity[0] > threshold)، ثم حرّك العنصر إلى موضعه النهائي خارج الشاشة. وهذا أساسي لتفاعلات السحب للإغلاق.

لتقييد حركة السحب داخل حاوية، احصر قيم الحركة قبل تمريرها إلى النابض: x: Math.max(-maxX, Math.min(maxX, movement[0])). أو استخدم الخيار المدمج bounds في use-gesture: useDrag(handler, { bounds: { left: -100, right: 100 } }) لحصر حالة الإيماءة تلقائيًا.

لتنفيذ السحب للإغلاق على الأجهزة المحمولة، استخدم useDrag لتتبّع الحركة الأفقية. إذا حرّر المستخدم العنصر بسرعة تتجاوز حدًا معينًا أو حرّكه مسافة تزيد على نصف عرض الشاشة، فحرّك البطاقة خارج الشاشة (api.start({ x: window.innerWidth })) ثم أزلها من القائمة. وإلا فأعدها إلى المركز.

يتعرّف usePinch على إيماءات القرص بإصبعين على شاشات اللمس، وعلى Ctrl+wheel على أجهزة سطح المكتب. وتتضمن حالة الإيماءة scale (مستوى التكبير الحالي مقارنةً ببداية القرص) وorigin (النقطة المركزية للقرص). اربط ذلك بنابض يتتبع مقياس التكبير لإنشاء تفاعلات تكبير سلسة ومحدودة على الصور أو الخرائط.

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

يمكن تركيب خطافات use-gesture معًا. يمكنك استخدام useDrag وusePinch على العنصر نفسه: const bindDrag = useDrag(...); const bindPinch = usePinch(...)، ثم نشر دالتي الربط كلتيهما: ...bindDrag() ...bindPinch(). ويتولى use-gesture تلقائيًا التمييز بين أنواع الإيماءات.

ما وظيفة الدالة bind() التي تعيدها خطافات use-gesture؟

يوفّر @use-gesture/react الخطافات useDrag وusePinch وuseScroll وuseHover وuseMove. ويعيد كل خطاف دالة bind()، whose نشر نتيجتها يربط أحداث الإيماءات بعناصر DOM. وتوفّر حالة الإيماءة movement وvelocity وdirection وfirst وlast. ادمجها مع api.start() الإجرائية في react-spring لإنشاء رسوم متحركة تفاعلية قائمة على الفيزياء. استخدم velocity للقذف والإغلاق، وbounds لحصر الحركة.