‏useTrail وuseChain للتسلسلات

ينشئ useTrail(count, config) عددًا من النوابض يساوي count، وتتحرك هذه النوابض بالتتابع مع تأخير قابل للضبط بين كل منها. عند بدء المسار، يتحرك العنصر الأول فورًا، ثم يبدأ الثاني بعده بقليل، يليه الثالث، وهكذا، مما ينشئ تأثير الانتشار أو التتابع.

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

اعرضوا قائمة ذات تحريك متعاقب عبر إجراء تكرار على مصفوفة المسار: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). يتلقى كل animated.div كائن نابض خاصًا به، لذلك تتحرك العناصر بالتتابع. وتعمل النوابض بترتيب الفهارس: 0، 1، 2، 3...

يدعم useTrail نمط التبديل للتحريك إلى الأمام والعكس. مرّروا حالة منطقية باسم open للتحكم في الاتجاه: عندما تكون open هي true، يتحرك المسار من مخفي إلى ظاهر؛ وعندما تكون false، ينعكس من ظاهر إلى مخفي. وينعكس ترتيب المسار تلقائيًا، فتتحرك العناصر إلى الخارج بترتيب عكسي، أي الأخير دخولًا هو الأول خروجًا.

كائن الإعدادات في useTrail هو نفسه المستخدم في useSpring: tension وfriction وmass. ويتحدد التأخير بين العناصر بالمدة التي يستغرقها كل نابض لبدء التحريك، وتتحكم في ذلك فيزياء النابض العامة. وتؤدي النوابض الأكثر صلابة ذات tension الأعلى إلى تعاقب أسرع، بينما تنشئ النوابض الألطف تتابعات أطول.

ينشئ useSpringRef() مرجعًا تربطونه بخطاف النابض عبر الخيار ref. ويمنح المرجع useChain التحكم في وقت بدء ذلك النابض. أنشئوا مرجعًا واحدًا لكل نابض أو مسار تريدون تنظيمه بالتتابع: const springRef = useSpringRef()، ثم مرّروه هكذا: useSpring({ ref: springRef, ... }).

ينظّم useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) عدة نوابض أو مسارات بالتتابع. الوسيط الأول هو مصفوفة من springRefs مرتبة حسب تسلسل تشغيلها. أما الوسيط الثاني فهو مصفوفة من الطوابع الزمنية بين 0 و1، وتحدد متى يبدأ كل نابض بوصف ذلك جزءًا من الإطار الزمني الكلي.

في useChain، تعني طوابع زمنية مثل [0, 0.5] أن النابض 1 يبدأ عند 0% من التسلسل، وأن النابض 2 يبدأ عند 50% منه. أما الوسيط الثالث الاختياري فهو الإطار الزمني الكلي بالمللي ثانية، وقيمته الافتراضية 1000ms. لذلك، مع [0, 0.5] و2000ms، يبدأ النابض 1 عند 0ms ويبدأ النابض 2 عند 1000ms.

من الأنماط الشائعة تحريك حاوية لتتسع باستخدام useSpring للحجم، ثم تحريك العناصر داخلها لتظهر تدريجيًا باستخدام useTrail للقائمة. اربطوا مرجعًا بكل منهما، ثم استخدموا useChain([sizeRef, trailRef], [0, 0.5]) لتتسع الحاوية أولًا، ثم تبدأ العناصر بالظهور في منتصف العملية. ينشئ ذلك تحريك ظهور سينمائيًا من مرحلتين.

يُعد useChain مناسبًا جدًا لانتقالات الصفحات. عند التنقل بين الصفحات، نسّقوا تحريك خروج الصفحة القديمة مع تحريك دخول الصفحة الجديدة. يكتمل الخروج أولًا، عند الطابع الزمني 0، ثم يبدأ الدخول عند الطابع الزمني 0.6. وينشئ ذلك انتقالًا سلسًا بدلًا من التبديل المفاجئ.

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

كيف ينشئ useTrail التأخير المتعاقب بين العناصر أثناء التحريك؟

ينشئ useTrail(count, config) عددًا من النوابض يساوي count، وتتحرك بالتتابع لإنشاء ظهور متعاقب للقوائم. أجروا تكرارًا متزامنًا على المسار والعناصر لعرضها. ينشئ useSpringRef() مراجع يستخدمها useChain لتنظيم التسلسل. وينظّم useChain([ref1, ref2], [0, 0.5]) عدة نوابض باستخدام طوابع زمنية كسرية. وباستخدامهما معًا يمكن إنشاء تسلسلات معقدة متعددة المراحل، مثل تحريك التوسّع ثم الإظهار.