الشروع في استخدام الرسوم المتحركة في React Native

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

استكشف الرسوم المتحركة لـ React Native واكتشف كيف يمكنك البدء في إنشاء رسوم متحركة جميلة وسلسة.

كيف تعمل الرسوم المتحركة الأصلية للتفاعل؟

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

إن قابلية تنقل React Native تجعلها تستحق الاستخدام إذا كنت تستهدف عدة أنظمة أساسية. تتمثل إحدى أقوى ميزاته في القدرة على إنشاء رسوم متحركة جميلة لتطبيقات الأجهزة المحمولة.

يمكنك تحريك كائن React Native ببساطة عن طريق تغيير حالة موضع المكون المطلوب.

على سبيل المثال:

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {عرض ، StyleSheet} 





instagram viewer

من"رد فعل أصلي";
مقدار ثابت التطبيق = () => {
// تهيئة الدولة لتتبع موضع الصندوق
مقدار ثابت [boxPosition، setBoxPosition] = useState (0);
// استخدم الخطاف useEffect لتحديث موضع الصندوق كل ثانية واحدة
 useEffect (() => {
مقدار ثابت الفاصل الزمني = setInterval (() => {
// قم بتحديث موضع الصندوق بإضافة 10 إلى الوضع الحالي
 setBoxPosition (السابق => الوظيفة السابقة + 10);
 }, 1000);
// إرجاع دالة تنظيف لمسح الفاصل الزمني عند المكون
// يحذف
يعود() => clearInterval (فاصل زمني) ؛
 }, []);
// اضبط موضع الصندوق باستخدام متغير الحالة في النمط المضمن
مقدار ثابت boxStyle = {
 تحول: [{ ترجم: boxPosition}]
 };
يعود (


 </View>
 );
};
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 ثني: 1,
 العناصر: 'مركز',
 تبرير المحتوى: 'مركز',
 },
 صندوق: {
 عرض: 100,
 ارتفاع: 100,
 لون الخلفية: 'أزرق',
 },
});
يصدّرتقصير برنامج؛

يعرض هذا الرمز مربعًا أزرق يتحرك لأسفل كل ثانية. الرسوم المتحركة تعمل باستخدام ملف useEffect ربط لإنشاء مؤقت يقوم بتحديث ملف صندوق متغير الحالة كل ثانية واحدة.

على الرغم من أن هذا قد ينجح في بعض المواقف ، إلا أن هذا ليس الخيار الأفضل. تعمل تحديثات الحالة في React Native بشكل غير متزامن ، لكن الرسوم المتحركة تعتمد على تحديثات الحالة المتزامنة لتعمل بشكل صحيح. سيؤدي تنفيذ الرسوم المتحركة الخاصة بك بشكل غير متزامن إلى عدم ظهور تحديثات الحالة على الفور في الإخراج المقدم للمكون ، مما يؤدي إلى العبث بتوقيت الرسوم المتحركة الخاصة بك.

هناك العديد من مكتبات الرسوم المتحركة مثل مفعم بالحيوية مكتبة، رد فعل - أصلية - إنعاش، و رد فعل أصلي متحرك لبناء رسوم متحركة عالية الأداء في React Native. كل من مكتبات الرسوم المتحركة هذه تسحق مشكلة تحديثات الحالة غير المتزامنة وهي مثالية تمامًا.

واجهة برمجة تطبيقات React Native Animated

الرسوم المتحركة هي واجهة برمجة تطبيقات توفرها React Native. يمكنك استخدامه لإنشاء رسوم متحركة سلسة تستجيب لتفاعلات المستخدم أو تغييرات الحالة.

تتيح لك واجهة برمجة التطبيقات المتحركة إنشاء قيم متحركة يمكنك إقحامها وتعيينها إلى خصائص نمط مختلفة لمكوناتك. يمكنك بعد ذلك تحديث هذه القيم بمرور الوقت باستخدام طرق رسوم متحركة متنوعة. سيتم بعد ذلك تحديث أنماط المكونات الخاصة بك مع تغير القيم المتحركة ، مما ينتج عنه رسوم متحركة سلسة.

الرسوم المتحركة تعمل بشكل جيد مع نظام تخطيط React Native. لهذا السبب ، سيتم دمج الرسوم المتحركة الخاصة بك بشكل صحيح مع بقية واجهة المستخدم الخاصة بك للحصول على مظهر أفضل.

لبدء استخدام الرسوم المتحركة في مشروع React Native الخاص بك ، تحتاج إلى استيراد ملف مفعم بالحيوية وحدة منرد فعل أصلي " في التعليمات البرمجية الخاصة بك:

يستورد { مفعم بالحيوية } من"رد فعل أصلي";

مع الرسوم المتحركة المستوردة ، يمكنك البدء في إنشاء الرسوم المتحركة. للقيام بذلك ، أولاً ، قم بإنشاء قيمة متحركة ستعالجها خلال الرسم المتحرك:

مقدار ثابت animatedValue = جديد مفعم بالحيوية. قيمة(0);

