2
0

KeyframeTrack.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  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. Um KeyframeTrack é uma sequência cronometrada de [link:https://en.wikipedia.org/wiki/Key_frame keyframes],
  13. que são compostos de listas de tempos e valores relacionados, e que são usados ​​para animar uma
  14. propriedade específica de um objeto.
  15. </p>
  16. <p>
  17. Para obter uma visão geral dos diferentes elementos do sistema de animação three.js, consulte o
  18. artigo "Sistema de animação" na seção "Próximos Passos" do manual.
  19. </p>
  20. <p>
  21. Em contraste com a hierarquia de animação do
  22. [link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] uma
  23. `KeyframeTrack` não armazena seus keyframes únicos como objetos em um array de "chaves" (mantendo os
  24. tempos e os valores de cada frame juntos em um só lugar).
  25. </p>
  26. <p>
  27. Em vez disso, há sempre dois arrays em um `KeyframeTrack`: o array [page:.times times]
  28. armazena os valores de tempo para todos os keyframes desta track em ordem sequencial, e o
  29. array [page:.values values] contém os valores alterados correspondentes da propriedade animada.
  30. </p>
  31. <p>
  32. Um único valor, pertencente a um determinado ponto do tempo, pode não ser apenas um simples número, mas (por
  33. exemplo) um vetor (se uma posição for animada) ou um quaternion (se uma rotação for animada). Por
  34. isso o array de valores (que também é um array plano) pode ser três ou quatro vezes maior que
  35. o array de tempo.
  36. </p>
  37. <p>
  38. Correspondendo aos diferentes tipos possíveis de valores animados existem várias subclasses de
  39. `KeyframeTrack`, herdando a maioria das propriedades e métodos:
  40. </p>
  41. <ul>
  42. <li>[page:BooleanKeyframeTrack]</li>
  43. <li>[page:ColorKeyframeTrack]</li>
  44. <li>[page:NumberKeyframeTrack]</li>
  45. <li>[page:QuaternionKeyframeTrack]</li>
  46. <li>[page:StringKeyframeTrack]</li>
  47. <li>[page:VectorKeyframeTrack]</li>
  48. </ul>
  49. <p>
  50. Alguns exemplos de como criar manualmente [page:AnimationClip AnimationClips] com diferentes tipos de
  51. KeyframeTracks pode ser encontrado no arquivo [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator].
  52. </p>
  53. <p>
  54. Como os valores explícitos são especificados apenas para os pontos discretos de tempo armazenados no array de tempo,
  55. todos os valores intermediários devem ser interpolados.
  56. </p>
  57. <p>
  58. O nome da track é importante para a conexão desta track com uma propriedade específica do
  59. nó animado (feito por [page:PropertyBinding]).
  60. </p>
  61. <h2>Construtor</h2>
  62. <h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
  63. <p>
  64. [page:String name] - o identificador do `KeyframeTrack`.<br />
  65. [page:Array times] - um array de keyframes, convertidos internamente para um
  66. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
  67. [page:Array values] - um array com os valores relacionados ao array times, convertidos internamente para um
  68. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
  69. [page:Constant interpolation] - o tipo de interpolação a ser usado. Ver
  70. [page:Animation Animation Constants] para valores possíveis. O padrão é [page:Animation InterpolateLinear].
  71. </p>
  72. <h2>Propriedades</h2>
  73. <h3>[property:String name]</h3>
  74. <p>
  75. O nome da track pode se referir a morph targets ou [page:SkinnedMesh bones] ou possivelmente outros valores dentro de um objeto animado. Ver
  76. [page:PropertyBinding.parseTrackName] para as formas de strings que podem ser analisadas para propriedades
  77. vinculativas:
  78. </p>
  79. <p>
  80. O nome pode especificar o nó usando seu nome ou seu uuid (embora precise estar na
  81. subárvore do nó do grafo de cena passado para o mixer). Ou, se o nome da track começar com um ponto,
  82. a track se aplica ao nó raiz que foi passado para o mixer.
  83. </p>
  84. <p>
  85. Normalmente, após o nó, uma propriedade será especificada diretamente. Mas você também pode especificar um
  86. subpropriedade, como .rotation[x], se você quiser apenas direcionar o componente X da rotação
  87. através de uma track flutuante.
  88. </p>
  89. <p>
  90. Você também pode especificar bones ou multimateriais usando um nome de objeto, por exemplo:
  91. .bones[R_hand].scale; o canal vermelho da cor difusa do quarto material em um
  92. array de materiais - como um exemplo - pode ser acessado com .materials[3].diffuse[r].
  93. </p>
  94. <p>
  95. PropertyBinding também resolverá nomes de morph targets, por exemplo: .morphTargetInfluences[run].
  96. </p>
  97. <p>
  98. Nota: o nome da track não precisa necessariamente ser único. Várias tracks podem conduzir a mesma
  99. propriedade. O resultado deve ser baseado em uma mistura ponderada entre as várias tracks de acordo com
  100. os pesos de suas respectivas ações.
  101. </p>
  102. <h3>[property:Float32Array times]</h3>
  103. <p>
  104. Um [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  105. convertido do array de tempos que é passado no construtor.
  106. </p>
  107. <h3>[property:Float32Array values]</h3>
  108. <p>
  109. Um [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  110. convertido do array de valores que é passada no construtor.
  111. </p>
  112. <h3>[property:Constant DefaultInterpolation]</h3>
  113. <p>
  114. O tipo de interpolação padrão: [page:Animation InterpolateLinear].
  115. </p>
  116. <h3>[property:Constant TimeBufferType ]</h3>
  117. <p>
  118. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  119. o tipo de buffer usado internamente para os tempos.
  120. </p>
  121. <h3>[property:Constant ValueBufferType ]</h3>
  122. <p>
  123. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  124. o tipo de buffer usado internamente para os valores.
  125. </p>
  126. <h2>Métodos</h2>
  127. <h3>[method:KeyframeTrack clone]()</h3>
  128. <p>
  129. Retorna uma cópia desta track.
  130. </p>
  131. <h3>[method:Interpolant createInterpolant]()</h3>
  132. <p>
  133. Cria um [page:LinearInterpolant LinearInterpolant], [page:CubicInterpolant CubicInterpolant]
  134. ou [page:DiscreteInterpolant DiscreteInterpolant], dependendo do valor do parâmetro interpolação
  135. passado no construtor.
  136. </p>
  137. <h3>[method:Interpolant getInterpolation]()</h3>
  138. <p>
  139. Retorna o tipo da interpolação.
  140. </p>
  141. <h3>[method:Number getValueSize]()</h3>
  142. <p>
  143. Retorna o tamanho de cada valor (que é o comprimento do array [page:.values values] dividido
  144. pelo comprimento do array [page:.times times]).
  145. </p>
  146. <h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
  147. <p>
  148. Cria uma nova [page:DiscreteInterpolant DiscreteInterpolant] a partir do
  149. [page:KeyframeTrack.times times] e [page:KeyframeTrack.times values]. Um Float32Array pode ser
  150. passado e receberá os resultados. Caso contrário, um novo array com o tamanho apropriado será
  151. criado automaticamente.
  152. </p>
  153. <h3>[method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
  154. <p>
  155. Cria uma nova [page:LinearInterpolant LinearInterpolant] a partir do
  156. [page:KeyframeTrack.times times] e [page:KeyframeTrack.times values]. Um Float32Array pode ser
  157. passado e receberá os resultados. Caso contrário, um novo array com o tamanho apropriado será
  158. criado automaticamente.
  159. </p>
  160. <h3>[method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
  161. <p>
  162. Cria uma nova [page:CubicInterpolant CubicInterpolant] a partir do
  163. [page:KeyframeTrack.times times] e [page:KeyframeTrack.times values]. Um Float32Array pode ser
  164. passado e receberá os resultados. Caso contrário, um novo array com o tamanho apropriado será
  165. criado automaticamente.
  166. </p>
  167. <h3>[method:this optimize]()</h3>
  168. <p>
  169. Remove chaves sequenciais equivalentes, que são comuns em morph targets.
  170. </p>
  171. <h3>[method:this scale]()</h3>
  172. <p>
  173. Dimensiona todos os tempos de keyframe por um fator.<br /><br />
  174. Nota: Isso é útil, por exemplo, para conversões para uma determinada taxa de quadros por segundo (como
  175. é feito internamente por
  176. [page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
  177. </p>
  178. <h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
  179. <p>
  180. Define o tipo de interpolação. Veja [page:Animation Animation Constants] para opções.
  181. </p>
  182. <h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
  183. <p>
  184. Move todos os keyframes para frente ou para trás no tempo.
  185. </p>
  186. <h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
  187. <p>
  188. Remove keyframes antes de `startTime` e depois de `endTime`,
  189. sem alterar nenhum valor dentro do intervalo [`startTime`, `endTime`].
  190. </p>
  191. <h3>[method:Boolean validate]()</h3>
  192. <p>
  193. Executa validação mínima nas tracks. Retorna verdadeiro se válido.
  194. </p>
  195. <p>
  196. Este método registra erros no console se uma track estiver vazia, se o [page:.valueSize value size] não for
  197. válido, se um item no array [page:.times times] ou [page:.values values]
  198. não for um número válido ou se os itens no array `times` estiverem fora de ordem.
  199. </p>
  200. <h2>Métodos Estáticos</h2>
  201. <h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
  202. <p>
  203. Converte a track para JSON.
  204. </p>
  205. <h2>Source</h2>
  206. <p>
  207. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  208. </p>
  209. </body>
  210. </html>