المكوّنات المتحركة واستيفاء الأنماط

يوفّر react-spring إصدارات متحركة من جميع عناصر HTML: animated.div وanimated.span وanimated.img وanimated.button وغيرها. وهذه بدائل مباشرة لنظيراتها الأصلية، مع فرق جوهري واحد: يمكنها قبول كائنات SpringValue كخصائص نمط.

تستقبل عناصر React العادية النمط على شكل كائن عادي ذي قيم ثابتة. أما SpringValues فهي كائنات خاصة تتحدّث في كل إطار من إطارات التحريك من دون المرور بدورة إعادة التصيير في React. وحدها المكوّنات animated.* تعرف كيفية الاشتراك في تحديثات SpringValue وتعديل نمط DOM مباشرةً، متجاوزةً React بالكامل لتحقيق أعلى أداء.

طبّقوا قيم النابض مباشرةً كخصائص نمط CSS على المكوّنات animated. فعلى سبيل المثال: style={{ opacity: opacity, transform: transform }}، حيث إن opacity وtransform هما SpringValues من useSpring. يقرأ animated.div هذه القيم في كل نبضة من RAF (requestAnimationFrame) ويطبّقها على عقدة DOM.

تحتوي SpringValues على طريقة .to() لتحويل مخرجاتها. ومن حالات الاستخدام الشائعة تحويل قيمة نابض رقمية إلى سلسلة CSS: x.to(v => "translateX(" + v + "px)"). تستقبل الدالة القيمة الرقمية الحالية وتعيد المخرجات المحوَّلة، التي تُطبَّق كنمط.

تقبل طريقة .to() أيضًا مصفوفات لتعيين النطاقات: x.to([0, 1], ["#ff0000", "#00ff00"])، فتعيّن قيمة النابض من النطاق [0, 1] إلى نطاق الألوان من الأحمر إلى الأخضر. هكذا تستوفون قيم النوابض الرقمية إلى ألوان أو سلاسل أو أي قيمة لا يمكن تمثيلها كرقم عادي.

عندما يتتبع نابض قيمًا متعددة في الوقت نفسه، يمكنكم استيفاؤها معًا. فبالنسبة إلى نابض يتتبع { x, y }، يمكنكم كتابة: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). تستقبل دالة الاستدعاء .to() جميع القيم بالترتيب الذي تظهر به في إعدادات النابض.

يمكنكم تغليف مكوّناتكم الخاصة باستخدام animated(): const AnimatedCard = animated(Card). ويجب أن يقبل المكوّن المغلَّف خاصية style ويمرّرها إلى عنصر DOM. عندها يمكن لـ AnimatedCard استقبال SpringValues في خاصية النمط، تمامًا مثل animated.div.

غالبًا ما تجمع التحريكات المعقدة عدة نوابض. فعلى سبيل المثال، قد يستخدم تحريك الظهور نابضًا للشفافية وآخر للموضع الرأسي. ويمكنكم تطبيق كليهما على animated.div نفسها: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

أهم سمة للأداء في react-spring هي أن تحديثات القيم المتحركة تتجاوز آلية المصالحة في React. فعندما يكون نابض قيد التحريك، لا تعيد React تصيير المكوّن في كل إطار. وبدلًا من ذلك، يحدّث المكوّن animated.* خاصية النمط في عقدة DOM مباشرةً ضمن كل دالة استدعاء لـ requestAnimationFrame، مما يتيح تحريكًا بمعدل 60fps من دون الحمل الإضافي لـ React.

من أنماط التحريك الشائعة باستخدام الاستيفاء: التلاشي عند التركيب باستخدام opacity.to([0, 1], [0, 1])، والتكبير عند التمرير باستخدام scale.to(s => "scale(" + s + ")")، والدوران عند التبديل باستخدام rotation.to(r => "rotate(" + r + "deg)"). يؤدي تسلسل هذه التحويلات إلى إنشاء تأثيرات مركبة.

يمكن لـ .to()، عند استخدام مصفوفات النطاق، إجراء استقراء خارج النطاق المحدد افتراضيًا. ويمكنكم التحكم في ذلك باستخدام الخيار extrapolate: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" })، الذي يمنع المخرجات من النزول عن 0 أو تجاوز 100 حتى إذا تجاوز النابض حدوده. ويفيد ذلك في أشرطة التقدم والتحريكات ذات الحدود.

لماذا يجب استخدام animated.div بدلًا من div عادي عند تطبيق قيم النابض؟

تُعد animated.div وanimated.span وanimated(CustomComponent) بدائل جاهزة للاستبدال، وتقبل SpringValues كخصائص نمط. تستوفي طريقة .to() قيم النابض لتحويلها إلى سلاسل CSS أو نطاقات ألوان أو أي تنسيق للمخرجات. ويمكن تركيب عدة نوابض بصورة طبيعية على العنصر نفسه. وتتمثل فائدة الأداء الأساسية في أن تحديثات النابض تتجاوز إعادة تصيير React عبر تعديل أنماط DOM مباشرةً في دوال استدعاء RAF.