ال مفعم بالحيوية. قيمة هي فئة في React Native Animated API تمثل قيمة قابلة للتغيير. يمكنك تهيئته بقيمة أولية ، ثم تحديثه بمرور الوقت باستخدام طرق الرسوم المتحركة المختلفة التي توفرها Animated API ، مثل.توقيت(), .ربيع()، و .فساد()، من خلال تحديد مدة الحركة ووظيفة التخفيف والمعلمات الأخرى.

القيمة المتحركة تشبه قيمة الحالة في مكون React.

يمكنك تهيئة ملف مفعم بالحيوية. قيمة بقيمة الحالة الأولية للمكون ، ثم قم بتحديثه بمرور الوقت باستخدام setState طريقة.

على سبيل المثال ، لديك مكون له قيمة حالة عدد، والذي يمثل عدد المرات التي نقر فيها المستخدم على هذا الزر.

يمكنك إنشاء ملف مفعم بالحيوية. قيمة وتهيئته بقيمة الحالة الأولية لـ عدد:

مقدار ثابت التطبيق = () => {
مقدار ثابت [count، setCount] = useState (0);
مقدار ثابت animatedValue = جديد مفعم بالحيوية. القيمة (العدد) ؛
};

ثم ، عندما يكون ملف عدد تحديثات قيمة الحالة ، يمكنك التحديث الرسوم المتحركة أيضاً:

مقدار ثابت handlebuttonClick = () => {
 setCounter (عدد + 1);
 Animated.timing (animatedValue، {
 toValue: عدد + 1,
 مدة: 500,
 useNativeDriver: حقيقي
 }).يبدأ()؛
};

يتم تحديث هذا المثال الرسوم المتحركة باستخدام Animated.timing () الطريقة كلما نقر المستخدم على الزر. ال الرسوم المتحركة تدفع الرسوم المتحركة ، وتغير قيمتها أكثر من 500 مللي ثانية.

عن طريق الارتباط مفعم بالحيوية. قيمة لقيمة الحالة بهذه الطريقة ، يمكنك إنشاء رسوم متحركة تستجيب للتغييرات في حالة المكون الخاص بك.

أنت الآن تفهم كيفية التعامل مع قيمة متحركة ، يمكنك بعد ذلك المضي قدمًا إلى Interpolate القيمة المتحركة وتعيينها إلى خاصية نمط للمكون الخاص بك باستخدام Animated.interpolate () طريقة.

على سبيل المثال:

مقدار ثابت العتامة = animatedValue.interpolate ({
 نطاق الإدخال: [0, 1],
 مجموعة الانتاج: [0, 1]
});
يعود (

 {/ * محتوى المكون الخاص بك * /}
 </View>
);

سيؤدي هذا إلى إنشاء رسم متحرك يتلاشى تدريجيًا في ملف منظر المكون حيث تتغير القيمة المتحركة من 0 إلى 1.

التعرف على أنواع الرسوم المتحركة

يعد فهم أنواع الرسوم المتحركة وكيفية عملها أمرًا مهمًا لإنشاء رسوم متحركة جيدة.

باستخدام useNativeDriver الخيار مع الرسوم المتحركة يحسن الأداء. يتيح لك هذا الخيار إلغاء تحميل الرسوم المتحركة إلى مؤشر ترابط واجهة المستخدم الأصلي. يمكنه تحسين الأداء بشكل كبير عن طريق تقليل كمية معالجة JavaScript المطلوبة.

ومع ذلك ، لا تدعم جميع أنواع الرسوم المتحركة برنامج التشغيل الأصلي. قد تتسبب محاولة استخدام برنامج التشغيل الأصلي مع الرسوم المتحركة التي تتضمن تغييرات في اللون أو التخطيط في حدوث سلوك غير متوقع.

بالإضافة إلى ذلك ، يمكن أن تتسبب الرسوم المتحركة التي تتضمن تسلسلات معقدة في حدوث مشكلات كبيرة في الأداء على الأجهزة ذات قدرة المعالجة أو الذاكرة المحدودة. قد تكون عيوب الأداء هذه ملحوظة أيضًا إذا كان مشروع React Native الخاص بك يعمل بإصدار أقل لا يعمل دعم محرك هيرميس.

يمكن أن يساعدك فهم نقاط القوة والقيود الخاصة بأنواع الرسوم المتحركة المختلفة على اختيار الطريقة الصحيحة لحالة الاستخدام الخاصة بك.

احصل على الراحة مع React Native Animations

تعد الرسوم المتحركة أداة قوية لإنشاء واجهات مستخدم جذابة وديناميكية في تطبيقات React Native. توفر واجهة برمجة التطبيقات المتحركة طريقة مرنة وفعالة لإنشاء رسوم متحركة متسلسلة بسيطة ومعقدة.

ومع ذلك ، من المهم مراعاة تأثير أداء الرسوم المتحركة واختيار الأسلوب والمكتبة المناسبين لاستخدامهما في موقفك.