الفرق بين المراجعتين لصفحة: «ReactNative/animatedvalue»

من موسوعة حسوب
التعديل اللاحق ←
مرئينص الويكي
أنشأ الصفحة ب'== المتغيّر Animated.Value == هو القيمة المعيارية لتوجيه التحريك، فمتغيّر <code>Animated.Value</code> واحد يمكنه...'
 
لا ملخص تعديل
سطر 4: سطر 4:
=== التوابع ===
=== التوابع ===


==== التابع <code>setValue()‎</code> ====
====<code>setValue()‎</code> ====
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
setValue(value);
setValue(value);
سطر 22: سطر 22:
|}
|}


==== التابع <code>setOffset()‎</code> ====
====<code>setOffset()‎</code> ====
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
setOffset(offset);
setOffset(offset);
سطر 40: سطر 40:
|}
|}


==== التابع <code>flattenOffset()‎</code> ====
====<code>flattenOffset()‎</code> ====
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
flattenOffset();
flattenOffset();
</syntaxhighlight>يدمج هذا التابع قيمة الإزاحة مع القيمة الأساسية ويعيد ضبط الإزاحة إلى الصفر، أي لم يتغير خرج القيمة النهائي.
</syntaxhighlight>يدمج هذا التابع قيمة الإزاحة مع القيمة الأساسية ويعيد ضبط الإزاحة إلى الصفر، أي لم يتغير خرج القيمة النهائي.


==== التابع <code>extractOffset()‎</code> ====
====<code>extractOffset()‎</code> ====
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
extractOffset();
extractOffset();
</syntaxhighlight>يضبط قيمة الإزاحة على القيمة الأساسية، ويعيد ضبط القيمة الأساسية إلى الصفر، أي لم يتغير خرج القيمة النهائي.
</syntaxhighlight>يضبط قيمة الإزاحة على القيمة الأساسية، ويعيد ضبط القيمة الأساسية إلى الصفر، أي لم يتغير خرج القيمة النهائي.


==== التابع <code>addListener()‎</code> ====
====<code>addListener()‎</code> ====
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
addListener(callback);
addListener(callback);
</syntaxhighlight>
</syntaxhighlight>يضيف هذا التابع مستمعًا غير متزامن إلى القيمة لتتمكّن من مراقبة التحديثات من التأثيرات الحركية، وهذا مفيد لأنه لا توجد طريقة لقراءة القيمة بصورة متزامنة لأنها قد تكون موجَّهة بطريقة أصيلة. يعيد هذا التابع سلسلة تعمل كمعرف للمستمع.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|callback
|دالة function
|نعم
|الدالة callback التي ستتلقى كائنًا له مفتاح <code>value</code> مضبوط على القيمة الجديدة.
|}
 
==== <code>removeListener()‎</code> ====
<syntaxhighlight lang="javascript">
removeListener(id);
</syntaxhighlight>يلغي هذا التابع تسجيل مستمع. يجب أن يتطابق المعامل <code>id</code> مع المعرّف الذي أعاده مسبقًا التابع <code>addListener()‎</code> مسبقًا.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|id
|سلسلة string
|نعم
|حذف معرّف Id المستمع.
|}
 
==== <code>removeAllListeners()‎</code> ====
<syntaxhighlight lang="javascript">
removeAllListeners();
</syntaxhighlight>حذف جميع المستمعين المسجّلين.
 
==== <code>stopAnimation()‎</code> ====
<syntaxhighlight lang="javascript">
stopAnimation([callback]);
</syntaxhighlight>يوقف أي تأثيرات حركية أو تتبّع قيد التشغيل. تُستدعى الدالة <code>callback</code> مع القيمة النهائية بعد إيقاف التأثير الحركي، وهذا أمر مفيد لتحديث الحالة لمطابقة التحريك مع التخطيط.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|callback
|دالة function
|لا
|دالة ستتلقى القيمة النهائية.
|}
 
