AnimationClip.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>AnimationClip - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <h1 translate="no">AnimationClip</h1>
  13. <section>
  14. <header>
  15. <div class="class-description"><p>A reusable set of keyframe tracks which represent an animation.</p></div>
  16. </header>
  17. <article>
  18. <div class="container-overview">
  19. <h2>Constructor</h2>
  20. <h3 class="name name-method" id="AnimationClip" translate="no">new <a href="#AnimationClip">AnimationClip</a><span class="signature">( name : <span class="param-type">string</span>, duration : <span class="param-type">number</span>, tracks : <span class="param-type">Array.&lt;<a href="KeyframeTrack.html">KeyframeTrack</a>></span>, blendMode : <span class="param-type"><a href="global.html#NormalAnimationBlendMode">NormalAnimationBlendMode</a> | <a href="global.html#AdditiveAnimationBlendMode">AdditiveAnimationBlendMode</a></span> )</span> </h3>
  21. <div class="method">
  22. <div class="description">
  23. <p>Constructs a new animation clip.</p>
  24. <p>Note: Instead of instantiating an AnimationClip directly with the constructor, you can
  25. use the static interface of this class for creating clips. In most cases though, animation clips
  26. will automatically be created by loaders when importing animated 3D assets.</p>
  27. </div>
  28. <table class="params">
  29. <tbody>
  30. <tr>
  31. <td class="name">
  32. <strong>name</strong>
  33. </td>
  34. <td class="description last">
  35. <p>The clip's name.</p>
  36. <p>Default is <code>''</code>.</p>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td class="name">
  41. <strong>duration</strong>
  42. </td>
  43. <td class="description last">
  44. <p>The clip's duration in seconds. If a negative value is passed,
  45. the duration will be calculated from the passed keyframes.</p>
  46. <p>Default is <code>-1</code>.</p>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td class="name">
  51. <strong>tracks</strong>
  52. </td>
  53. <td class="description last">
  54. <p>An array of keyframe tracks.</p>
  55. </td>
  56. </tr>
  57. <tr>
  58. <td class="name">
  59. <strong>blendMode</strong>
  60. </td>
  61. <td class="description last">
  62. <p>Defines how the animation
  63. is blended/combined when two or more animations are simultaneously played.</p>
  64. <p>Default is <code>NormalAnimationBlendMode</code>.</p>
  65. </td>
  66. </tr>
  67. </tbody>
  68. </table>
  69. </div>
  70. </div>
  71. <h2 class="subsection-title">Properties</h2>
  72. <div class="member">
  73. <h3 class="name" id="blendMode" translate="no">.<a href="#blendMode">blendMode</a><span class="type-signature"> : <a href="global.html#NormalAnimationBlendMode">NormalAnimationBlendMode</a> | <a href="global.html#AdditiveAnimationBlendMode">AdditiveAnimationBlendMode</a></span> </h3>
  74. <div class="description">
  75. <p>Defines how the animation is blended/combined when two or more animations
  76. are simultaneously played.</p>
  77. </div>
  78. </div>
  79. <div class="member">
  80. <h3 class="name" id="duration" translate="no">.<a href="#duration">duration</a><span class="type-signature"> : number</span> </h3>
  81. <div class="description">
  82. <p>The clip's duration in seconds.</p>
  83. </div>
  84. </div>
  85. <div class="member">
  86. <h3 class="name" id="name" translate="no">.<a href="#name">name</a><span class="type-signature"> : string</span> </h3>
  87. <div class="description">
  88. <p>The clip's name.</p>
  89. </div>
  90. </div>
  91. <div class="member">
  92. <h3 class="name" id="tracks" translate="no">.<a href="#tracks">tracks</a><span class="type-signature"> : Array.&lt;<a href="KeyframeTrack.html">KeyframeTrack</a>></span> </h3>
  93. <div class="description">
  94. <p>An array of keyframe tracks.</p>
  95. </div>
  96. </div>
  97. <div class="member">
  98. <h3 class="name" id="userData" translate="no">.<a href="#userData">userData</a><span class="type-signature"> : Object</span> </h3>
  99. <div class="description">
  100. <p>An object that can be used to store custom data about the animation clip.
  101. It should not hold references to functions as these will not be cloned.</p>
  102. </div>
  103. </div>
  104. <div class="member">
  105. <h3 class="name" id="uuid" translate="no">.<a href="#uuid">uuid</a><span class="type-signature"> : string</span> <span class="type-signature">(readonly) </span></h3>
  106. <div class="description">
  107. <p>The UUID of the animation clip.</p>
  108. </div>
  109. </div>
  110. <h2 class="subsection-title">Methods</h2>
  111. <h3 class="name name-method" id="clone" translate="no">.<a href="#clone">clone</a><span class="signature">()</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  112. <div class="method">
  113. <div class="description">
  114. <p>Returns a new animation clip with copied values from this instance.</p>
  115. </div>
  116. <dl class="details">
  117. <dt class="tag-returns"><strong>Returns:</strong> A clone of this instance.</dt>
  118. </dl>
  119. </div>
  120. <h3 class="name name-method" id="optimize" translate="no">.<a href="#optimize">optimize</a><span class="signature">()</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  121. <div class="method">
  122. <div class="description">
  123. <p>Optimizes each track by removing equivalent sequential keys (which are
  124. common in morph target sequences).</p>
  125. </div>
  126. <dl class="details">
  127. <dt class="tag-returns"><strong>Returns:</strong> A reference to this animation clip.</dt>
  128. </dl>
  129. </div>
  130. <h3 class="name name-method" id="resetDuration" translate="no">.<a href="#resetDuration">resetDuration</a><span class="signature">()</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  131. <div class="method">
  132. <div class="description">
  133. <p>Sets the duration of this clip to the duration of its longest keyframe track.</p>
  134. </div>
  135. <dl class="details">
  136. <dt class="tag-returns"><strong>Returns:</strong> A reference to this animation clip.</dt>
  137. </dl>
  138. </div>
  139. <h3 class="name name-method" id="toJSON" translate="no">.<a href="#toJSON">toJSON</a><span class="signature">()</span><span class="type-signature"> : Object</span> </h3>
  140. <div class="method">
  141. <div class="description">
  142. <p>Serializes this animation clip into JSON.</p>
  143. </div>
  144. <dl class="details">
  145. <dt class="tag-returns"><strong>Returns:</strong> The JSON object.</dt>
  146. </dl>
  147. </div>
  148. <h3 class="name name-method" id="trim" translate="no">.<a href="#trim">trim</a><span class="signature">()</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  149. <div class="method">
  150. <div class="description">
  151. <p>Trims all tracks to the clip's duration.</p>
  152. </div>
  153. <dl class="details">
  154. <dt class="tag-returns"><strong>Returns:</strong> A reference to this animation clip.</dt>
  155. </dl>
  156. </div>
  157. <h3 class="name name-method" id="validate" translate="no">.<a href="#validate">validate</a><span class="signature">()</span><span class="type-signature"> : boolean</span> </h3>
  158. <div class="method">
  159. <div class="description">
  160. <p>Performs minimal validation on each track in the clip. Returns <code>true</code> if all
  161. tracks are valid.</p>
  162. </div>
  163. <dl class="details">
  164. <dt class="tag-returns"><strong>Returns:</strong> Whether the clip's keyframes are valid or not.</dt>
  165. </dl>
  166. </div>
  167. <h2 class="subsection-title">Static Methods</h2>
  168. <h3 class="name name-method" id=".CreateClipsFromMorphTargetSequences" translate="no">.<a href="#.CreateClipsFromMorphTargetSequences">CreateClipsFromMorphTargetSequences</a><span class="signature">( morphTargets : <span class="param-type">Array.&lt;Object></span>, fps : <span class="param-type">number</span>, noLoop : <span class="param-type">boolean</span> )</span><span class="type-signature"> : Array.&lt;<a href="AnimationClip.html">AnimationClip</a>></span> </h3>
  169. <div class="method">
  170. <div class="description">
  171. <p>Returns an array of new AnimationClips created from the morph target
  172. sequences of a geometry, trying to sort morph target names into
  173. animation-group-based patterns like &quot;Walk_001, Walk_002, Run_001, Run_002...&quot;.</p>
  174. <p>See <a href="MD2Loader.html#parse">MD2Loader#parse</a> as an example for how the method should be used.</p>
  175. </div>
  176. <table class="params">
  177. <tbody>
  178. <tr>
  179. <td class="name">
  180. <strong>morphTargets</strong>
  181. </td>
  182. <td class="description last">
  183. <p>A sequence of morph targets.</p>
  184. </td>
  185. </tr>
  186. <tr>
  187. <td class="name">
  188. <strong>fps</strong>
  189. </td>
  190. <td class="description last">
  191. <p>The Frames-Per-Second value.</p>
  192. </td>
  193. </tr>
  194. <tr>
  195. <td class="name">
  196. <strong>noLoop</strong>
  197. </td>
  198. <td class="description last">
  199. <p>Whether the clip should be no loop or not.</p>
  200. </td>
  201. </tr>
  202. </tbody>
  203. </table>
  204. <dl class="details">
  205. <dt class="tag-returns"><strong>Returns:</strong> An array of new animation clips.</dt>
  206. </dl>
  207. </div>
  208. <h3 class="name name-method" id=".CreateFromMorphTargetSequence" translate="no">.<a href="#.CreateFromMorphTargetSequence">CreateFromMorphTargetSequence</a><span class="signature">( name : <span class="param-type">string</span>, morphTargetSequence : <span class="param-type">Array.&lt;Object></span>, fps : <span class="param-type">number</span>, noLoop : <span class="param-type">boolean</span> )</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  209. <div class="method">
  210. <div class="description">
  211. <p>Returns a new animation clip from the passed morph targets array of a
  212. geometry, taking a name and the number of frames per second.</p>
  213. <p>Note: The fps parameter is required, but the animation speed can be
  214. overridden via <a href="AnimationAction.html#setDuration">AnimationAction#setDuration</a>.</p>
  215. </div>
  216. <table class="params">
  217. <tbody>
  218. <tr>
  219. <td class="name">
  220. <strong>name</strong>
  221. </td>
  222. <td class="description last">
  223. <p>The name of the animation clip.</p>
  224. </td>
  225. </tr>
  226. <tr>
  227. <td class="name">
  228. <strong>morphTargetSequence</strong>
  229. </td>
  230. <td class="description last">
  231. <p>A sequence of morph targets.</p>
  232. </td>
  233. </tr>
  234. <tr>
  235. <td class="name">
  236. <strong>fps</strong>
  237. </td>
  238. <td class="description last">
  239. <p>The Frames-Per-Second value.</p>
  240. </td>
  241. </tr>
  242. <tr>
  243. <td class="name">
  244. <strong>noLoop</strong>
  245. </td>
  246. <td class="description last">
  247. <p>Whether the clip should be no loop or not.</p>
  248. </td>
  249. </tr>
  250. </tbody>
  251. </table>
  252. <dl class="details">
  253. <dt class="tag-returns"><strong>Returns:</strong> The new animation clip.</dt>
  254. </dl>
  255. </div>
  256. <h3 class="name name-method" id=".findByName" translate="no">.<a href="#.findByName">findByName</a><span class="signature">( objectOrClipArray : <span class="param-type">Array.&lt;<a href="AnimationClip.html">AnimationClip</a>> | <a href="Object3D.html">Object3D</a></span>, name : <span class="param-type">string</span> )</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  257. <div class="method">
  258. <div class="description">
  259. <p>Searches for an animation clip by name, taking as its first parameter
  260. either an array of clips, or a mesh or geometry that contains an
  261. array named &quot;animations&quot; property.</p>
  262. </div>
  263. <table class="params">
  264. <tbody>
  265. <tr>
  266. <td class="name">
  267. <strong>objectOrClipArray</strong>
  268. </td>
  269. <td class="description last">
  270. <p>The array or object to search through.</p>
  271. </td>
  272. </tr>
  273. <tr>
  274. <td class="name">
  275. <strong>name</strong>
  276. </td>
  277. <td class="description last">
  278. <p>The name to search for.</p>
  279. </td>
  280. </tr>
  281. </tbody>
  282. </table>
  283. <dl class="details">
  284. <dt class="tag-returns"><strong>Returns:</strong> The found animation clip. Returns <code>null</code> if no clip has been found.</dt>
  285. </dl>
  286. </div>
  287. <h3 class="name name-method" id=".parse" translate="no">.<a href="#.parse">parse</a><span class="signature">( json : <span class="param-type">Object</span> )</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  288. <div class="method">
  289. <div class="description">
  290. <p>Factory method for creating an animation clip from the given JSON.</p>
  291. </div>
  292. <table class="params">
  293. <tbody>
  294. <tr>
  295. <td class="name">
  296. <strong>json</strong>
  297. </td>
  298. <td class="description last">
  299. <p>The serialized animation clip.</p>
  300. </td>
  301. </tr>
  302. </tbody>
  303. </table>
  304. <dl class="details">
  305. <dt class="tag-returns"><strong>Returns:</strong> The new animation clip.</dt>
  306. </dl>
  307. </div>
  308. <h3 class="name name-method" id=".parseAnimation" translate="no">.<a href="#.parseAnimation">parseAnimation</a><span class="signature">( animation : <span class="param-type">Object</span>, bones : <span class="param-type">Array.&lt;Bones></span> )</span><span class="type-signature"> : <a href="AnimationClip.html">AnimationClip</a></span> </h3>
  309. <div class="method">
  310. <div class="description">
  311. <p>Parses the <code>animation.hierarchy</code> format and returns a new animation clip.</p>
  312. </div>
  313. <table class="params">
  314. <tbody>
  315. <tr>
  316. <td class="name">
  317. <strong>animation</strong>
  318. </td>
  319. <td class="description last">
  320. <p>A serialized animation clip as JSON.</p>
  321. </td>
  322. </tr>
  323. <tr>
  324. <td class="name">
  325. <strong>bones</strong>
  326. </td>
  327. <td class="description last">
  328. <p>An array of bones.</p>
  329. </td>
  330. </tr>
  331. </tbody>
  332. </table>
  333. <dl class="details">
  334. <dt class="important tag-deprecated"><strong>Deprecated:</strong> since r175.</dt>
  335. </dl>
  336. <dl class="details">
  337. <dt class="tag-returns"><strong>Returns:</strong> The new animation clip.</dt>
  338. </dl>
  339. </div>
  340. <h3 class="name name-method" id=".toJSON" translate="no">.<a href="#.toJSON">toJSON</a><span class="signature">( clip : <span class="param-type"><a href="AnimationClip.html">AnimationClip</a></span> )</span><span class="type-signature"> : Object</span> </h3>
  341. <div class="method">
  342. <div class="description">
  343. <p>Serializes the given animation clip into JSON.</p>
  344. </div>
  345. <table class="params">
  346. <tbody>
  347. <tr>
  348. <td class="name">
  349. <strong>clip</strong>
  350. </td>
  351. <td class="description last">
  352. <p>The animation clip to serialize.</p>
  353. </td>
  354. </tr>
  355. </tbody>
  356. </table>
  357. <dl class="details">
  358. <dt class="tag-returns"><strong>Returns:</strong> The JSON object.</dt>
  359. </dl>
  360. </div>
  361. <h2 class="subsection-title">Source</h2>
  362. <p>
  363. <a href="https://github.com/mrdoob/three.js/blob/master/src/animation/AnimationClip.js" translate="no" target="_blank" rel="noopener">src/animation/AnimationClip.js</a>
  364. </p>
  365. </article>
  366. </section>
  367. <script src="../scripts/linenumber.js"></script>
  368. <script src="../scripts/page.js"></script>
  369. </body>
  370. </html>
粤ICP备19079148号