يمكن أن تكون الرسوم المتحركة طريقة رائعة لتحسين تجربة المستخدم لتطبيق React الخاص بك. يمكن أن تساعد في جعل التفاعلات أكثر سلاسة ، ويمكنها أيضًا تقديم ملاحظات مرئية أو لفت الانتباه إلى عنصر معين.
هناك العديد من الطرق التي يمكنك من خلالها العمل مع الرسوم المتحركة لـ CSS باستخدام React ، من حل أصلي إلى مكتبات الطرف الثالث.
لماذا استخدام الرسوم المتحركة في React؟
هناك العديد من الأسباب التي قد تجعلك ترغب في استخدام الرسوم المتحركة في تطبيق React الخاص بك. تتضمن بعض الأسباب الأكثر شيوعًا ما يلي:
- جعل التفاعلات تبدو طبيعية أكثر. يمكن أن تساعد الرسوم المتحركة في جعل تفاعلات المستخدم تبدو طبيعية وسلسة. على سبيل المثال ، إذا كنت تستخدم مكون تبديل ، فقد ترغب في تحريك زر التبديل بين حالتي "تشغيل" و "إيقاف". مثال آخر هو أشرطة التقدم ، يمكنك ذلك إنشاء شريط تقدم متحرك لصفحات تطبيق رد الفعل الخاص بك.
- تقديم ملاحظات بصرية. يمكن أن توفر الرسوم المتحركة ملاحظات مرئية للمستخدم. على سبيل المثال ، إذا نقر المستخدم على زر ، فقد ترغب في تحريك الزر للإشارة إلى أن التطبيق قد سجل هذا الإجراء.
- توجيه انتباه المستخدم. يمكن أن توجه الرسوم المتحركة انتباه المستخدم إلى عنصر معين. على سبيل المثال ، إذا كان لديك مربع حوار مشروط يظهر على الشاشة ، فقد ترغب في استخدام الرسوم المتحركة لجذب انتباه المستخدم إليها.
- خلق شعور بالإلحاحيمكن للرسوم المتحركة أن تخلق إحساسًا بالإلحاح أو الأهمية. على سبيل المثال ، إذا كان لديك مكون مؤقت يقوم بالعد التنازلي ، فقد ترغب في استخدام الرسوم المتحركة لتعكس الإلحاح مع اقتراب الموعد النهائي.
توجد عدة طرق لإضافة الرسوم المتحركة إلى مكونات React. الثلاثة التي ستتعلم عنها هنا هي الرسوم المتحركة ذات النمط المضمّن ، ومكتبة تفاعلات الرسوم المتحركة ، ومكتبة رد الفعل البسيط المتحرك.
ابدأ بـ إنشاء تطبيق رد فعل أساسي، ثم اتبع الطريقة التي تختارها.
الطريقة الأولى: استخدام الرسوم المتحركة ذات النمط المضمّن
على سبيل المثال ، لنفترض أنك تريد تحريك أحد المكونات بحيث يتلاشى عند النقر فوق الزر. يمكنك القيام بذلك باستخدام الكود التالي:
يستورد رد فعل ، {مكون} من 'تتفاعل'؛فصلتتلاشى في الخروجيمتدعنصر{
البناء(دعائم) {
ممتاز(الدعائم) ؛هذا.state = {
مرئي: خطأ شنيع
};
}يجعل() {
مقدار ثابت الأنماط = {
العتامة: هذا.ولاية.مرئي? 1: 0,
انتقال: 'عتامة 2 ثانية'
};يعود (
<شعبة>
<أسلوب div = {styles}>
مرحبا بالعالم!
</div>
<زر onClick = {this.toggleVisibility}>
تبديل
</button>
</div>
);
}toggleVisibility = () => {
هذا.setState (prevState => ({
مرئي: !الدولة السابقة.مرئي
}));
}
}
يصدّرتقصير تتلاشى في الخروج؛
في هذا المثال ، يحتوي كائن النمط على خصائص عتامة وانتقال. التعتيم هو 0 عندما يكون المكون غير مرئي ، و 1 عندما يكون. خاصية الانتقال هي "opacity 2s" ، والتي ستؤدي إلى انتقال العتامة لأكثر من ثانيتين عندما تتغير.
يقوم الزر بتبديل رؤية المكون. عندما ينقر شخص ما على الزر ، يتم تحديث متغير الحالة isVisible وسيتلاشى المكون أو يتلاشى اعتمادًا على حالته الحالية.
الطريقة الثانية: استخدام مكتبة الرسوم المتحركة المتفاعلة
هناك طريقة أخرى لإضافة الرسوم المتحركة إلى مكونات React وهي استخدام مكتبة مثل الرسوم المتحركة المتفاعلة. توفر هذه المكتبة مجموعة من الرسوم المتحركة المحددة مسبقًا والتي يمكنك استخدامها في مكونات React الخاصة بك.
لاستخدام الرسوم المتحركة المتفاعلة ، ستحتاج أولاً إلى تثبيت المكتبة:
npm ثَبَّتَ رد فعل الرسوم المتحركة --يحفظتحتاج أيضًا إلى تثبيت أفروديت ، وهو تبعية للرسوم المتحركة المتفاعلة:
npm ثَبَّتَ أفروديت --يحفظبمجرد تثبيت المكتبات ، يمكنك استيراد الرسوم المتحركة التي تريد استخدامها:
يستورد {fadeIn، fadeOut} من "رد فعل الرسوم المتحركة" ؛بعد ذلك ، يمكنك استخدام الرسوم المتحركة في المكونات الخاصة بك:
يستورد رد فعل ، {مكون} من 'تتفاعل'؛
يستورد {StyleSheet، css} من "أفروديت" ؛
يستورد {fadeIn، fadeOut} من "رد فعل الرسوم المتحركة" ؛مقدار ثابت الأنماط = StyleSheet.create ({
اختفي: {
الاسم: fadeIn ،
مدة الرسوم المتحركة: '2 ثانية'
},
تتآكل: {
الاسم: fadeOut ،
مدة الرسوم المتحركة: '2 ثانية'
}
});فصلتتلاشى في الخروجيمتدعنصر{
البناء(دعائم) {
ممتاز(الدعائم) ؛هذا.state = {
مرئي: خطأ شنيع
};
}يجعل() {
مقدار ثابت className = هذا.state.isVisible؟ css (styles.fadeIn): css (styles.fadeOut) ؛يعود (
<شعبة>
<div className = {className}>
مرحبا بالعالم!
</div>
<زر onClick = {this.toggleVisibility}>
تبديل
</button>
</div>
);
}toggleVisibility = () => {
هذا.setState (prevState => ({
مرئي: !الدولة السابقة.مرئي
}));
}
}
يصدّرتقصير تتلاشى في الخروج؛
يبدأ هذا المثال باستيراد حركات fadeIn و fadeOut من مكتبة الرسوم المتحركة المتفاعلة. ثم يقوم بتعريف كائن الأنماط مع الرسوم المتحركة fadeIn و fadeOut ، وتعيين مدة الرسوم المتحركة على ثانيتين.
سيقوم الزر بتبديل رؤية المكون. عندما ينقر شخص ما عليه ، سيتم تحديث متغير الحالة isVisible ، وسيتلاشى المكون أو يخبو اعتمادًا على حالته الحالية.
الطريقة الثالثة: استخدام مكتبة رد الفعل البسيط
توفر مكتبة React-simple-animate طريقة بسيطة لإضافة حركات إلى مكونات React. يوفر واجهة برمجة تطبيقات تعريفية تجعل من السهل تحديد الرسوم المتحركة المعقدة.
لاستخدام المكتبة ، تحتاج إلى تثبيتها أولاً:
npm ثَبَّتَ رد فعل بسيط حركي --يحفظبعد ذلك ، يمكنك استخدامه في المكونات الخاصة بك:
يستورد رد فعل ، {مكون} من 'تتفاعل'؛
يستورد {تحريك ، تحريك إطارات المفاتيح} من "رد فعل بسيط حركي" ؛فصلبرنامجيمتدعنصر{
يجعل() {
يعود (
<شعبة>
<تحريك
يلعب
يبدأ={{
العتامة: 0
}}
نهاية={{
العتامة: 1
}}
>
<شعبة>
مرحبا بالعالم!
</div>
</Animate>
<تحريك الإطارات الرئيسية
يلعب
المدة = {2}
الإطارات الرئيسية = {[
{عتامة: 0 ، تحويل: 'translateX (-100px)' },
{عتامة: 1 ، تحويل: 'translateX (0 بكسل)' }
]}
>
<شعبة>
مرحبا بالعالم!
</div>
</AnimateKeyframes>
</div>
);
}
}
يصدّرتقصير برنامج؛
ال تحريك يتلاشى المكون في عنصر div. يبدأ بعتامة 0 وينتهي بعتامة 1. يتم تعيين خاصية التشغيل على "صواب" ، مما يؤدي إلى تشغيل الرسم المتحرك تلقائيًا عند تثبيت المكون.
ال تحريك الإطارات الرئيسية يقوم المكوِّن بتحريك عنصر div خلال ثانيتين. تحدد مصفوفة الإطارات الرئيسية حالتي البداية والنهاية للرسوم المتحركة. يحتوي الإطار الرئيسي الأول على عتامة 0 وقيمة translateX تبلغ -100 بكسل. يحتوي الإطار الرئيسي الثاني على عتامة 1 وقيمة translateX تبلغ 0 بكسل.
زيادة تفاعل المستخدم مع الرسوم المتحركة
أنت الآن تعرف بعض الطرق التي يمكنك من خلالها استخدام الرسوم المتحركة في تطبيق React الخاص بك. يمكنك استخدام الرسوم المتحركة لزيادة تفاعل المستخدم مع تطبيقك.
على سبيل المثال ، قد ترغب في استخدام الرسوم المتحركة لمكافأة المستخدم لإكمال مهمة ما. قد يكون هذا شيئًا بسيطًا مثل رسم متحرك قصير "دوار" أو رسم متحرك أكثر تعقيدًا يتم تشغيله عندما يكمل المستخدم مستوى في إحدى الألعاب.
يمكنك أيضًا نشر تطبيق React الخاص بك على الويب مجانًا مع خدمات مثل صفحات Github أو Heroku.