==== <code>resetAnimation()‎</code> ====
<syntaxhighlight lang="javascript">
resetAnimation([callback]);
</syntaxhighlight>يوقف هذا التابع أي تأثير حركي ويعيد ضبط القيمة إلى القيمة الأصلية.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|callback
|دالة function
|لا
|دالة ستتلقى القيمة الأصلية.
|}
 
==== <code>interpolate()‎</code> ====
<syntaxhighlight lang="javascript">
interpolate(config);
</syntaxhighlight>يحشو هذا التابع القيمة قبل تحديث الخاصية مثل ربط القيمة ‎0-1 مع ‎0-10.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|config
|كائن object
|نعم
|انظر أدناه
|}
يتكوّن الكائن <code>config</code> من المفاتيح التالية:
 
<code>inputRange</code>: مصفوفة من الأرقام.
 
<code>outputRange</code>: مصفوفة من الأرقام أو السلاسل.
 
<code>easing</code> (مفتاح اختياري): وهو دالة تعيد رقمًا، وتأخذ رقمًا كدخل.
 
<code>extrapolate</code> (مفتاح اختياري): هو سلسلة مثل 'extend' أو 'identity' أو 'clamp'.
 
<code>extrapolateLeft</code> (مفتاح اختياري): هو سلسلة مثل 'extend' أو 'identity' أو 'clamp'.
 
<code>extrapolateRight</code> (مفتاح اختياري): هو سلسلة مثل 'extend' أو 'identity' أو 'clamp'.
 
==== <code>animate()‎</code> ====
<syntaxhighlight lang="javascript">
animate(animation, callback);
</syntaxhighlight>يُستخدَم هذا التابع عادةً داخليًا فقط، ولكن يمكن أن يستخدمه صنف تحريك مخصَّص.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|animation
|Animation
|نعم
|اطّلع على <code>Animation.js</code>
|-
|callback
|دالة function
|نعم
|دالة استدعاء.
|}
 
==== <code>stopTracking()‎</code> ====
<syntaxhighlight lang="javascript">
stopTracking();
</syntaxhighlight>يُستخدَم هذا التابع عادةً داخليًا فقط.
 
==== <code>track()‎</code> ====
<syntaxhighlight lang="javascript">
track(tracking);
</syntaxhighlight>يُستخدَم هذا التابع عادةً داخليًا فقط.
 
'''المعاملات''':
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|tracking
|AnimatedNode
|نعم
|اطّلع على <code>AnimatedNode.js</code>
|}
 
== مصادر ==
 
