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 ‎‎: يوفر منحنى بيزيه مكعب.
  • ‎‎circle ‎‎: يوفر دالة دائرية.
  • ‎‎sin ‎‎: يوفر دالة جيبية (sinusoidal function).
  • ‎‎exp ‎‎: يوفر دالة أسية (exponential function).

تُستخدم التوابع المساعدة التالية لتعديل دوال تخفيفٍ أخرى.

  • ‎‎in ‎‎: يُنفِّذ دالة تخفيف إلى الأمام.
  • ‎‎inOut ‎‎: يجعل أي دالة تخفيف متناظرة (symmetrical).
  • ‎‎out ‎‎: يُنفِّذ دالة تخفيف إلى الخلف.

التوابع

‎‎step0()‎‎

static step0(n)

دالة زحزحة (stepping function)، تُعيد القيمة ‎‎1‎‎ لأي قيمة ‎‎n‎‎ موجبة.

‎‎step1()‎‎

static step1(n)

دالة زحزحة، تُعيد القيمة ‎‎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

مثال n = 5

‎‎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). ستُنفَّذ دالة التخفيف للأمام لنصف المدة، ثم للخلف لبقية المدة.

مصادر