الفرق بين المراجعتين ل"ReactNative/easing"
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: Easing في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE: Easing في React Native}}</noinclude> | ||
| − | تُطبِّق وحدة التخفيف <code>Easing</code> دوال التخفيف (easing functions) الشائعة. تُستخدم هذه الوحدة من طرف [https://wiki.hsoub.com/ReactNative/animated | + | تُطبِّق وحدة التخفيف <code>Easing</code> دوال التخفيف (easing functions) الشائعة. تُستخدم هذه الوحدة من طرف [https://wiki.hsoub.com/ReactNative/animated <code>Animated.timing()</code>] لعرض حركة معقولة فيزيائيًّا في التحريكات. |
يمكنك العثور على تجسيد مرئيّ لبعض دوال التخفيف الشائعة على [http://easings.net/ easings.net]. | يمكنك العثور على تجسيد مرئيّ لبعض دوال التخفيف الشائعة على [http://easings.net/ easings.net]. | ||
| سطر 19: | سطر 19: | ||
* <code>cubic</code> | * <code>cubic</code> | ||
| − | يمكن استخدام الدالة poly لتنفيذ دوال ذات قوة جبرية (power function) أعلى مثل الرباعيّة (quartic) والخماسيّة (quintic) وغيرها. | + | يمكن استخدام الدالة <code>poly</code> لتنفيذ دوال ذات قوة جبرية (power function) أعلى مثل الرباعيّة (quartic) والخماسيّة (quintic) وغيرها. |
==دوال إضافيّة== | ==دوال إضافيّة== | ||
| سطر 92: | سطر 92: | ||
دالة جيبية. | دالة جيبية. | ||
| − | [http://easings.net/#easeInSine مثال ] | + | [http://easings.net/#easeInSine مثال] |
===<code>circle()</code>=== | ===<code>circle()</code>=== | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 98: | سطر 98: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
دالة دائرية. | دالة دائرية. | ||
| − | [http://easings.net/#easeInCirc مثال ] | + | [http://easings.net/#easeInCirc مثال] |
===<code>exp()</code>=== | ===<code>exp()</code>=== | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 105: | سطر 105: | ||
دالة أسية. | دالة أسية. | ||
| − | [http://easings.net/#easeInExpo مثال ] | + | [http://easings.net/#easeInExpo مثال] |
===<code>elastic()</code>=== | ===<code>elastic()</code>=== | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 113: | سطر 113: | ||
قيمة <code>bounciness</code> الافتراضية هي <code>1</code>، والتي تتجاوز الحد (overshoot) قليلًا مرة واحدة. القيمة <code>0</code> لا تتجاوز الحد إطلاقًا، وقيمة <code>N > 1</code> ستتجاوز الحد عدد N مرات تقريبًا. | قيمة <code>bounciness</code> الافتراضية هي <code>1</code>، والتي تتجاوز الحد (overshoot) قليلًا مرة واحدة. القيمة <code>0</code> لا تتجاوز الحد إطلاقًا، وقيمة <code>N > 1</code> ستتجاوز الحد عدد N مرات تقريبًا. | ||
| − | [http://easings.net/#easeInElastic مثال ] | + | [http://easings.net/#easeInElastic مثال] |
===<code>back()</code>=== | ===<code>back()</code>=== | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 127: | سطر 127: | ||
يوفر تأثير ارتداد أساسي. | يوفر تأثير ارتداد أساسي. | ||
| − | [http://easings.net/#easeInBounce مثال ] | + | [http://easings.net/#easeInBounce مثال] |
===<code>bezier()</code>=== | ===<code>bezier()</code>=== | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
مراجعة 13:15، 18 ديسمبر 2019
تُطبِّق وحدة التخفيف 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
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). ستُنفَّذ دالة التخفيف للأمام لنصف المدة، ثم للخلف لبقية المدة.