أساسيات React Spring: ‏useSpring Hook

تستخدم حركات CSS التقليدية مدة ثابتة: تُشغّل الحركة على مدى X من المللي ثانية ثم تتوقف. أما react-spring فيحرّك القيم باستخدام فيزياء النوابض، إذ تتحكم في الحركة tension، أي صلابة النابض، وfriction، أي مقدار مقاومة النابض للحركة. وينتج عن ذلك تحرك يتباطأ طبيعيًا ويشعر بأنه عضوي.

يعرّف الخطاف useSpring({ from, to }) قيمة متحركة. تحدد قيم البدء في from والقيم الهدف في to. ويعيد useSpring كائن springs، حيث يكون كل مفتاح فيه SpringValue، أي نسخة متحركة من القيمة الرقمية أو اللونية المقابلة.

يتحكم الخيار config في سلوك النابض. تتحكم tension، وقيمتها الافتراضية 170، في الصلابة؛ فكلما ارتفعت القيم أصبح التوقف أسرع. وتتحكم friction، وقيمتها الافتراضية 26، في التخميد؛ فالقيم الأقل تؤدي إلى ارتداد أكبر. وتضيف mass، وقيمتها الافتراضية 1، القصور الذاتي. وتحدد هذه القيم الثلاث معًا طابع الحركة.

تأتي react-spring مع إعدادات config مسبقة يمكنك استخدامها من دون ضبط: تتميز config.default بالتوازن وتناسب الاستخدام العام، وconfig.gentle ببطء الحركة وسلاستها، وconfig.wobbly بالارتداد الناتج عن friction منخفض، وconfig.stiff بالسرعة والاستجابة الحادة، بينما تتميز config.slow بالتدرج الشديد. استوردها من react-spring.

القيم التي يعيدها useSpring هي كائنات SpringValue، وليست أرقامًا عادية. لا يمكن عرضها مباشرةً في JSX أو استخدامها في كائنات الأنماط العادية. بل يجب تطبيقها على المكوّنات animated.* التي تعرف كيفية الاشتراك في تحديثات النابض وتطبيقها على DOM بكفاءة.

يؤدي تمرير immediate: true إلى useSpring إلى انتقال القيم فورًا إلى أهدافها، متجاوزًا تحريك النابض. يفيد ذلك في العرض الأولي، أو عندما يفعّل المستخدم خيار "تقليل الحركة" في إعدادات نظام التشغيل، أو عندما تحتاجون إلى إعادة ضبط الموضع برمجيًا من دون أي حركة مرئية.

يمكنكم عكس تحريك النابض بتبديل القيم الموجودة في from وto. من الأنماط الشائعة تخزين حالة تبديل منطقية وحساب from وto بناءً عليها: عندما تكون قيمة toggle هي false، يجري التحريك من 0 إلى 1؛ وعندما تكون true، يجري التحريك من 1 إلى 0. ينتقل react-spring بسلاسة بين الحالتين.

يمكن أن يعيد useSpring مصفوفة من عنصرين: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). يمنحكم الكائن api تحكمًا برمجيًا. استدعوا api.start({ x: 100 }) للتحريك إلى قيمة جديدة، وapi.stop() لتجميد التحريك، وapi.set({ x: 50 }) للانتقال الفوري من دون تحريك.

استخدموا الصيغة التصريحية useSpring({ from, to }) عندما يعتمد التحريك على حالة React التي تتغير بالطريقة المعتادة. واستخدموا الصيغة الأمرية مع api.start() عندما تحتاجون إلى تشغيل التحريك من معالجات الأحداث أو الإيماءات أو العمليات غير المتزامنة، من دون التسبب في إعادة تصيير React.

يقبل useSpring دوال استدعاء دورة الحياة ضمن إعداداته. يتم تشغيل onStart عند بدء تحريك النابض. ويتم تشغيل onChange في كل إطار مع القيمة الحالية، ما يجعله مفيدًا للتأثيرات الجانبية التي تتتبع الموضع. ويتم تشغيل onRest عند استقرار النابض على قيمته النهائية، مما يشير إلى اكتمال التحريك.

في الصيغة التصريحية، يعيد useSpring تشغيل التحريك تلقائيًا عند تغيّر القيم الممرّرة إليه. فعلى سبيل المثال، سيحرّك useSpring({ opacity: isVisible ? 1 : 0 }) الشفافية في كل مرة تتغير فيها قيمة isVisible. وهذه أبسط طريقة لربط تحريك النابض بحالة المكوّن.

ما الذي يتحكم فيه كل من tension وfriction في إعدادات react-spring؟

يستخدم react-spring الفيزياء للتحريك: إذ تحدد tension (الصلابة) وfriction (التخميد) وmass الحركة. يعيد useSpring({ from, to }) كائنات SpringValue تُطبَّق على المكوّنات animated.*. وتغطي الإعدادات المسبقة (gentle وwobbly وstiff وslow) الحالات الشائعة. تتيح واجهة API الأمرية [springs, api] التحكم البرمجي عبر api.start() وapi.stop() وapi.set(). ويتم تشغيل onRest عند استقرار التحريك.