نحو 5 دقائق · React 16.8+ · React DOM
ابدأ
من التثبيت إلى الإيماءات وحركة الدخول والخروج في ست خطوات. كل خطوة مكوّن صغير يعمل.
التثبيت
ليس لـ Animated تبعيات وقت التشغيل. React 16.8+ تبعية نظيرة.
نقطة دخول الحزمة معلَّمة بـ 'use client'. في App Router في Next.js يمكن لتخطيط الخادم أن يعرض
AnimatedProvider؛ واستخدم الخطّافات وAnimated.<tag>داخل Client Components.npm install @kkwaenggwari/animatedيُحَلّ الاستيراد
@kkwaenggwari/animatedفي محرّرك.حرّك قيمتك الأولى
يمتلك
useAnimatedValue(1)رقمًا حيًا طوال عمر المكوّن. ضعه مباشرة فيstyle: يصبح متغيّر CSS، فلا يعرض React أثناء تغيّره.يحرّكه
timing(value, { toValue, duration }).start(). والضغط مجددًا في منتصف الطريق يبدأ من الشفافية الحالية.جارٍ تجهيز المثال…
يتلاشى المربع ثم يعود، والضغطة الثانية في المنتصف تعكس الاتجاه من حيث هو.
اشتق مخرجات كثيرة من قيمة واحدة
يحوّل
interpolateالقيمة إلى أطوال أو زوايا أو أرقام. من دون easing يصبحcalc()دقيقًا للمتغيّر نفسه، فتكلّف خمسة مسارات ما يكلّفه مسار واحد.نطاقات إدخال مختلفة للقيمة نفسها تصنع تتابعًا من دون خمس حركات منفصلة.
جارٍ تجهيز المثال…
ضغطة واحدة تحرّك خمسة مسارات بتتابع؛ وتغيير الانتشار لا يغيّر إلا النطاقات.
صِف وجهة
يعرض
Animated.buttonزرًا عاديًا.seedهو الإطار الأول، وposeهو المكان الذي يجب أن يكون فيه الآن، وtempoهو طريقة وصوله.حين يتغيّر
poseفي منتصف الرحلة، يلتف العنصر من حيث هو على الشاشة، محتفظًا بسرعته مع النابض.جارٍ تجهيز المثال…
النقر السريع على البطاقات لا يجعل أيًا منها يقفز أبدًا.
اربط الإدخال
يكتب
input(ref, moveInput(...))إحداثيات المؤشر في القيم. ويجعلfollow(target, source)قيمة تتبع أخرى بنابض.كل ما يُعرَّف في دالة مصنع
useAnimatedيملكه المكوّن: تتوقف المستمعات والنوابض عند الإزالة أو حين تتغيّر تبعية.جارٍ تجهيز المثال…
تميل البطاقة نحو المؤشر وتستقر حين يغادر.
حرّك المغادرة
إزالة ابن React تزيله عادةً فورًا. يحتفظ
Animated.Keepبالأبناء ذوي key حتى تنتهي وضعيةdepartالخاصة بهم.لا يعرض
waitالأبناء الجدد إلا بعد انتهاء كل المغادرات.جارٍ تجهيز المثال…
تغادر الرسائل المرفوضة بالحركة المختارة قبل أن تختفي.
أصبح لديك النموذج كاملًا
تتشارك القيم والوجهات والإدخال والمغادرات المتحكمات نفسها وقواعد المقاطعة نفسها والتنظيف نفسه. وتتعمق الأدلة في كلٍّ منها.