AnimationClipCreator.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import {
  2. AnimationClip,
  3. BooleanKeyframeTrack,
  4. ColorKeyframeTrack,
  5. NumberKeyframeTrack,
  6. Vector3,
  7. VectorKeyframeTrack
  8. } from 'three';
  9. /**
  10. * A utility class with factory methods for creating basic animation clips.
  11. *
  12. * @hideconstructor
  13. */
  14. class AnimationClipCreator {
  15. /**
  16. * Creates an animation clip that rotates a 3D object 360 degrees
  17. * in the given period of time around the given axis.
  18. *
  19. * @param {number} period - The duration of the animation.
  20. * @param {('x'|'y'|'z')} [axis='x'] - The axis of rotation.
  21. * @return {AnimationClip} The created animation clip.
  22. */
  23. static CreateRotationAnimation( period, axis = 'x' ) {
  24. const times = [ 0, period ], values = [ 0, 360 ];
  25. const trackName = '.rotation[' + axis + ']';
  26. const track = new NumberKeyframeTrack( trackName, times, values );
  27. return new AnimationClip( '', period, [ track ] );
  28. }
  29. /**
  30. * Creates an animation clip that scales a 3D object from `0` to `1`
  31. * in the given period of time along the given axis.
  32. *
  33. * @param {number} period - The duration of the animation.
  34. * @param {('x'|'y'|'z')} [axis='x'] - The axis to scale the 3D object along.
  35. * @return {AnimationClip} The created animation clip.
  36. */
  37. static CreateScaleAxisAnimation( period, axis = 'x' ) {
  38. const times = [ 0, period ], values = [ 0, 1 ];
  39. const trackName = '.scale[' + axis + ']';
  40. const track = new NumberKeyframeTrack( trackName, times, values );
  41. return new AnimationClip( '', period, [ track ] );
  42. }
  43. /**
  44. * Creates an animation clip that translates a 3D object in a shake pattern
  45. * in the given period.
  46. *
  47. * @param {number} duration - The duration of the animation.
  48. * @param {Vector3} shakeScale - The scale of the shake.
  49. * @return {AnimationClip} The created animation clip.
  50. */
  51. static CreateShakeAnimation( duration, shakeScale ) {
  52. const times = [], values = [], tmp = new Vector3();
  53. for ( let i = 0; i < duration * 10; i ++ ) {
  54. times.push( i / 10 );
  55. tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ).
  56. multiply( shakeScale ).
  57. toArray( values, values.length );
  58. }
  59. const trackName = '.position';
  60. const track = new VectorKeyframeTrack( trackName, times, values );
  61. return new AnimationClip( '', duration, [ track ] );
  62. }
  63. /**
  64. * Creates an animation clip that scales a 3D object in a pulse pattern
  65. * in the given period.
  66. *
  67. * @param {number} duration - The duration of the animation.
  68. * @param {number} pulseScale - The scale of the pulse.
  69. * @return {AnimationClip} The created animation clip.
  70. */
  71. static CreatePulsationAnimation( duration, pulseScale ) {
  72. const times = [], values = [], tmp = new Vector3();
  73. for ( let i = 0; i < duration * 10; i ++ ) {
  74. times.push( i / 10 );
  75. const scaleFactor = Math.random() * pulseScale;
  76. tmp.set( scaleFactor, scaleFactor, scaleFactor ).
  77. toArray( values, values.length );
  78. }
  79. const trackName = '.scale';
  80. const track = new VectorKeyframeTrack( trackName, times, values );
  81. return new AnimationClip( '', duration, [ track ] );
  82. }
  83. /**
  84. * Creates an animation clip that toggles the visibility of a 3D object.
  85. *
  86. * @param {number} duration - The duration of the animation.
  87. * @return {AnimationClip} The created animation clip.
  88. */
  89. static CreateVisibilityAnimation( duration ) {
  90. const times = [ 0, duration / 2, duration ], values = [ true, false, true ];
  91. const trackName = '.visible';
  92. const track = new BooleanKeyframeTrack( trackName, times, values );
  93. return new AnimationClip( '', duration, [ track ] );
  94. }
  95. /**
  96. * Creates an animation clip that animates the `color` property of a 3D object's
  97. * material.
  98. *
  99. * @param {number} duration - The duration of the animation.
  100. * @param {Array<Color>} colors - An array of colors that should be sequentially animated.
  101. * @return {AnimationClip} The created animation clip.
  102. */
  103. static CreateMaterialColorAnimation( duration, colors ) {
  104. const times = [], values = [],
  105. timeStep = ( colors.length > 1 ) ? duration / ( colors.length - 1 ) : 0;
  106. for ( let i = 0; i < colors.length; i ++ ) {
  107. times.push( i * timeStep );
  108. const color = colors[ i ];
  109. values.push( color.r, color.g, color.b );
  110. }
  111. const trackName = '.material.color';
  112. const track = new ColorKeyframeTrack( trackName, times, values );
  113. return new AnimationClip( '', duration, [ track ] );
  114. }
  115. }
  116. export { AnimationClipCreator };
粤ICP备19079148号