Easing في React Native
تُطبِّق وحدة التخفيف Easing دوال التخفيف (easing functions) الشائعة. تُستخدم هذه الوحدة من طرف Animated.timing() لعرض حركة معقولة فيزيائيًّا في التحريكات.
يمكنك العثور على تجسيد مرئيّ لبعض دوال التخفيف الشائعة على easings.net.
التحريكات المعرفة مسبقا (Predefined animations)
توفر وحدة Easing العديد من التحريكات المُعرَّفة مسبقًا من خلال التوابع التالية:
-
back: يوفر تحريكًا بسيطًا يعود فيه الكائن للوراء قليلاً قبل التحرك للأمام. -
bounce: يُوفِّر تحريك ارتدادٍ. -
ease: يوفر تحريك قصور ذاتي أساسي (basic inertial animation). -
elastic: يوفر تفاعل وثبٍ أساسي (basic spring interaction).
الدوال قياسية
تتوفّر ثلاث دوال تخفيف قياسية:
-
linear -
quad -
cubic
يمكن استخدام الدالة poly لتنفيذ دوال ذات قوة جبرية (power function) أعلى مثل الرباعيّة (quartic) والخماسيّة (quintic) وغيرها.
دوال إضافيّة
تتوفّر دوال رياضية إضافية عبر التوابع التالية:
-
bezier: يوفر منحنى bezier مكعب. -
circle: يوفر دالة دائرية. -
sin: يوفر دالة جيبية (sinusoidal function). -
exp: يوفر دالة أسية (exponential function).
تُستخدم التوابع المساعدة التالية لتعديل دوال تخفيفٍ أخرى.
-
in: يُنفِّذ دالة تخفيف إلى الأمام. -
inOut: يجعل أي دالة تخفيف متناظرة (symmetrical). -
out: يُنفِّذ دالة تخفيف إلى الخلف.
التوابع
step0()
static step0(n)
دالة زحزحة (stepping function)، تُعيد القيمة 1 لأي قيمة n موجبة.
step1()
step1()
دالة زحزحة، تُعيد القيمة 1 إذا كانت n أكبر من أو تساوي 1.
linear()
static linear(t)
دالة خطية،f(t) = t . الموقع يرتبط بالوقت المنقضي واحد لواحد (one to one).
مثال
ease()
static ease(t)
تفاعل قصور ذاتي أساسيّ، على غرار كائنٍ يتسارع ببطء إلى الإسراع.
quad()
static quad(t)
دالة تربيعية، f(t) = t * t. يساوي الموقع مربع الوقت المنقضي.
cubic()
static cubic(t)
دالة تكعيبية، f(t) = t * t * t. يساوي الموقع مكعب الوقت المنقضي.
poly()
static poly(n)
دالة قوة جبريّة (power function). يساوي الموقعُ الوقتَ المنقضي أُس n.
مثال n = 4
sin()
static sin(t)
دالة جيبية.
circle()
static circle(t)
دالة دائرية. مثال
exp()
static exp(t)
دالة أسية.
elastic()
static elastic(bounciness)
تفاعل مرن أساسي (basic elastic interaction)، يشبه واثبًا (spring) يتأرجح ذهابًا وإيابًا.
قيمة bounciness الافتراضية هي 1، والتي تتجاوز الحد (overshoot) قليلًا مرة واحدة. القيمة 0 لا تتجاوز الحد إطلاقًا، وقيمة N > 1 ستتجاوز الحد عدد N مرات تقريبًا.
مثال
back()
static back(s)
استخدمه مع Animated.parallel() لإنشاء تأثير أساسي يُحرَّك فيه الكائن للوراء قليلاً مع بدء الحركة.
bounce()
static bounce(t)
يوفر تأثير ارتداد أساسي.
bezier()
static bezier(x1, y1, x2, y2)
يوفر منحنى بيزيه مكعب (cubic bezier curve)، أي ما يعادل الانتقال transition-timing-function الخاص بلغة CSS.
الموقع cubic-bezier.com أداةٌ مفيدة لتجسيد منحنيات بيزيه المكعبة.
in()
static in(easing);
يُنفِّذ دالة تخفيف إلى الأمام.
out()
static out(easing)
يُنفِّذ دالة تخفيف إلى الخلف.
inOut()
static inOut(easing)
يجعل أي دالة تخفيف متناظرة (symmetrical). ستُنفَّذ دالة التخفيف للأمام لنصف المدة، ثم للخلف لبقية المدة.