كيفية إنشاء رسوم متحركة مستمرة في React Native باستخدام Animated.loop ()

واحدة من الميزات الرئيسية لواجهة برمجة تطبيقات الرسوم المتحركة لـ React Native هي ملف Animated.loop () الطريقة التي يمكنك من خلالها إنشاء رسوم متحركة مستمرة تتكرر إلى أجل غير مسمى.

سنستكشف كيفية استخدام طريقة Animated.loop () لإنشاء رسوم متحركة مستمرة في React Native ومعرفة كيفية تخصيص هذه الرسوم المتحركة وتحسينها.

فهم طريقة Animated.loop ()

لاستخدام طريقة Animated.loop () ، تحتاج أولاً إلى إنشاء ملف مفعم بالحيوية. قيمة هدف. يتم تحديث هذه القيمة في كل إطار في حلقة الرسوم المتحركة وسيتم استخدامها لتحريك المكون الهدف.

بمجرد الرسوم المتحركة. تم إنشاء كائن القيمة ، يمكنك تمريره إلى طريقة Animated.loop () جنبًا إلى جنب مع كائن تكوين الرسوم المتحركة الذي يحدد سلوك الحركة.

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

تكرار الرسوم المتحركة الخاصة بك

بشكل افتراضي ، تُنشئ طريقة Animated.loop () حلقة لا نهائية من الرسوم المتحركة ، مما يعني أن الحركة ستستمر في التكرار حتى يتم إيقافها يدويًا. ومع ذلك ، يمكنك تحديد مدة حلقة الرسم المتحرك عن طريق تعيين

التكرارات الخاصية في كائن تكوين الرسوم المتحركة.

المثال التالي الذي يوضح كيفية استخدام Animation.loop () لإنشاء حركة دوران متكررة:

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {StyleSheet، View، Animated، Image} من"رد فعل أصلي";
يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت [spinValue] = useState (جديد مفعم بالحيوية. قيمة(0));
 useEffect (() => {
مقدار ثابت تدور = spinValue.interpolate ({
 نطاق الإدخال: [0, 1],
 مجموعة الانتاج: ["0 درجة", "360 درجة"],
 });
 Animated.loop (
 Animated.timing (
 spinValue
 {
 إلى قيمة: 1,
 مدة: 2000,
 useNativeDriver: حقيقي,
 }
 )
 ).يبدأ()؛
 }, []);
يعود (

 النمط = {{ عرض: 200, ارتفاع: 200, تحول: [{ استدارة: spinValue}]}}
 المصدر = {{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 ثني: 1,
 العناصر: 'مركز',
 تبرير المحتوى: 'مركز',
 },
});

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

لتعيين مدة الحلقة ، مررنا a مدة الخاصية للكائن Animated.timing () ، والتي ستحدد المدة التي سيتم خلالها تشغيل الرسم المتحرك قبل التكرار. قمنا بتعيين خاصية المدة على 2000 ، مما يعني ثانيتين قبل إعادة التشغيل.

يمكنك أيضًا تعيين عدد مرات تكرار الرسم المتحرك عن طريق تمرير التكرارات الخاصية إلى طريقة الحلقة ().

على سبيل المثال ، افترض أنك تريد تكرار الرسم المتحرك خمس مرات قبل التوقف. في هذه الحالة ، يمكنك استدعاء Animated.loop () بامتداد التكرارات: 5. إذا كنت تريد تكرار الرسم المتحرك إلى أجل غير مسمى ، فيمكنك حذف ملف التكرارات ممتلكات بالكامل.

باستخدام Animation.loop () ، وتحديد مدته ، و تطبيق نمط CSS بشكل صحيح إلى كائن العرض الذي تم إرجاعه ، يمكنك إنشاء رسوم متحركة ذات حلقات سلسة في React Native.

العمل مع الرسوم المتحركة المعقدة

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

إليك نصيحتين ستساعدك عند تكرار الرسوم المتحركة المعقدة في React Native:

1. قسم الرسم المتحرك إلى أجزاء أصغر

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

2. استخدم طريقة Animated.sequence ()

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

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

تجربة مع الرسوم المتحركة الخاصة بك

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