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

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

فهم أحداث اللمس والإيماءات في React Native

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

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

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

يمكن لـ PanResponder API تحديد كيفية استجابة تطبيقك لهذه الإيماءات عند استلامها من خلال إعداد عمليات رد الاتصال لأي من أحداث اللمس المحددة.

تشغيل الرسوم المتحركة مع أحداث اللمس

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

مع React Native’s Animated API لتحريك المكونات المختلفة، يمكنك اكتشاف أحداث اللمس والعمل معها لتشغيل الرسوم المتحركة بناءً على تفاعلات المستخدم.

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

يستورد رد فعل ، {useState ، useRef} من'تتفاعل';
يستورد {View، TouchableOpacity، Animated} من"رد فعل أصلي";
مقدار ثابت AnimatedButton = () => {
// استخدم useRef للوصول إلى ملف Animated. مثيل القيمة
مقدار ثابت opacityValue = useRef (جديد مفعم بالحيوية. قيمة(1)).حاضِر؛
مقدار ثابت handlePress = () => {
 Animated.timing (opacityValue ، {
 إلى قيمة: 0.5,
 مدة: 500,
 useNativeDriver: حقيقي,
 }).يبدأ()؛
 }
يعود (

العتامة: opacityValue}}>

 {/ * مكون الزر الخاص بك * /}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
يصدّرتقصير زر متحرك

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

تشغيل الرسوم المتحركة مع تغييرات الحالة

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

على سبيل المثال ، يمكنك استخدام ملف useState و useEffect خطافات لتشغيل رسم متحرك مثل هذا:

يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {عرض ، متحرك ، زر ، نص} من"رد فعل أصلي";
مقدار ثابت MyComponent = () => {
مقدار ثابت [fadeAnim، setFadeAnim] = useState (جديد مفعم بالحيوية. قيمة(0));
مقدار ثابت [text، setText] = useState ('مرحبا بالعالم');
 useEffect (() => {
// استخدم الخطاف useEffect لتشغيل الرسوم المتحركة عند حالة "النص"
// التغييرات
 startAnimation () ،
 }، [نص])؛
مقدار ثابت بدء الرسوم المتحركة = () => {
 Animated.timing (
 تتلاشى
 {
 إلى قيمة: 1,
 مدة: 1000,
 useNativeDriver: حقيقي,
 }
 ).يبدأ()؛
 };
يعود (

العتامة: fadeAnim}}>
{نص} </Text>
 </Animated.View>
"تغيير النص" onPress = {() => setText ("نص جديد")} />
 </View>
 );
};
يصدّرتقصير MyComponent؛

في هذا المثال ، فإن ملف useEffect الخطاف سيؤدي إلى تشغيل الرسوم المتحركة كلما كانت قيمة الحالة نص التغييرات. ال useEffect يأخذ hook دالة رد الاتصال كوسيطة أولى لها ، وسيتم تشغيلها كلما تم تحديد التبعيات في الوسيطة الثانية (في هذه الحالة ، [نص]) يتغير. داخل useEffect خطاف، بدء الرسوم المتحركة () يعمل ويطلق الرسوم المتحركة المتلاشية.

ستعمل الرسوم المتحركة الديناميكية على إضفاء الحيوية على تطبيقك

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

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