AnimationAction.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc">
  12. AnimationActions 用来调度存储在[page:AnimationClip AnimationClips]中的动画。<br /><br />
  13. 说明: AnimationAction的大多数方法都可以链式调用<br /><br />
  14. 在使用手册的“下一步”章节中,“动画系统”一文对three.js动画系统中的不同元素作出了概述。
  15. </p>
  16. <h2>构造器</h2>
  17. <h3>[name]( [param:AnimationMixer mixer], [param:AnimationClip clip], [param:Object3D localRoot], [param:Number blendMode] )</h3>
  18. <p>
  19. [page:AnimationMixer mixer] - 被此动作控制的 *动画混合器* <br />
  20. [page:AnimationClip clip] - *动画剪辑* 保存了此动作当中的动画数据 <br />
  21. [page:Object3D localRoot] (optional) - 动作执行的根对象,默认值为 `null`。 <br />
  22. [page:Number blendMode] (optional)- 定义当同时播放两个或多个动画时如何混合/组合动画。默认值为 *clip.blendMode*。<br /><br />
  23. 说明: 不要直接调用这个构造函数,而应该先用[page:AnimationMixer.clipAction]实例化一个AnimationAction,因为这个方法提供了缓存以提高性能。
  24. </p>
  25. <h2>属性</h2>
  26. <h3>[property:Number blendMode]</h3>
  27. <p>
  28. 定义当同时播放两个或多个动画时如何混合/组合动画。有效值是 *NormalAnimationBlendMode*
  29. (default) 和 *AdditiveAnimationBlendMode*。
  30. </p>
  31. <h3>[property:Boolean clampWhenFinished]</h3>
  32. <p>
  33. 如果 *clampWhenFinished* 值设为true, 那么动画将在最后一帧之后自动暂停([page:.paused paused])<br /><br />
  34. 如果 *clampWhenFinished* 值为false, [page:.enabled enabled] 属性值将在动作的最后一次循环完成之后自动改为false, 那么这个动作以后就不会再执行。 <br /><br />
  35. 默认值为false <br /><br />
  36. 说明: 动作如果被中断了,*clampWhenFinished*将无效 (只有当最后一次循环执行完毕之后才能起效)
  37. </p>
  38. <h3>[property:Boolean enabled]</h3>
  39. <p>
  40. *enabled* 值设为*false*会禁用动作, 也就是无效.默认值是*true* <br /><br />
  41. 当*enabled*被重新置为*true*, 动画将从当前时间([page:.time time])继续
  42. (将 *enabled* 置为 *false* 不会重置此次动作) <br /><br />
  43. 说明: 将*enabled*置为*true*不会让动画自动重新开始。只有满足以下条件时才会马上重新开始:
  44. 暂停([page:.paused paused])值为*false*, 同时动作没有失效 (执行停止([page:.stop stop])命令或重置([page:.reset reset])命令,
  45. 且权重([page:.weight weight])和时间比例([page:.timeScale timeScale])都不能为0
  46. </p>
  47. <h3>[property:Number loop]</h3>
  48. <p>
  49. 循环模式 (可以通过[page:.setLoop setLoop]改变)。默认值是
  50. [page:Animation THREE.LoopRepeat] (重复[page:.repetitions repetitions]次数无穷)<br /><br />
  51. 必须是以下值之一:<br /><br />
  52. [page:Animation THREE.LoopOnce] - 只执行一次 <br />
  53. [page:Animation THREE.LoopRepeat] - 重复次数为*repetitions*的值, 且每次循环结束时候将回到起始动作开始下一次循环。 <br />
  54. [page:Animation THREE.LoopPingPong] - 重复次数为*repetitions*的值, 且像乒乓球一样在起始点与结束点之间来回循环。
  55. </p>
  56. <h3>[property:Boolean paused]</h3>
  57. <p>
  58. *paused*置为*true*会通过将动作的有效时间比例改为0来使动作暂停执行。默认值是*false*<br /><br />
  59. </p>
  60. <h3>[property:Number repetitions]</h3>
  61. <p>
  62. 整个动作过程动画剪辑([page:AnimationClip])执行的次数,可以通过[page:.setLoop setLoop]修改。默认值是*Infinity*<br /><br />
  63. 如果循环模式([page:.loop loop mode])值被设置为[page:Animation THREE.LoopOnce],repetitions值将会无效。
  64. </p>
  65. <h3>[property:Number time]</h3>
  66. <p>
  67. 动作开始的时间点 (单位是秒, 从0开始计时).<br /><br />
  68. 这个值被限定在 0到clip.duration(根据循环状态)范围之内. 可以通过改变时间比例([page:.timeScale timeScale]) (使用
  69. [page:.setEffectiveTimeScale setEffectiveTimeScale] 或者 [page:.setDuration setDuration])来将它相对于全局的混合器缩放.<br />
  70. </p>
  71. <h3>[property:Number timeScale]</h3>
  72. <p>
  73. 时间([page:.time time])的比例因子. 值为0时会使动画暂停。值为负数时动画会反向执行。默认值是1。<br /><br />
  74. 关于*timeScale*属性/方法 (不同于 *time*) 有:
  75. [page:.getEffectiveTimeScale getEffectiveTimeScale],
  76. [page:.halt halt],
  77. [page:.paused paused],
  78. [page:.setDuration setDuration],
  79. [page:.setEffectiveTimeScale setEffectiveTimeScale],
  80. [page:.stopWarping stopWarping],
  81. [page:.syncWith syncWith],
  82. [page:.warp warp].
  83. </p>
  84. <h3>[property:Number weight]</h3>
  85. <p>
  86. 动作的影响程度 (取值范围[0, 1]). 0 (无影响)到1(完全影响)之间的值可以用来混合多个动作。默认值是1<br /><br />
  87. 关于*weight*的属性/方法有:
  88. [page:.crossFadeFrom crossFadeFrom],
  89. [page:.crossFadeTo crossFadeTo],
  90. [page:.enabled enabled],
  91. [page:.fadeIn fadeIn],
  92. [page:.fadeOut fadeOut],
  93. [page:.getEffectiveWeight getEffectiveWeight],
  94. [page:.setEffectiveWeight setEffectiveWeight],
  95. [page:.stopFading stopFading].
  96. </p>
  97. <h3>[property:Boolean zeroSlopeAtEnd]</h3>
  98. <p>
  99. 启用平滑插值,无须单独剪辑开始、循环和结束。默认值是*true*
  100. </p>
  101. <h3>[property:Boolean zeroSlopeAtStart]</h3>
  102. <p>
  103. 启用平滑插值,无须单独剪辑开始、循环和结束。默认值是*true*
  104. </p>
  105. <h2>方法</h2>
  106. <h3>[method:this crossFadeFrom]( [param:AnimationAction fadeOutAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
  107. <p>
  108. 在传入的时间段内,让此动作淡入([page:.fadeIn fade in]),同时让另一个动作淡出。此方法可链式调用。<br /><br />
  109. 如果warpBoolean值是true, 额外的 [page:.warp warping] (时间比例的渐变)将会被应用。 <br /><br />
  110. 说明: 与 *fadeIn*/*fadeOut*一样, 淡入淡出动作开始/结束时的权重是1.
  111. </p>
  112. <h3>[method:this crossFadeTo]( [param:AnimationAction fadeInAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
  113. <p>
  114. 在传入的时间段内, 让此动作淡出([page:.fadeOut fade out]),同时让另一个动作淡入。此方法可链式调用。<br /><br />
  115. 如果warpBoolean值是true, 额外的 [page:.warp warping] (时间比例的渐变)将会被应用。<br /><br />
  116. 说明: 与 *fadeIn*/*fadeOut*一样, 淡入淡出动作开始/结束时的权重是1.
  117. </p>
  118. <h3>[method:this fadeIn]( [param:Number durationInSeconds] )</h3>
  119. <p>
  120. 在传入的时间间隔内,逐渐将此动作的权重([page:.weight weight])由0升到1。此方法可链式调用。
  121. </p>
  122. <h3>[method:this fadeOut]( [param:Number durationInSeconds] )</h3>
  123. <p>
  124. 在传入的时间间隔内,逐渐将此动作的权重([page:.weight weight])由1降至0。此方法可链式调用。
  125. </p>
  126. <h3>[method:Number getEffectiveTimeScale]()</h3>
  127. <p>
  128. 返回有效时间比例(考虑当前的变形状态和[page:.paused paused]值).
  129. </p>
  130. <h3>[method:number getEffectiveWeight]()</h3>
  131. <p>
  132. 返回影响权重(考虑当前淡入淡出状态和[page:.enabled enabled]的值).
  133. </p>
  134. <h3>[method:AnimationClip getClip]()</h3>
  135. <p>
  136. 返回存有此动作的动画数据的剪辑
  137. </p>
  138. <h3>[method:AnimationMixer getMixer]()</h3>
  139. <p>
  140. 返回负责完成此动作的混合器
  141. </p>
  142. <h3>[method:Object3D getRoot]()</h3>
  143. <p>
  144. 返回执行此动作的根对象
  145. </p>
  146. <h3>[method:this halt]( [param:Number durationInSeconds] )</h3>
  147. <p>
  148. 在传入的时间间隔内,通过从当前值开始逐渐降低时间比例([page:.timeScale timeScale])使动画逐渐减速至0。此方法可链式调用。
  149. </p>
  150. <h3>[method:Boolean isRunning]()</h3>
  151. <p>
  152. 返回当前此动作的时间([page:.time time])是否正在流逝 <br /><br />
  153. 除了在混合器中被激活之外 (参见[page:.isScheduled isScheduled])必须满足以下条件才会返回true:
  154. [page:.paused paused]值等于false, [page:.enabled enabled]值为true,
  155. [page:.timeScale timeScale]值不为0, 而且没有安排延时启动([page:.startAt startAt]).<br /><br />
  156. 说明 *isRunning* 为true并不意味着此动画一定会切实地被看到。仅当权重([page:.weight weight])被设置为非零值时才是这种情况。
  157. </p>
  158. <h3>[method:Boolean isScheduled]()</h3>
  159. <p>
  160. 如果动作是在混合器中被激活的,返回true。<br /><br />
  161. 说明: 这并不意味着动画正在执行中 (需要额外判断[page:.isRunning isRunning]值)
  162. </p>
  163. <h3>[method:this play]()</h3>
  164. <p>
  165. 让混合器激活动作。此方法可链式调用。<br /><br />
  166. 说明: 激活动作并不意味着动画会立刻开始: 如果动作在此之前已经完成(到达最后一次循环的结尾),或者如果已经设置了延时
  167. 启动(通过 [page:.startAt startAt]),则必须先执行重置操作([page:.reset reset])。 一些其它的设置项 ([page:.paused paused]=true, [page:.enabled enabled]=false,
  168. [page:.weight weight]=0, [page:.timeScale timeScale]=0) 也可以阻止动画的开始。
  169. </p>
  170. <h3>[method:this reset]()</h3>
  171. <p>
  172. 重置动作。此方法可链式调用。<br /><br />
  173. 该方法会将暂停值 [page:.paused paused] 设为false, 启用值[page:.enabled enabled] 设为true,时间值
  174. [page:.time time]设为0, 中断任何预定的淡入淡出和变形, 以及移除内部循环次数以及延迟启动。<br /><br />
  175. 说明: 停止方法[page:.stop stop]内调用了重置方法(reset), 但是 .*reset*不会调用 .*stop*。
  176. 这就表示: 如果你想要这两者, 重置并且停止, 不要调用*reset*; 而应该调用*stop*。
  177. </p>
  178. <h3>[method:this setDuration]( [param:Number durationInSeconds] )</h3>
  179. <p>
  180. 设置单次循环的持续时间(通过调整时间比例([page:.timeScale timeScale])以及停用所有的变形)。此方法可以链式调用。
  181. </p>
  182. <h3>[method:this setEffectiveTimeScale]( [param:Number timeScale] )</h3>
  183. <p>
  184. 设置时间比例([page:.timeScale timeScale])以及停用所有的变形)。 此方法可以链式调用。<br /><br />
  185. 如果暂停 ([page:.paused paused])值为false, 有效的时间比例(一个内部属性) 也会被设为该值; 否则有效时间比例 (直接影响当前动画
  186. 将会被设为0.<br /><br />
  187. 说明: 如果时间比例.*timeScale* 被此方法设为0,暂停值*paused*不会被自动改为*true*。
  188. </p>
  189. <h3>[method:this setEffectiveWeight]( [param:Number weight] )</h3>
  190. <p>
  191. 设置权重([page:.weight weight])以及停止所有淡入淡出。该方法可以链式调用。<br /><br />
  192. 如果启用属性([page:.enabled enabled])为true, 那么有效权重(一个内部属性) 也会被设为该值; 否则有效权重 (直接影响当前动画)将会被设为0.<br /><br />
  193. 说明: 如果该方法将权重*weight*值设为0,启用值*enabled*不会被自动改为*false*。
  194. </p>
  195. <h3>[method:this setLoop]( [param:Number loopMode], [param:Number repetitions] )</h3>
  196. <p>
  197. 设置循环([page:.loop loop mode])及循环重复次数([page:.repetitions repetitions])。改方法可被链式调用。
  198. </p>
  199. <h3>[method:this startAt]( [param:Number startTimeInSeconds] )</h3>
  200. <p>
  201. 定义延时启动的事件 (通常会传入[page:AnimationMixer.time] +
  202. deltaTimeInSeconds)。 该方法可以链式调用。<br /><br />
  203. 说明: 如果 *startAt*方法是和[page:.play play]方法一起链式调用, 或者动画已经在混合器中被激活 (通过先行调用*play*, 同时没有停止或重置),动画将仅在给定时间开始.
  204. </p>
  205. <h3>[method:this stop]()</h3>
  206. <p>
  207. 让混合器停止动作。该方法可以被链式调用。<br /><br />
  208. 动作会马上停止以及完全[page:.reset 重置].<br /><br />
  209. 说明: 你可以通过[page:AnimationMixer.stopAllAction mixer.stopAllAction]在一个混合器中一举停止所有处于激活态的动作。
  210. </p>
  211. <h3>[method:this stopFading]()</h3>
  212. <p>
  213. 停止动作中所有预定的淡入淡出([page:.fadeIn fading])。该方法可以被链式调用。
  214. </p>
  215. <h3>[method:this stopWarping]()</h3>
  216. <p>
  217. 停用动作中所有预定的变形[page:.warp warping]。该方法可被链式调用。
  218. </p>
  219. <h3>[method:this syncWith]( [param:AnimationAction otherAction] )</h3>
  220. <p>
  221. 将此动作与传入的其它动作同步。此方法可被链式调用。<br /><br />
  222. 同步是通过将动作的时间([page:.time time])或时间比例([page:.timeScale timeScale])与另一动作设置一致来实现的
  223. (停用所有预定的变形)。<br /><br />
  224. 说明: 另一动作的 *time* 和 *timeScale*未来变化将不会被检测到.
  225. </p>
  226. <h3>[method:this warp]( [param:Number startTimeScale], [param:Number endTimeScale], [param:Number durationInSeconds] )</h3>
  227. <p>
  228. 在传入的事件间隔内,通过逐渐将时间比例[page:.timeScale timeScale]由*startTimeScale*修改至*endTimeScale*来改变回放速度。该方法可被链式调用。
  229. </p>
  230. <h2>事件</h2>
  231. <p class="desc">
  232. 有两个事件分别表示了单次循环的结束和全部动作的结束,你可以这样对它们做出响应:
  233. </p>
  234. <code>
  235. mixer.addEventListener( 'loop', function( e ) { …} ); // properties of e: type, action and loopDelta
  236. mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction
  237. </code>
  238. <h2>源码</h2>
  239. <p>
  240. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  241. </p>
  242. </body>
  243. </html>
粤ICP备19079148号