كيفية إنشاء تفاعل أفضل للرسوم المتحركة الأصلية

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

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

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

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

تماما مثل مكتبة الرسوم المتحركة المدمجة في React، تعد Animated API جزءًا من مكتبة الرسوم المتحركة المستندة إلى JavaScript. يوفر Animated مجموعة من الفئات والطرق التي تتيح لك إنشاء رسوم متحركة سلسة وسلسة. هناك العديد من الخيارات الرائعة الأخرى لإنشاء رسوم متحركة React Native ، مثل Reanimated.

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

ضبط مدة الرسوم المتحركة

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

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

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

مع ال Animation.timing () الطريقة ، يمكنك إنشاء رسوم متحركة مخصصة بوقت لتناسب احتياجاتك.

فيما يلي مثال على كيفية إضافة مدة مخصصة إلى رسم متحرك بسيط يتلاشى:

يستورد رد ، {useRef} من'تتفاعل';
يستورد {رسوم متحركة ، عرض} من"رد فعل أصلي";
مقدار ثابت FadeInView = (الدعائم) => {
مقدار ثابت fadeAnim = useRef (جديد مفعم بالحيوية. قيمة(0)).حاضِر؛ 
 React.useEffect (تأثير)() => {
 Animated.timing (
 تتلاشى
 {
 إلى قيمة: 1,
 مدة: 2000, // تعيين مدة مخصصة
 useNativeDriver: حقيقي,
 }
 ).يبدأ()؛
 } ، [fadeAnim]) ؛
يعود (
 النمط = {{
... الدعائم على غرار ،
 العتامة: fadeAnim ،
 }}
 >
 {props.children}
 </Animated.View>
 );
}
يصدّرتقصيروظيفةبرنامج() {
يعود (
ثني: 1, محاذاة العناصر: 'مركز', تبرير المحتوى: 'مركز'}}>
عرض: 250, ارتفاع: 50, لون الخلفية: "مسحوق أزرق"}}>
حجم الخط: 28, محاذاة: 'مركز', هامِش: 10}}> التلاشي في</Text>
 </FadeInView>
 </View>
 );
}

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

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

استخدم وظائف التيسير

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

خذ هذا المثال لاستخدام وظيفة التخفيف:

يستورد رد ، {useRef} من'تتفاعل';
يستورد {رسوم متحركة ، عرض} من"رد فعل أصلي";
مقدار ثابت FadeInView = (الدعائم) => {
مقدار ثابت fadeAnim = useRef (جديد مفعم بالحيوية. قيمة(0)).حاضِر؛ 
 React.useEffect (تأثير)() => {
 Animated.timing (
 تتلاشى
 {
 إلى قيمة: 1,
 مدة: 2000,
 التخفيف: Animated.easeOut ، // استخدم وظيفة التخفيف هنا
 useNativeDriver: حقيقي,
 }
 ).يبدأ()؛
 } ، [fadeAnim]) ؛
يعود (
 النمط = {{
... الدعائم على غرار ،
 العتامة: fadeAnim ،
 }}
 >
 {props.children}
 </Animated.View>
 );
}
يصدّرتقصيروظيفةبرنامج() {
يعود (
ثني: 1, محاذاة العناصر: 'مركز', تبرير المحتوى: 'مركز'}}>
عرض: 250, ارتفاع: 50, لون الخلفية: "مسحوق أزرق"}}>
حجم الخط: 28, محاذاة: 'مركز', هامِش: 10}}> التلاشي للداخل </Text>
 </FadeInView>
 </View>
 );
}

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

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

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

تساعد الإطارات الرئيسية في الرسوم المتحركة المعقدة

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

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

لإنشاء رسم متحرك أساسي للإطارات الرئيسية ، ستحتاج إلى تحديد إطارات المفاتيح التي تريد تحريكها وبين المدة الإجمالية.

على سبيل المثال ، لنفترض أنك تريد تحريك مربع من موضع البداية (0 ، 0) إلى موضع النهاية (100 ، 100) خلال فترة ثانية واحدة.

يمكنك إنشاء مجموعة من الإطارات الرئيسية مثل هذا:

مقدار ثابت الإطارات الرئيسية = [
 { x: 0, ذ: 0 },
 { x: 50, ذ: 50 },
 { x: 100, ذ: 100 },
];

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

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

استفد من الجهاز مع تسريع الأجهزة

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

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

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