الفرق بين المراجعتين ل"ReactNative/animatedvalue"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
−
== المتغيّر Animated.Value ==
+
<noinclude>{{DISPLAYTITLE:المتغير Animated.Value في React Native}}</noinclude>
−
هو القيمة المعيارية لتوجيه التحريك، فمتغيّر <code>Animated.Value</code> واحد يمكنه أن يوجّه خصائصًا متعددة بطريقة متزامنة، ولكن يمكنها أن تكون موجَّهة باستخدام آلية واحدة فقط في نفس الوقت، إذ سيؤدي استخدام آلية جديدة (مثل بدء حركة جديدة أو استدعاء التابع <code>setValue</code>) إلى إيقاف أي آلية سابقة. يُهيَّأ هذا المتغير من خلال <code>new Animated.Value(0);‎</code>.
+
هو القيمة المعيارية لتوجيه التحريك، فمتغيّر <code>Animated.Value</code> واحد يمكنه أن يوجّه خصائصًا متعددة بطريقة متزامنة، ولكن يمكنها أن تكون موجَّهة باستخدام آلية واحدة فقط في نفس الوقت، إذ سيؤدي استخدام آلية جديدة (مثل بدء حركة جديدة أو استدعاء التابع <code>setValue</code>) إلى إيقاف أي آلية سابقة.  
  
−
=== مرجع التوابع ===
+
يُهيَّأ هذا المتغير من خلال <code>new Animated.Value(0);‎</code>.
  
−
====<code>setValue()‎</code> ====
+
== التوابع ==
 +
 
 +
===<code>setValue()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
setValue(value);
 
setValue(value);
سطر 19: سطر 21:
 
|عدد number
 
|عدد number
 
|نعم
 
|نعم
−
|Value
+
|قيمة Value
 
|}
 
|}
  
−
====<code>setOffset()‎</code> ====
+
===<code>setOffset()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
setOffset(offset);
 
setOffset(offset);
−
</syntaxhighlight>يضبط هذا التابع الإزاحة المُطبَّقة على أية قيمة مضبوطة، سواء عبر التابع <code>setValue</code> أو عبر تحريك أو عبر <code>Animated.event</code>، وهو مفيد لتعويض أشياء كبدء الإيماءة الأساسية pan gesture.
+
</syntaxhighlight>يضبط هذا التابع الإزاحة المُطبَّقة على أية قيمة مضبوطة، سواء عبر التابع <code>setValue</code> أو عبر تحريك أو عبر <code>Animated.event</code>، وهو مفيد لتعويض أشياء كبدء الإيماءة الشاملة pan gesture.
  
 
'''المعاملات''':
 
'''المعاملات''':
سطر 37: سطر 39:
 
|عدد number
 
|عدد number
 
|نعم
 
|نعم
−
|Offset value
+
|قيمة إزاحة Offset value
 
|}
 
|}
  
−
====<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>يضيف هذا التابع مستمعًا غير متزامن إلى القيمة لتتمكّن من مراقبة تحديثات التأثيرات الحركية، وهذا مفيد لأنه لا توجد طريقة لقراءة القيمة بصورة متزامنة لأنها قد تكون موجَّهة بطريقة أصيلة. يعيد هذا التابع سلسلة نصية تعمل كمعرّف للمستمع.
  
 
'''المعاملات''':
 
'''المعاملات''':
سطر 65: سطر 67:
 
|دالة function
 
|دالة function
 
|نعم
 
|نعم
−
|الدالة callback التي ستتلقى كائنًا له مفتاح <code>value</code> مضبوط على القيمة الجديدة.
+
|دالة رد نداء callback التي ستتلقى كائنًا له مفتاح <code>value</code> مضبوط على القيمة الجديدة.
 
|}
 
|}
  
−
==== <code>removeListener()‎</code> ====
+
===<code>removeListener()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
removeListener(id);
 
removeListener(id);
سطر 83: سطر 85:
 
|سلسلة نصية string
 
|سلسلة نصية string
 
|نعم
 
|نعم
−
|حذف معرّف Id المستمع.
+
|معرّف Id المستمع المحذوف.
 
|}
 
|}
  
−
==== <code>removeAllListeners()‎</code> ====
+
===<code>removeAllListeners()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
removeAllListeners();
 
removeAllListeners();
 
</syntaxhighlight>يحذف جميع المستمعين المسجّلين.
 
</syntaxhighlight>يحذف جميع المستمعين المسجّلين.
  
−
==== <code>stopAnimation()‎</code> ====
+
===<code>stopAnimation()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
stopAnimation([callback]);
 
stopAnimation([callback]);
سطر 109: سطر 111:
 
|}
 
|}
  
−
==== <code>resetAnimation()‎</code> ====
+
===<code>resetAnimation()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
resetAnimation([callback]);
 
resetAnimation([callback]);
سطر 127: سطر 129:
 
|}
 
|}
  
−
==== <code>interpolate()‎</code> ====
+
===<code>interpolate()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
interpolate(config);
 
interpolate(config);
سطر 158: سطر 160:
 
<code>extrapolateRight</code> (مفتاح اختياري): هو سلسلة نصية مثل 'extend' أو 'identity' أو 'clamp'.
 
<code>extrapolateRight</code> (مفتاح اختياري): هو سلسلة نصية مثل 'extend' أو 'identity' أو 'clamp'.
  
−
==== <code>animate()‎</code> ====
+
===<code>animate()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
animate(animation, callback);
 
animate(animation, callback);
سطر 181: سطر 183:
 
|}
 
|}
  
−
==== <code>stopTracking()‎</code> ====
+
===<code>stopTracking()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
stopTracking();
 
stopTracking();
 
</syntaxhighlight>يُستخدَم هذا التابع عادةً داخليًا فقط.
 
</syntaxhighlight>يُستخدَم هذا التابع عادةً داخليًا فقط.
  
−
==== <code>track()‎</code> ====
+
===<code>track()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
track(tracking);
 
track(tracking);
سطر 207: سطر 209:
  
 
* [https://reactnative.dev/docs/animatedvalue صفحة Animated.Value في توثيق React Native الرسمي.]
 
* [https://reactnative.dev/docs/animatedvalue صفحة Animated.Value في توثيق React Native الرسمي.]
 +
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native API]]

المراجعة الحالية بتاريخ 14:12، 9 أكتوبر 2021

هو القيمة المعيارية لتوجيه التحريك، فمتغيّر 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 نعم دالة رد نداء Callback.

stopTracking()‎

stopTracking();

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

track()‎

track(tracking);

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

المعاملات:

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

مصادر

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