إتقان الرسوم المتحركة السريعة باستخدام مكتبة React هذه وهذه النصائح المفيدة.
يمكن أن تساعدك مكتبة React Native's Animated API في إنشاء رسوم متحركة ديناميكية وسلسة بجهد ضئيل.
تعرف على كيفية إنشاء رسوم متحركة بتأثير يشبه الربيع ، ثم تعرف على كيفية التحكم في مدتها وسرعتها ، وتطبيقها في سيناريوهات واقعية.
ما هي الرسوم المتحركة الديناميكية؟
الرسوم المتحركة الديناميكية هي رسوم متحركة لا تتم فيها برمجة حركات الكائنات المتحركة مسبقًا. يمكنك بدء تشغيلهم استجابةً لتفاعل المستخدم أو التغييرات التي تطرأ على البيئة. هذه التقنية هي الأكثر شيوعًا في لعبة فيديو الرسوم المتحركةأو تطبيقات الوسائط الاجتماعية أو غيرها من أشكال الوسائط التفاعلية.
يمكن أن توفر الرسوم المتحركة الديناميكية تجربة غامرة وجذابة للمستخدمين ، لأنها تسمح بحركات غير متوقعة وسريعة الاستجابة يمكن أن تتغير بناءً على عدة عوامل.
أصبحت الرسوم المتحركة في تطبيقات الأجهزة المحمولة ، على مر السنين ، أكثر تعقيدًا. تم تطوير واجهة برمجة التطبيقات المتحركة الافتراضية من React Native لاستيعاب هذه التعقيدات. ال Animated.spring () الطريقة التي توفرها واجهة برمجة التطبيقات يمكنها تحريك كائنات React الأصلية ، مما يؤدي إلى إنشاء تأثير ديناميكي.
السيطرة على الرسوم المتحركة
عند استخدام ملف Animated.spring () الطريقة ، ستحتاج إلى التحكم في الرسوم المتحركة للتأكد من أنها تتصرف كما تريد. يوفر Animated مجموعة من الأساليب للتحكم يدويًا في الرسوم المتحركة React Native ومعالجتها.
واحدة من تلك الأساليب قف()، مما يؤدي إلى توقف الرسم المتحرك عند قيمته الحالية. هذه الطريقة مفيدة عندما تحتاج إلى إلغاء رسم متحرك أو إعادة تعيينه إلى حالته الأولية.
على سبيل المثال:
مقدار ثابت stopAnimation = () => {
position.stop (قيمة => {
position.setValue (0);
});
};
لاحظ كيف يمكنك استخدام ملف setValue () طريقة لإعادة قيمة المركز إلى حالته الأولية 0.
طريقة أخرى متاحة لك هي إعادة ضبط()، والذي يعيد الرسم المتحرك إلى حالته الأولية. هذه الطريقة مفيدة عندما تحتاج إلى إعادة تشغيل رسم متحرك.
تطبيقات العالم الحقيقي
يمكنك استكشاف الاستخدام العملي لملف Animated.spring () طريقة بناء الرسوم المتحركة البسيطة. ستسقط الكرة المستديرة على سطح عندما يتفاعل معها المستخدم ، ثم ترتد إلى الهواء بعد ذلك. يجب أن يكون لديك بالفعل مشروع محلي تفاعلي يمكنك العمل معه.
أولاً ، قم بإنشاء متغير حالة لتتبع موضع الكرة:
يستورد رد فعل ، {useState} من'تتفاعل';
يستورد { مفعم بالحيوية } من"رد فعل أصلي";
مقدار ثابت التطبيق = () => {
مقدار ثابت [position، setPosition] = useState (جديد مفعم بالحيوية. قيمة(0));
يعود (تحول: [{ ترجم: position}]}}>
{/ * عنصر الكرة هنا * /}
</Animated.View>
);
};
يستخدم مفعم بالحيوية. قيمة لإنشاء متغير حالة يسمى موضع من شأنها تتبع الوضع الرأسي للكرة. لف منظر مكون في مفعم بالحيوية. منظر حتى تتمكن من تطبيق الرسوم المتحركة عليه.
بعد ذلك ، قم بإنشاء وظيفة الرسوم المتحركة التي ستجعل الكرة تسقط وترتد:
مقدار ثابت بدء الرسوم المتحركة = () => {
Animated.spring (الموقف ، {
إلى قيمة: 300,
احتكاك: 1,
توتر: 10,
useNativeDriver: حقيقي,
}).يبدأ(() => {
Animated.spring (الموقف ، {
إلى قيمة: 0,
احتكاك: 1,
توتر: 10,
useNativeDriver: حقيقي,
}).يبدأ()؛
});
};
يستخدم Animated.spring () لإنشاء رسم متحرك ينقل الكرة من موضعها الأولي وهو 0 إلى الموضع النهائي 300. حدد احتكاك و توتر القيم للتحكم في تأثير ارتداد الكرة أثناء الإعداد useNativeDriver ل حقيقي لتحسين الأداء.
يمكنك بعد ذلك تنفيذ الكود لتشغيل الرسوم المتحركة عندما يتفاعل المستخدم مع الكرة:
يعود (
تحول: [{ ترجم: position}]}}>
{/ * عنصر الكرة هنا * /}
</Animated.View>
</TouchableWithoutFeedback>
);
هذا الرمز يلتف مفعم بالحيوية. منظر مكون في ملموس بدون ردود فعل بحيث يتم تشغيل الرسم المتحرك عندما يضغط المستخدم على الكرة. يمكنك أيضًا تشغيل الرسم المتحرك عندما يتصاعد المكون عن طريق استدعاء ملف بدء الرسوم المتحركة () وظيفة داخل React's useEffect () خطاف.
باستخدام هذا الرمز ، يجب أن يكون لديك رسم متحرك للكرة المتساقطة تم إنشاؤه باستخدام Animated.spring ().
الرسوم المتحركة الديناميكية في React Native
لقد رأيت كيفية تنفيذ الرسوم المتحركة للكرة الساقطة باستخدام Animated.spring () ، ولكن هناك العديد من الطرق الأخرى التي يمكنك استخدامها لإنشاء رسوم متحركة ديناميكية.
على سبيل المثال ، يمكنك استخدام Animated.spring () لإنشاء رسوم متحركة تحاكي الحركات الأخرى القائمة على الفيزياء ، مثل التأرجح أو تدوير الكائنات.
من خلال دمج Animated.spring () مع وظائف الرسوم المتحركة الأخرى ، مثل Animated.timing () أو Animated.sequence () ، يمكنك إنشاء رسوم متحركة معقدة وسلسة تعزز تجربة المستخدم.