AnimationAction.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <!DOCTYPE html>
  2. <html lang="ar">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body class="rtl">
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. تقوم AnimationActions بجدولة أداء الرسوم المتحركة المخزنة في [page:AnimationClip AnimationClips].
  14. <br /><br />
  15. ملاحظة: يمكن ربط معظم أساليب AnimationAction.<br /><br />
  16. للحصول على نظرة عامة حول العناصر المختلفة لنظام الرسوم المتحركة three.js ، راجع مقالة "نظام الحركات" في قسم "الخطوات التالية" من الدليل.
  17. </p>
  18. <h2>المنشئ (Constructor)</h2>
  19. <h3>[name]( [param:AnimationMixer mixer], [param:AnimationClip clip], [param:Object3D localRoot] )</h3>
  20. <p>
  21. [page:AnimationMixer mixer] هو *AnimationMixer* الذي يتحكم فيه هذا الإجراء.<br />
  22. [page:AnimationClip clip] هو *AnimationClip* الذي يحتفظ ببيانات الرسوم المتحركة لهذا الإجراء.<br />
  23. [page:Object3D localRoot] هو الكائن الجذر الذي يتم تنفيذ هذا الإجراء عليه.<br /><br />
  24. ملاحظة: بدلاً من استدعاء هذا المُنشئ مباشرةً ، يجب إنشاء AnimationAction برقم [page:AnimationMixer.clipAction] نظرًا لأن هذه الطريقة توفر التخزين المؤقت للحصول على أداء أفضل.
  25. </p>
  26. <h2>الخصائص (Properties)</h2>
  27. <h3>[property:Boolean clampWhenFinished]</h3>
  28. <p>
  29. إذا تم ضبط *clampWhenFinished* على true ، فسيتم تلقائيًا إيقاف [page:.paused paused] للرسوم المتحركة مؤقتًا في إطارها الأخير.<br /><br />
  30. إذا تم ضبط *clampWhenFinished* على false ، فسيتم تحويل [page:.enabled enabled] تلقائيًا إلى false عند انتهاء آخر حلقة من الإجراء ، بحيث لا يكون لهذا الإجراء أي تأثير آخر.<br /><br />
  31. القيمة الافتراضية هو خطأ (false).<br /><br />
  32. ملاحظة: *clampWhenFinished* ليس له أي تأثير إذا تم مقاطعة الإجراء (يكون له تأثير فقط إذا انتهت الحلقة الأخيرة بالفعل).
  33. </p>
  34. <h3>[property:Boolean enabled]</h3>
  35. <p>
  36. يؤدي تعيين *enabled* إلى *false* إلى تعطيل هذا الإجراء ، بحيث لا يكون له أي تأثير. الافتراضي هو *true*.<br /><br />
  37. عند إعادة تمكين الإجراء ، يستمر الرسم المتحرك من وقته الحالي [page:.time time] (الإعداد *enabled* إلى *false* لا يعيد تعيين الإجراء).<br /><br />
  38. ملاحظة: لا يؤدي إعداد *enabled* إلى *true* إلى إعادة تشغيل الرسوم المتحركة تلقائيًا. سيؤدي ضبط *enabled* إلى *true* إلى إعادة تشغيل الرسوم المتحركة فورًا فقط إذا تم استيفاء الشرط التالي:
  39. [page:.paused paused] تحتوي قيمة *false* ، لم يتم إلغاء تنشيط هذا الإجراء في هذه الأثناء (بتنفيذ أمر [page:.stop stop] أو [page:.reset reset]) ، وليس [page:.weight weight] أو [page:.timeScale timeScale] يساوي 0.
  40. </p>
  41. <h3>[property:Number loop]</h3>
  42. <p>
  43. وضع التكرار (يمكن تغييره بـ [page:.setLoop setLoop]). الافتراضي هو [page:Animation THREE.LoopRepeat] (مع عدد لا نهائي من [page:.repetitions repetitions])<br /><br />
  44. يجب أن يكون أحد هذه الثوابت:<br /><br />
  45. [page:Animation THREE.LoopOnce] - تشغيل المقطع مرة واحدة ،<br />
  46. [page:Animation THREE.LoopRepeat] - تشغيل المقطع مع العدد المختار من *التكرارات* ،
  47. في كل مرة تقفز من نهاية المقطع مباشرة إلى بدايته ،<br />
  48. [page:Animation THREE.LoopPingPong] - تشغيل المقطع مع العدد المختار من *التكرارات* ، بدلاً من التشغيل للأمام والخلف.
  49. </p>
  50. <h3>[property:Boolean paused]</h3>
  51. <p>
  52. يؤدي تعيين *paused* إلى *true* إلى إيقاف تنفيذ الإجراء مؤقتًا عن طريق تعيين مقياس الوقت الفعال على 0. الافتراضي هو *false*.<br /><br />
  53. </p>
  54. <h3>[property:Number repetitions]</h3>
  55. <p>
  56. عدد التكرارات التي تم إجراؤها [page:AnimationClip] على مدار هذا الإجراء. يمكن تعيينه عبر [page:.setLoop setLoop]. الافتراضي هو *Infinity*.<br /><br />
  57. ضبط هذا الرقم ليس له أي تأثير ، إذا تم ضبط [page:.loop loop mode] على [page:Animation THREE.LoopOnce].
  58. </p>
  59. <h3>[property:Number time]</h3>
  60. <p>
  61. the local time of this action (in seconds, starting with 0).<br /><br />
  62. يتم تثبيت القيمة أو لفها إلى 0 ... مدة المقطع (وفقًا لحالة الحلقة).
  63. يمكن تغير قيمتها بالنسبة إلى وقت لخالط الحركات الرئيسي عن طريق تغيير [page:.timeScale timeScale] (باستخدام [page:.setEffectiveTimeScale setEffectiveTimeScale] أو [page:.setDuration setDuration]).<br />
  64. </p>
  65. <h3>[property:Number timeScale]</h3>
  66. <p>
  67. Sعامل التحجيم للوقت [page:.time time]. تؤدي القيمة 0 إلى توقف الرسوم المتحركة مؤقتًا. تؤدي القيم السالبة إلى تشغيل الرسوم المتحركة بشكل عكسي. الافتراضي هو 1.<br /><br />
  68. الخصائص / الطرق المتعلقة *timeScale* (على التوالي *time*) هم:
  69. [page:.getEffectiveTimeScale getEffectiveTimeScale],
  70. [page:.halt halt],
  71. [page:.paused paused],
  72. [page:.setDuration setDuration],
  73. [page:.setEffectiveTimeScale setEffectiveTimeScale],
  74. [page:.stopWarping stopWarping],
  75. [page:.syncWith syncWith],
  76. [page:.warp warp].
  77. </p>
  78. <h3>[property:Number weight]</h3>
  79. <p>
  80. درجة تأثير هذا الإجراء (في المجال القائم بين [0 ، 1]). يمكن استخدام القيم بين 0 (بدون تأثير) و 1 (تأثير كامل) للمزج بين عدة إجراءات. الافتراضي هو 1. <br /><br />
  81. الخصائص / الطرق المتعلقة *weight* هي:
  82. [page:.crossFadeFrom crossFadeFrom],
  83. [page:.crossFadeTo crossFadeTo],
  84. [page:.enabled enabled],
  85. [page:.fadeIn fadeIn],
  86. [page:.fadeOut fadeOut],
  87. [page:.getEffectiveWeight getEffectiveWeight],
  88. [page:.setEffectiveWeight setEffectiveWeight],
  89. [page:.stopFading stopFading].
  90. </p>
  91. <h3>[property:Boolean zeroSlopeAtEnd]</h3>
  92. <p>
  93. يتيح تشغيل السلس بدون مقاطع منفصلة للبداية والحلقة والنهاية. الافتراضي هو *true*.
  94. </p>
  95. <h3>[property:Boolean zeroSlopeAtStart]</h3>
  96. <p>
  97. يتيح تشغيل السلس بدون مقاطع منفصلة للبداية والحلقة والنهاية. الافتراضي هو *true*.
  98. </p>
  99. <h2>الوظائف (Methods)</h2>
  100. <h3>[method:AnimationAction crossFadeFrom]( [param:AnimationAction fadeOutAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
  101. <p>
  102. يؤدي هذا الإجراء إلى تلاشي [page:.fadeIn fade in] ، مما يؤدي إلى تلاشي إجراء آخر في نفس الوقت ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة.<br /><br />
  103. إذا كانت warpBoolean تحمل قيمة true ، فسيتم تطبيق [page:.warp warping] إضافيًا (تغييرات تدريجية في المقاييس الزمنية).<br /><br />
  104. ملاحظة: كما هو الحال مع *fadeIn*/*fadeOut* ، يبدأ / ينتهي التلاشي بوزن 1.
  105. </p>
  106. <h3>[method:AnimationAction crossFadeTo]( [param:AnimationAction fadeInAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
  107. <p>
  108. يؤدي هذا الإجراء إلى تلاشي [page:.fadeOut fade out] ، يتلاشى في إجراء آخر في وقت واحد ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.<br /><br />
  109. إذا كانت warpBoolean صحيحة ، فسيتم تطبيق [page:.warp warping] إضافيًا (تغييرات تدريجية في المقاييس الزمنية).<br /><br />
  110. ملاحظة: كما هو الحال مع *fadeIn*/*fadeOut* ، يبدأ / ينتهي التلاشي بوزن 1.
  111. </p>
  112. <h3>[method:AnimationAction fadeIn]( [param:Number durationInSeconds] )</h3>
  113. <p>
  114. يزيد [page:.weight weight] هذا الإجراء تدريجياً من 0 إلى 1 ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.
  115. </p>
  116. <h3>[method:AnimationAction fadeOut]( [param:Number durationInSeconds] )</h3>
  117. <p>
  118. يقلل [page:.weight weight] هذا الإجراء تدريجيًا من 1 إلى 0 ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.
  119. </p>
  120. <h3>[method:Number getEffectiveTimeScale]()</h3>
  121. <p>
  122. تُرجع مقياس الوقت الفعال (مع الأخذ في الاعتبار حالات التواء و قيمة [page:.paused paused] الحالية).
  123. </p>
  124. <h3>[method:number getEffectiveWeight]()</h3>
  125. <p>
  126. تُرجع الوزن الفعال (مع الأخذ في الاعتبار حالات التلاشي الحالية و [page:.enabled enabled]).
  127. </p>
  128. <h3>[method:AnimationClip getClip]()</h3>
  129. <p>
  130. تُرجع المقطع الذي يحتوي على بيانات الرسوم المتحركة لهذا الإجراء.
  131. </p>
  132. <h3>[method:AnimationMixer getMixer]()</h3>
  133. <p>
  134. تُرجع الخالط المسؤول عن تشغيل هذا الإجراء.
  135. </p>
  136. <h3>[method:Object3D getRoot]()</h3>
  137. <p>
  138. تُرجع الكائن الجذر الذي تم تنفيذ هذا الإجراء عليه.
  139. </p>
  140. <h3>[method:AnimationAction halt]( [param:Number durationInSeconds] )</h3>
  141. <p>
  142. تعمل على إبطاء سرعة هذه الرسوم المتحركة إلى 0 من خلال إنقاص [page:.timeScale timeScale] تدريجيًا (بدءًا من قيمتها الحالية) ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.
  143. </p>
  144. <h3>[method:Boolean isRunning]()</h3>
  145. <p>
  146. تُرجع true إذا كان الإجراء [page:.time time] قيد التشغيل حاليًا.<br /><br />
  147. بالإضافة إلى تفعيله في الخالط (انظر [page:.isScheduled isScheduled]) ، يجب استيفاء الشروط التالية:
  148. <br/>
  149. [page:.paused paused] يساوي false ،<br/> [page:.enabled enabled] يساوي true ،
  150. <br/>
  151. [page:.timeScale timeScale] يختلف عن 0 ، ولا توجد جدولة لبدء متأخر ([page:.startAt startAt]).<br /><br />
  152. ملاحظة: لا يعني كون *isRunning* تحمل قيمة *true* أنه يمكن رؤية الرسوم المتحركة بالفعل. هذا هو الحال فقط ، إذا تم تعيين [page:.weight weight] بشكل إضافي على قيمة غير صفرية.
  153. </p>
  154. <h3>[method:Boolean isScheduled]()</h3>
  155. <p>
  156. تُرجع قيمة *true* ، إذا تم تنشيط هذا الإجراء في الخالط.<br /><br />
  157. ملاحظة: هذا لا يعني بالضرورة أن الرسوم المتحركة تعمل بالفعل (قارن الشروط الإضافية لـ [page:.isRunning isRunning]).
  158. </p>
  159. <h3>[method:AnimationAction play]()</h3>
  160. <p>
  161. يعلم الخالط بضرورة البدء في تنشيط الحدث (action). يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
  162. ملاحظة: لا يعني تنشيط هذا الإجراء بالضرورة أن الرسوم المتحركة تبدأ على الفور: إذا كان الإجراء قد انتهى بالفعل من قبل (من خلال الوصول إلى نهاية الحلقة الأخيرة) ، أو إذا تم تعيين وقت لبدء متأخر (عبر [page:.startAt startAt]) ،
  163. يجب تنفيذ [page:.reset reset] أولاً. يمكن لبعض الإعدادات الأخرى ([page:.paused paused]=true, [page:.enabled enabled]=false,
  164. [page:.weight weight]=0, [page:.timeScale timeScale]=0) منع تشغيل الرسوم المتحركة أيضًا.
  165. </p>
  166. <h3>[method:AnimationAction reset]()</h3>
  167. <p>
  168. يتم إعادة الحدث إلى وضع البداية. يمكن تقييد هذه الطريقة ضمن سلسلة.<br /><br />
  169. تقوم هذه الطريقة بتعيين [page:.paused paused] إلى false ، و [page:.enabled enabled] إلى true ، ومن [page:.time time] إلى 0 ، وتقطع أي تزييف مجدول ، وتزيل عدد الحلقات الداخلية وجدولة البدء المتأخر.<br /><br />
  170. ملاحظة: يتم استدعاء. *reset* دائمًا بواسطة [page:.stop stop] ، ولكن *reset* لا يتصل بـ *stop* نفسه.
  171. هذا يعني: إذا كنت تريد كلاهما ، reset وstop ، لا تتصل بـ *reset* بل إتصل بـ *stop* بدلا من ذلك.
  172. </p>
  173. <h3>[method:AnimationAction setDuration]( [param:Number durationInSeconds] )</h3>
  174. <p>
  175. يضبط المدة لحلقة واحدة من هذا الإجراء (بضبط [page:.timeScale timeScale] وإيقاف أي إلتفاف مجدول). يمكن تقييد هذه الطريقة ضمن سلسلة.
  176. </p>
  177. <h3>[method:AnimationAction setEffectiveTimeScale]( [param:Number timeScale] )</h3>
  178. <p>
  179. يضبط [page:.timeScale timeScale] ويوقف أي إلتفاف مجدول. يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
  180. إذا كانت القيمة [page:.paused paused] تحمل false ، فسيتم أيضًا تعيين المقياس الزمني الفعال (خاصية داخلية) على هذه القيمة ؛
  181. وإلا فسيتم تعيين النطاق الزمني الفعال (الذي يؤثر بشكل مباشر على الرسم المتحرك في هذه اللحظة) على 0.<br /><br />
  182. ملاحظة: *paused* لن يتم تحويله إلى *true* تلقائيًا ، إذا تم ضبط *timeScale* على 0 بهذه الطريقة.
  183. </p>
  184. <h3>[method:AnimationAction setEffectiveWeight]( [param:Number weight] )</h3>
  185. <p>
  186. تضبط [page:.weight weight] وتوقف أي تضاؤل مجدول. يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
  187. إذا كانت قيمة [page:.enabled enabled] هي true ، فسيتم أيضًا تعيين الوزن الفعال (خاصية داخلية) على هذه القيمة ؛
  188. وإلا فسيتم تعيين الوزن الفعال (الذي يؤثر بشكل مباشر على الرسم المتحرك في هذه اللحظة) على 0.<br /><br />
  189. ملاحظة: لن يتم تحويل *enabled* إلى false تلقائيًا ، إذا تم ضبط *weight* على 0 بهذه الطريقة.
  190. </p>
  191. <h3>[method:AnimationAction setLoop]( [param:Number loopMode], [param:Number repetitions] )</h3>
  192. <p>
  193. يعين [page:.loop loop mode] وعدد [page:.repetitions repetitions]. يمكن تقييد هذه الطريقة ضمن سلسلة
  194. </p>
  195. <h3>[method:AnimationAction startAt]( [param:Number startTimeInSeconds] )</h3>
  196. <p>
  197. يحدد وقت البداية المتأخرة (عادةً ما يتم تمريره كـ [page:AnimationMixer.time] + deltaTimeInSeconds). يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
  198. ملاحظة: ستبدأ الرسوم المتحركة فقط في الوقت المحدد ، إذا تم ربط *startAt* بـ [page:.play play] ،
  199. أو إذا تم بالفعل تنشيط الإجراء في الخالط (عن طريق استدعاء سابق لـ. *play* ، دون إيقافه أو إعادة تعيينه في هذه الأثناء).
  200. </p>
  201. <h3>[method:AnimationAction stop]()</h3>
  202. <p>
  203. يخبر الخالط بإلغاء تنشيط هذا الإجراء. يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
  204. سيتم إيقاف الإجراء على الفور وإعادة تعيين [page:.reset reset] بالكامل.<br /><br />
  205. ملاحظة: يمكنك إيقاف جميع الإجراءات النشطة على نفس الخالط دفعة واحدة عبر [page:AnimationMixer.stopAllAction mixer.stopAllAction].
  206. </p>
  207. <h3>[method:AnimationAction stopFading]()</h3>
  208. <p>
  209. يوقف أي [page:.fadeIn fading] مجدولًا يتم تطبيقه على هذا الحدث. يمكن تقييد هذه الطريقة ضمن سلسلة.
  210. </p>
  211. <h3>[method:AnimationAction stopWarping]()</h3>
  212. <p>
  213. يوقف أي [page:.warp warping] مجدولًا يتم تطبيقه على هذا الحدث. يمكن تقييد هذه الوظيفة ضمن سلسلة.
  214. </p>
  215. <h3>[method:AnimationAction syncWith]( [param:AnimationAction otherAction] )</h3>
  216. <p>
  217. يزامن هذا الإجراء مع الإجراء الآخر الذي تم تمريره. يمكن تقييد هذه الوظيفة ضمن سلسلة. <br /><br />
  218. تتم المزامنة عن طريق تعيين قيم [page:.time time] و [page:.timeScale timeScale] لهذا الإجراء على القيم المقابلة للإجراء الآخر (إيقاف أي التواء مجدول).<br /><br />
  219. ملاحظة: لن يتم الكشف عن التغييرات المستقبلية في *time* و *timeScale* للإجراء الآخر.
  220. </p>
  221. <h3>[method:AnimationAction warp]( [param:Number startTimeScale], [param:Number endTimeScale], [param:Number durationInSeconds] )</h3>
  222. <p>
  223. يغير سرعة التشغيل ، خلال الفترة الزمنية المنقضية ، عن طريق تعديل [page:.timeScale timeScale] تدريجيًا من *startTimeScale* إلى *endTimeScale*.يمكن تقييد هذه الوظيفة ضمن سلسلة.
  224. </p>
  225. <h2>الأحداث (Events)</h2>
  226. <p class="desc">
  227. هناك حدثان يشيران عند انتهاء حلقة واحدة من الإجراء على التوالي. يمكنك الرد عليهم من خلال:
  228. </p>
  229. <code>
  230. mixer.addEventListener( 'loop', function( e ) { …} ); // properties of e: type, action and loopDelta
  231. mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction
  232. </code>
  233. <h2>المصدر (Source)</h2>
  234. <p>
  235. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  236. </p>
  237. </body>
  238. </html>