تم إعداد ترجمة لهذه المقالة خصيصًا لطلاب دورة ReactJS / React Native-Developer .
من الصعب تخيل تطبيق للهاتف المحمول لا توجد فيه رسوم متحركة. الرسوم المتحركة على الويب عادةً ما تكون بسيطة ، إذا كانت موجودة على الإطلاق (الحد الأقصى - صفحة واحدة تحل محل أخرى). تتطلب الرسوم المتحركة في تطبيقات الهاتف المحمول اهتمامًا مختلفًا تمامًا.
يحتوي CSS3 على واجهة برمجة تطبيقات بسيطة نسبيًا تسمح لك بعمل رسوم متحركة بسيطة. لكن في React Native ليس لديك هذه الأداة. نعم ، حتى لو كان كذلك ، فلن يكون ذلك كافياً.
فما الذي تحتاج إلى معرفته إذا كنت تعمل مع React Native وتحتاج إلى تطبيق رسوم متحركة كاملة؟
يحتوي React Native على أداة مثل Animated ، لكنه يبدو مخيفًا ... على الأقل في البداية.
لذلك ، هناك ثلاث "مجموعات من الأشياء" أو "الكتل" إذا كنت تريد ، والتي تحتاج إلى معرفته من أجل العمل مع الرسوم المتحركة.
كتلة 0: الحاجة إلى التغيير
الرسوم المتحركة هي تغيير من حالة إلى أخرى:
- الانتقال من "الخفي" إلى "المرئي" ؛
- الانتقال من دائرة إلى مربع.
فكر في ما يجب إظهاره قبل وبعد الرسوم المتحركة.
فكر في التحولات والأنماط التي تحتاج إلى تغيير لهذا:
- يجب أن يظهر الكائن مع تغيير في الشفافية ، أو يجب أن "يسقط" فقط من أعلى؟
- هل يجب أن تتحول الدائرة إلى مربع ، أم يجب أن تصبح مثلثًا في منتصف العملية؟
الكتلة 1: حالة مرئية تعرف باسم Animated.Value
من وجهة نظر منطقية ، يمكن إظهار أو إخفاء أي مكون - فهذه هي معاني "صواب" و "خطأ" ؛ لا يوجد هنا حل وسط. كحالة ، عرض ما إذا كان الكائن إما صحيحًا أو خاطئًا.
في واجهة المستخدم الجيدة ، لا تخفي الكائنات فجأة ولا تظهر فجأة. تظهر تدريجيا ، مما يساعد المستخدم على فهم الواجهة.
وبالتالي ، يصبح من الواضح أن الحالة المرئية يمكن أن تكون شيئًا ما بين الحالة الحقيقية والحالة الخاطئة.
كيف ذلك؟
يمكننا تقديم متغير آخر لتمثيل مجموعة من الحالات المرئية. نحن بحاجة إلى أن يكون هذا الرقم ، لأنه بغض النظر عن الحالة المنطقية التي لدينا ، فإن الأرقام تساعدنا على تمثيل القيم الوسيطة.
this._shown = new Animated.Value(0);
بينما يمكن أن تكون الحالة المنطقية ثنائية (أي
true أو
false ، 1 أو 0) ، فإن الحالة المرئية هي رقم الفاصلة العائمة.
كتلة 2: التحولات المعروفة باسم Animated.timing
دعنا نقول أن بعض المكونات مخفي: هذا يعني أن الحالة المنطقية لمعلمات الرؤية الخاصة بها ستكون خاطئة ، والحالة البصرية ستكون أيضًا 0.0. لكن ماذا يحدث عندما نريد إظهار عنصر؟ يجب أن تصبح الحالة المنطقية صحيحة على الفور ، بينما يجب أن تمر الحالة المرئية تدريجياً أولاً عند 0.1 ، 0.2 ، ... وأخيراً تمامًا عند 1.0.
للقيام بذلك ، نحتاج إلى طريقة لإعلام الحالة المرئية بالانتقال إلى 1.0.
وهناك مثل هذه الطرق. في الواقع ، هناك حتى عدد قليل.
أسهل طريقة هي في الأساس:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
نقول هنا أن
Animated لتغيير
_shown إلى
1.0 في الفاصل الزمني 300 مللي ثانية.
هناك انتقالات وطرق أخرى لتنظيم انتقالات متعددة ، ولكن الآن يمكننا استخدام
Animated.timing .
بلوك 3: البكسل المعروفة باسم Animated.View interpolate
التحولات
_shown لدينا بين
0.0 و
1.0 لا تعني شيئًا إذا لم نتمكن من رؤيتها. إذن كيف نفعل هذا؟
نحتاج إلى استخدام
_shown بطريقة ما لتعيين شفافية المكون
_shown .
افترض أن لدينا هذا الكود قبل البدء في العمل باستخدام الرسوم المتحركة:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
قمنا بتعيين الشفافية على
0 عندما نخفي المكون و
1 عندما نعرضه.
هل يمكننا استخدام
Animated.Value و
_shown لتحريك الانتقال من
0 إلى
1 ؟
الرسوم المتحركة الاسلوب
يمكننا استخدام أي
Animated.Value عندما نعمل مع الأنماط.
نحتاج فقط إلى تغيير
View إلى
Animated.View ، والآن لدينا ما يلي:
const opacity = this._shown;
ليس هذا مقال عن الرسوم المتحركة؟ لماذا لا تزال هناك صور؟
أكثر شيء واحد: الاستيفاء
هذه الكلمة تبدو مخيفة ، لكن الفكرة بحد ذاتها بسيطة للغاية. يسمح لنا الاستيفاء بالحفاظ على حالة مرئية خلال 0 و 1 ، ولكن مع إعطاء إمكانية "مطابقة" لشيء آخر.
لنفترض أنه بدلاً من مجرد إنشاء مكون موروث ، نود أن نترك مكوننا "يتسرب من الأعلى". ويمكننا القيام بذلك عن طريق وضع المكون المخفي أعلى 40 بكسل وتحريك حركته إلى الموضع المطلوب ، عندما تتغير الحالة إلى مرئية.
يمكننا "مطابقة" قيمنا من 0 إلى 1 مع القيم من -40 إلى 0 باستخدام استدعاء
interpolate المعتاد:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
سيؤدي هذا إلى إنشاء
Animated.Value جديدة ، ستكون قيمتها من -40 إلى 0.
بمعنى آخر ، سيكون
-40 عندما يكون
_shown هو
0 و
-20 عند
_shown =
0.5 و
0 عندما يكون
_shown 1.0 .
سر غامق: مع interpolate يمكنك أيضًا تغيير قيم الألوان والدرجات.الاستنتاجات:
- الحالة المرئية قيمة عددية ، يجب أن تعكس الانتقال من نمط إلى آخر.
Animated.Value يسمح لك بعكس القيمة العددية للحالة المرئية.Animated.timing يمكن استخدامها لنقل Animated.Value إلى رقم آخر.Animated.Value يمكن استخدامها للأنماط عند استبدال View بـ Animated.View .
يسمح لك Interpolation بتعيين نطاق
Animated.Value إلى آخر ، على سبيل المثال نطاق من
0 إلى
1 إلى
5 إلى
25 أو حتى بين الأسود والأخضر.
مصادر:
في هذه المقالة ، التقينا بدايات الرسوم المتحركة في React Native واكتسبنا فكرة عن الفكرة الأساسية. يمكنك هنا العثور على موارد لمساعدتك في استكشاف هذا الموضوع بتعمق أكبر: