AnimationAction.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <!DOCTYPE html>
  2. <html lang="ko">
  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]에 저장된 애니메이션을 예약하는 데 사용됩니다.
  13. <br /><br />
  14. 참고: 대부분의 애니메이션 액션 메소드들은 체인으로 연결되어 있습니다.<br /><br />
  15. three.js 애니메이션 시스템 엘리먼트에 대한 개요들은 매뉴얼의 "Next Steps" 섹션에 있는 "애니메이션 시스템" 글을 참조하세요.
  16. </p>
  17. <h2>생성자</h2>
  18. <h3>[name]( [param:AnimationMixer mixer], [param:AnimationClip clip], [param:Object3D localRoot] )</h3>
  19. <p>
  20. [page:AnimationMixer mixer] - 애니메이션 믹서는 애니메이션 액션에 의해 제어됩니다.<br />
  21. [page:AnimationClip clip] - 애니메이션 클립은 애니메이션 액션에 대한 애니메이션 데이터를 보유하고 있습니다.<br />
  22. [page:Object3D localRoot] - 루트 오브젝트는 애니메이션 액션을 수행합니다.<br /><br />
  23. 참고: 해당 생성자를 직접 호출하는 대신 [page:AnimationMixer.clipAction] 으로 AnimationAction을 인스턴스화 해야합니다. 해당 메소드는 더 나은 성능을 위한 캐싱을 제공하기 때문입니다.
  24. </p>
  25. <h2>속성</h2>
  26. <h3>[property:Boolean clampWhenFinished]</h3>
  27. <p>
  28. *clampWhenFinished* 가 true로 설정 되었을 경우 자동으로 애니메이션의 마지막 프레임에서 [page:.paused paused] 됩니다.
  29. <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* 인 경우, - 그동안 애니메이션 액션은 비활성화 되지 않습니다
  40. ( [page:.stop stop] 또는 [page:.reset reset] 명령을 실행하여) 그리고 [page:.weight weight], [page:.timeScale timeScale] 는 둘 다 0 이 아닙니다.
  41. </p>
  42. <h3>[property:Number loop]</h3>
  43. <p>
  44. 반복 모드 ([page:.setLoop setLoop] 으로 변경할 수 있습니다). 기본값은 [page:Animation THREE.LoopRepeat] ([page:.repetitions repetitions] 는 무한한 수를 포함)
  45. <br /><br />
  46. 다음의 상수값 중 하나여야 함:<br /><br />
  47. [page:Animation THREE.LoopOnce] - 클립 한번 재생 <br />
  48. [page:Animation THREE.LoopRepeat] - 클립의 끝에서 시작 부분으로 즉시 이동할 때마다 선택한 *repetitions* 수 만큼 클립 재생 <br />
  49. [page:Animation THREE.LoopPingPong] - 선택한 *repetitions* 수 만큼 클립을 앞뒤로 재생
  50. </p>
  51. 애니메이션 액션에서 수행된 [page:AnimationClip] 의 반복 횟수입니다.
  52. [page:.setLoop setLoop]을 통해 설정할 수 있습니다. 기본값은 *무한대* 입니다. <br /><br />
  53. [page:. loop loop mode] 가 [page:animation THREE.LoopOnce] 로 설정되어 있으면 숫자를 설정해도 아무런 영향을 미치지 않습니다.
  54. </p>
  55. <h3>[property:Number time]</h3>
  56. <p>
  57. 애니메이션 액션의 로컬 시간 속성 (초 단위, 0부터 시작).<br /><br />
  58. 시간 속성은 값이 고정 되거나, 반복 상태에 따라 0 ... clip.duration 으로 래핑 됩니다.
  59. [page:.timeScale timeScale] 을 변경하여 글로벌 믹서 타임을 상대적으로 확장할 수 있습니다
  60. ([page:.setEffectiveTimeScale setEffectiveTimeScale] 또는 [page:.setDuration setDuration] 을 이용하여) <br />
  61. </p>
  62. <h3>[property:Number timeScale]</h3>
  63. <p>
  64. [page:.time time] 에 대한 스케일 팩터 속성입니다. 값이 0 일 경우 애니메이션은 중지됩니다.
  65. 음수 값 일 경우 애니메이션은 뒤로 재생 됩니다. 기본값은 *1* 입니다. <br /><br />
  66. *timeScale* 과 관련된 속성/메소드는:
  67. [page:.getEffectiveTimeScale getEffectiveTimeScale],
  68. [page:.halt halt],
  69. [page:.paused paused],
  70. [page:.setDuration setDuration],
  71. [page:.setEffectiveTimeScale setEffectiveTimeScale],
  72. [page:.stopWarping stopWarping],
  73. [page:.syncWith syncWith],
  74. [page:.warp warp] 입니다.
  75. </p>
  76. <h3>[property:Number weight]</h3>
  77. <p>
  78. 애니메이션 액션의 중요도에 대한 속성입니다 ([0,1] 간격).
  79. 값은 *0* (영향 없음) 과 *1* (최대 영향) 사이의 값을 사용할 수 있고, 여러 액션들을 혼합해서 사용할 수 있습니다.
  80. 기본값은 *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>메소드</h2>
  100. <h3>[method:this crossFadeFrom]( [param:AnimationAction fadeOutAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
  101. <p>
  102. 해당 메소드는 [page:.fadeIn fade in] 을 수행하게 되고, 전달 된 시간 간격 내에서 동시에 다른 작업을 페이드 아웃을 수행합니다.
  103. 해당 메소드는 체인으로 연결될 수 있습니다. <br /><br />
  104. 만약 warpBoolean 이 true 일 경우, 추가적으로 [page.warp warping] 이 적용될 것입니다 (time scales 만큼 점차적으로 변경). <br /><br />
  105. 참고: *fadeIn*/*fadeOut* 처럼, 페이딩의 시작/종료의 가중치 값이 1일 때 동작됩니다.
  106. </p>
  107. <h3>[method:this crossFadeTo]( [param:AnimationAction fadeInAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
  108. <p>
  109. 해당 메소드는 [page:.fadeOut fade out] 을 수행하게 되고, 전달 된 시간 간격 내에서 동시에 다른 작업을 페이드 인을 수행합니다.
  110. 해당 메소드는 체인으로 연결될 수 있습니다. <br /><br />
  111. 만약 warpBoolean 이 true 일 경우, 추가적으로 [page.warp warping] 이 적용될 것입니다 (time scales 만큼 점차적으로 변경). <br /><br />
  112. 참고: *fadeIn*/*fadeOut* 처럼, 페이딩의 시작/종료의 가중치 값이 1일 때 동작됩니다.
  113. </p>
  114. <h3>[method:this fadeIn]( [param:Number durationInSeconds] )</h3>
  115. <p>
  116. 전달된 시간 간격 내에서 페이드 인의 [page:.weight weight] 의 값을 0 에서 1으로 점차적으로 증가합니다.
  117. 해당 메소드는 체인으로 연결할 수 있습니다.
  118. </p>
  119. <h3>[method:this fadeOut]( [param:Number durationInSeconds] )</h3>
  120. <p>
  121. 전달된 시간 간격 내에서 페이드 아웃의 [page:.weight weight] 의 값을 1 에서 0으로 점차적으로 감소합니다.
  122. 해당 메소드는 체인으로 연결할 수 있습니다.
  123. </p>
  124. <h3>[method:Number getEffectiveTimeScale]()</h3>
  125. <p>
  126. 실질적인 타임 스케일을 반환합니다. (현재 워핑 상태 및 [page:.paused paused] 을 고려해야합니다).
  127. </p>
  128. <h3>[method:number getEffectiveWeight]()</h3>
  129. <p>
  130. 실질적인 가중치를 반환합니다. (현재 페이딩 상태 및 [page:.enabled enabled] 을 고려해야합니다).
  131. </p>
  132. <h3>[method:AnimationClip getClip]()</h3>
  133. <p>
  134. 애니메이션 액션에 대한 애니메이션 데이터를 보관하는 클립을 반환합니다.
  135. </p>
  136. <h3>[method:AnimationMixer getMixer]()</h3>
  137. <p>
  138. 애니메이션 액션을 재생할 애니메이션 믹서를 반환합니다.
  139. </p>
  140. <h3>[method:Object3D getRoot]()</h3>
  141. <p>
  142. 애니메이션 액션이 수행되는 루트 객체를 반환합니다.
  143. </p>
  144. <h3>[method:this halt]( [param:Number durationInSeconds] )</h3>
  145. <p>
  146. 전달 된 시간 간격 내에서 [page:.timeScale timeScale]을 점차적으로 애니메이션 속도를 0으로 감소시킵니다(현재 값에서부터 시작).
  147. 해당 메소드는 체인으로 연결할 수 있습니다.
  148. </p>
  149. <h3>[method:Boolean isRunning]()</h3>
  150. <p>
  151. 애니메이션 액션이 현재 [page:.time time] 동작중일 경우 true 을 반환합니다. <br /><br />
  152. 추가적으로 믹서에서 활성화되는 것 이외에 ([page:.isScheduled isScheduled] 참조) 다음 조건을 충족해야 합니다:
  153. [page:.paused paused] 는 false 조건을 충족해야 합니다,
  154. [page:.enabled enabled] 는 true 조건을 충족해야 합니다,
  155. [page:.timeScale timeScale] 는 0이 아니여야 하고, ([page:.startAt start] 지연되지 않아야 합니다. <br /><br />
  156. 참고: *isRunning* 이 true 이여도 애니메이션이 실제 동작한다는 것을 의미하지는 않습니다.
  157. [page:.weight weight] 가 0이 아닌 값으로 추가로 설정된 경우에만 해당됩니다.
  158. </p>
  159. <h3>[method:Boolean isScheduled]()</h3>
  160. <p>
  161. 만약 애니메이션 액션이 믹서에서 활성화 될 경우 true 를 반환합니다. <br /><br />
  162. 참고: 해당 메소드는 애니메이션이 실제로 동작하고 있음을 의미하지는 않습니다. ([page:.isRunning isRunning] 에 대한 추가적인 비교 조건이 필요)
  163. </p>
  164. <h3>[method:this play]()</h3>
  165. <p>
  166. 믹서에 애니메이션 액션을 활성화하도록 요청합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  167. 참고: 해당 메소드를 활성화 할 경우 반드시 애니메이션이 실행되는 것을 의미하지는 않습니다:
  168. 만약 애니메이션 액션 작업이 이미 완료되었거나 (마지막 루프의 끝에 도달하여), 지연된 시작 시간이 설정된 경우([page:.startAt startAt] 을 통해), 먼저 [page:.reset rest]을 처음으로 실행해야 합니다.
  169. 일부 다른 설정 ([page:.paused paused] = true, [page:.enabled enabled] = false, [page:.weight weight] = 0, [page:.timeScale timeScale] = 0) 으로 인해 애니메이션이 재생되지 않을 수 있습니다.
  170. </p>
  171. <h3>[method:this reset]()</h3>
  172. <p>
  173. 애니메이션 액션을 재설정 합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  174. 해당 메소드는
  175. [page:.paused paused] 를 false로 설정합니다,
  176. [page:.enabled enabled] 를 true로 설정합니다,
  177. [page:.time time] 을 0으로 설정합니다,
  178. 미리 예약된 페이딩 및 워핑을 중단하고 내부 루프 수를 제거하고 시작을 지연시킵니다. <br /><br />
  179. 참고: *.reset* 은 항상 [page:.stop stop] 에 의해 호출됩니다 그러나, *reset* 은 스스로 *stop* 을 호출하지는 않습니다. <br/>
  180. 기술: 만약 당신이 *stop* 과 *reset* 둘다 호출하기를 원하면, *reset* 은 호출하지 말고 *stop* 을 해야합니다. <br/>
  181. </p>
  182. <h3>[method:this setDuration]( [param:Number durationInSeconds] )</h3>
  183. <p>
  184. 애니메이션 액션의 단일 루프의 기간을 설정합니다 ([page:.timeScale timeScale] 을 조정하고, 미리 예약된 워핑을 중단).
  185. 해당 메소드는 체인으로 연결할 수 있습니다.
  186. </p>
  187. <h3>[method:this setEffectiveTimeScale]( [param:Number timeScale] )</h3>
  188. <p>
  189. [page:.timeScale timeScale] 을 설정하고 예약된 워핑을 중단합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  190. 만약 [page:.paused paused] 가 false 일 경우, 실질적인 타임 스케일 (내부 속성) 값은 해당 timeScale 값으로 설정됩니다;
  191. 그렇지 않으면, 실질적인 타임 스케일 (현재 애니메이션에 직접적으로 영향을 미치는) 값은 0으로 설정됩니다. <br /><br />
  192. 참고: 해당 메소드로 인해 *timeScale* 의 값이 0 으로 설정 되어도 .*paused* 값은 자동적으로 *true* 로 변경되지 않습니다.
  193. </p>
  194. <h3>[method:this setEffectiveWeight]( [param:Number weight] )</h3>
  195. <p>
  196. [page:.weight weight] 이 설정되고 예약된 페이딩을 중지 합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  197. 만약 [page:..enabled enabled] 이 true 일 경우, 실질적인 가중치 (내부 속성* 값은 해당 weight 값으로 설정됩니다;
  198. 그렇지 않으면, 실질적인 가중치 (현재 애니메이션에 직접적으로 영향을 미치는) 값은 0으로 설정됩니다. <br /><br />
  199. 참고: 해당 메소드로 인해 *weight* 의 값이 0 으로 설정 되어도 .*enabled* 값은 자동적으로 *false*로 변경되지 않습니다.
  200. </p>
  201. <h3>[method:this setLoop]( [param:Number loopMode], [param:Number repetitions] )</h3>
  202. <p>
  203. [page:.loop loop mode] 및 [page:.repetitions repetitions] 의 횟수를 설정합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
  204. </p>
  205. <h3>[method:this startAt]( [param:Number startTimeInSeconds] )</h3>
  206. <p>
  207. 지연된 시작 이벤트를 정의합니다 (일반적으로 AnimationMixer.time + deltaTimeInSeconds에서 전달됨). 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  208. 참고: .[page:.startAt startAt] 메소드가 [page:.play play] 메소드와 함께 연결되어 있거나 애니메이션이 믹서에서 활성화 된 경우 (중지 또는 재설정없이 .*play* 를 먼저 호출하여) 애니메이션은 지정된 시간에만 시작됩니다.
  209. </p>
  210. <h3>[method:this stop]()</h3>
  211. <p>
  212. 믹서에게 애니메이션 액션을 비활성화하도록 설정합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  213. 해당 메소드를 실행하면 작업이 즉시 중단되고 완전히 재설정 [page:.rest rest] 됩니다. <br /><br />
  214. 참고: [page:.AnimationMixer.stopAllAction mixer.stopAllAction] 을 통해 같은 믹서에 있는 모든 활성된 작업들을 한번에 종료할 수 있습니다.
  215. </p>
  216. <h3>[method:this stopFading]()</h3>
  217. <p>
  218. 애니메이션 액션에 적용되어 있는 [page:.fadeIn fading] 을 종료합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
  219. </p>
  220. <h3>[method:this stopWarping]()</h3>
  221. <p>
  222. 애니메이션 액션에 적용되어 있는 [page:.warp warping] 을 종료합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
  223. </p>
  224. <h3>[method:this syncWith]( [param:AnimationAction otherAction] )</h3>
  225. <p>
  226. 애니메이션 액션을 전달된 다른 작업과 함께 동기화를 합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
  227. 애니메이션 액션의 동기화는 [page:.time time] 및 [page:.timeScale timeScale] 값을 다른 작업의 값으로 대응되어 설정됩니다 (예약 된 워핑 중지). <br /><br />
  228. 참고: 다른 작업들의 *time* 및 *timeScale* 의 향후 변경 사항은 감지되지 않습니다.
  229. </p>
  230. <h3>[method:this warp]( [param:Number startTimeScale], [param:Number endTimeScale], [param:Number durationInSeconds] )</h3>
  231. <p>
  232. 들어오는 이벤트 간격에서 [page:.timeScale timeScale] 을 *startTimeScale* 에서 *endTimeScale* 로 점차적으로 재생 속도를 변경합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
  233. </p>
  234. <h2>이벤트</h2>
  235. <p class="desc">
  236. 단일 루프의 끝과 전체 작업의 ​​끝을 나타내는 두 가지 이벤트가 있습니다. 당신은 다음과 같이 응답 할 수 있습니다.
  237. </p>
  238. <code>
  239. mixer.addEventListener( 'loop', function( e ) { …} ); // properties of e: type, action and loopDelta
  240. mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction
  241. </code>
  242. <h2>소스</h2>
  243. <p>
  244. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  245. </p>
  246. </body>
  247. </html>