* [https://reactnative.dev/docs/animatedvalue صفحة Animated.Value في توثيق React Native الرسمي.]

مراجعة 19:28، 19 يونيو 2021

المتغيّر Animated.Value

هو القيمة المعيارية لتوجيه التحريك، فمتغيّر Animated.Value واحد يمكنه أن يوجّه خصائصًا متعددة بطريقة متزامنة، ولكن يمكنها أن تكون موجَّهة باستخدام آلية واحدة فقط في نفس الوقت، إذ سيؤدي استخدام آلية جديدة (مثل بدء حركة جديدة أو استدعاء التابع setValue) إلى إيقاف أي آلية سابقة. يُهيَّأ هذا المتغير من خلال new Animated.Value(0);‎.

التوابع

setValue()‎

setValue(value);

اضبط القيمة value مباشرةً، فهذا سيؤدي إلى إيقاف أي تأثيرات حركية تعمل على هذه القيمة وتحديث جميع الخصائص المرتبطة بها.

المعاملات Parameters:

الاسم النوع مطلوب الوصف
value number نعم Value

setOffset()‎

setOffset(offset);

يضبط هذا التابع الإزاحة المُطبَّقة على أية قيمة مضبوطة، سواء عبر التابع setValue أو تحريك أو المتغير Animated.event، وهو مفيد لتعويض أشياء بدء إيماءة لمس المستخدم الشاشة pan gesture.

المعاملات:

الاسم النوع مطلوب الوصف
offset number نعم Offset value

flattenOffset()‎

flattenOffset();

يدمج هذا التابع قيمة الإزاحة مع القيمة الأساسية ويعيد ضبط الإزاحة إلى الصفر، أي لم يتغير خرج القيمة النهائي.

extractOffset()‎

extractOffset();

يضبط قيمة الإزاحة على القيمة الأساسية، ويعيد ضبط القيمة الأساسية إلى الصفر، أي لم يتغير خرج القيمة النهائي.

addListener()‎

addListener(callback);

يضيف هذا التابع مستمعًا غير متزامن إلى القيمة لتتمكّن من مراقبة التحديثات من التأثيرات الحركية، وهذا مفيد لأنه لا توجد طريقة لقراءة القيمة بصورة متزامنة لأنها قد تكون موجَّهة بطريقة أصيلة. يعيد هذا التابع سلسلة تعمل كمعرف للمستمع.

المعاملات:

الاسم النوع مطلوب الوصف
callback دالة function نعم الدالة callback التي ستتلقى كائنًا له مفتاح value مضبوط على القيمة الجديدة.

removeListener()‎

removeListener(id);

يلغي هذا التابع تسجيل مستمع. يجب أن يتطابق المعامل id مع المعرّف الذي أعاده مسبقًا التابع addListener()‎ مسبقًا.

المعاملات:

الاسم النوع مطلوب الوصف
id سلسلة string نعم حذف معرّف Id المستمع.

removeAllListeners()‎

removeAllListeners();

حذف جميع المستمعين المسجّلين.

stopAnimation()‎

stopAnimation([callback]);

يوقف أي تأثيرات حركية أو تتبّع قيد التشغيل. تُستدعى الدالة callback مع القيمة النهائية بعد إيقاف التأثير الحركي، وهذا أمر مفيد لتحديث الحالة لمطابقة التحريك مع التخطيط.

المعاملات:

الاسم النوع مطلوب الوصف
callback دالة function لا دالة ستتلقى القيمة النهائية.

resetAnimation()‎

resetAnimation([callback]);

يوقف هذا التابع أي تأثير حركي ويعيد ضبط القيمة إلى القيمة الأصلية.

المعاملات:

الاسم النوع مطلوب الوصف
callback دالة function لا دالة ستتلقى القيمة الأصلية.

interpolate()‎

interpolate(config);

يحشو هذا التابع القيمة قبل تحديث الخاصية مثل ربط القيمة ‎0-1 مع ‎0-10.

المعاملات:

الاسم النوع مطلوب الوصف
config كائن object نعم انظر أدناه

يتكوّن الكائن config من المفاتيح التالية:

inputRange: مصفوفة من الأرقام.

outputRange: مصفوفة من الأرقام أو السلاسل.

easing (مفتاح اختياري): وهو دالة تعيد رقمًا، وتأخذ رقمًا كدخل.

extrapolate (مفتاح اختياري): هو سلسلة مثل 'extend' أو 'identity' أو 'clamp'.

extrapolateLeft (مفتاح اختياري): هو سلسلة مثل 'extend' أو 'identity' أو 'clamp'.

extrapolateRight (مفتاح اختياري): هو سلسلة مثل 'extend' أو 'identity' أو 'clamp'.

animate()‎

animate(animation, callback);

يُستخدَم هذا التابع عادةً داخليًا فقط، ولكن يمكن أن يستخدمه صنف تحريك مخصَّص.

المعاملات:

الاسم النوع مطلوب الوصف
animation Animation نعم اطّلع على Animation.js
callback دالة function نعم دالة استدعاء.

stopTracking()‎

stopTracking();

يُستخدَم هذا التابع عادةً داخليًا فقط.

track()‎

track(tracking);

يُستخدَم هذا التابع عادةً داخليًا فقط.

المعاملات:

الاسم النوع مطلوب الوصف
tracking AnimatedNode نعم اطّلع على AnimatedNode.js

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/animatedvalue&oldid=31068»