babylon.runtimeAnimation.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. module BABYLON {
  2. export class RuntimeAnimation {
  3. public currentFrame: number;
  4. private _animation: Animation;
  5. private _target: any;
  6. private _originalBlendValue: any;
  7. private _offsetsCache: {[key: string]: any} = {};
  8. private _highLimitsCache: {[key: string]: any} = {};
  9. private _stopped = false;
  10. private _blendingFactor = 0;
  11. public constructor(target: any, animation: Animation) {
  12. this._animation = animation;
  13. this._target = target;
  14. animation._runtimeAnimations.push(this);
  15. }
  16. public get animation(): Animation {
  17. return this._animation;
  18. }
  19. public reset(): void {
  20. this._offsetsCache = {};
  21. this._highLimitsCache = {};
  22. this.currentFrame = 0;
  23. this._blendingFactor = 0;
  24. this._originalBlendValue = null;
  25. }
  26. public isStopped(): boolean {
  27. return this._stopped;
  28. }
  29. public dispose(): void {
  30. let index = this._animation.runtimeAnimations.indexOf(this);
  31. if (index > -1) {
  32. this._animation.runtimeAnimations.splice(index, 1);
  33. }
  34. }
  35. private _getKeyValue(value: any): any {
  36. if (typeof value === "function") {
  37. return value();
  38. }
  39. return value;
  40. }
  41. private _interpolate(currentFrame: number, repeatCount: number, loopMode?: number, offsetValue?: any, highLimitValue?: any) {
  42. if (loopMode === Animation.ANIMATIONLOOPMODE_CONSTANT && repeatCount > 0) {
  43. return highLimitValue.clone ? highLimitValue.clone() : highLimitValue;
  44. }
  45. this.currentFrame = currentFrame;
  46. let keys = this._animation.getKeys();
  47. // Try to get a hash to find the right key
  48. var startKeyIndex = Math.max(0, Math.min(keys.length - 1, Math.floor(keys.length * (currentFrame - keys[0].frame) / (keys[keys.length - 1].frame - keys[0].frame)) - 1));
  49. if (keys[startKeyIndex].frame >= currentFrame) {
  50. while (startKeyIndex - 1 >= 0 && keys[startKeyIndex].frame >= currentFrame) {
  51. startKeyIndex--;
  52. }
  53. }
  54. for (var key = startKeyIndex; key < keys.length; key++) {
  55. var endKey = keys[key + 1];
  56. if (endKey.frame >= currentFrame) {
  57. var startKey = keys[key];
  58. var startValue = this._getKeyValue(startKey.value);
  59. if (startKey.interpolation === AnimationKeyInterpolation.STEP) {
  60. return startValue;
  61. }
  62. var endValue = this._getKeyValue(endKey.value);
  63. var useTangent = startKey.outTangent !== undefined && endKey.inTangent !== undefined;
  64. var frameDelta = endKey.frame - startKey.frame;
  65. // gradient : percent of currentFrame between the frame inf and the frame sup
  66. var gradient = (currentFrame - startKey.frame) / frameDelta;
  67. // check for easingFunction and correction of gradient
  68. let easingFunction = this._animation.getEasingFunction();
  69. if (easingFunction != null) {
  70. gradient = easingFunction.ease(gradient);
  71. }
  72. switch (this._animation.dataType) {
  73. // Float
  74. case Animation.ANIMATIONTYPE_FLOAT:
  75. var floatValue = useTangent ? this._animation.floatInterpolateFunctionWithTangents(startValue, startKey.outTangent * frameDelta, endValue, endKey.inTangent * frameDelta, gradient) : this._animation.floatInterpolateFunction(startValue, endValue, gradient);
  76. switch (loopMode) {
  77. case Animation.ANIMATIONLOOPMODE_CYCLE:
  78. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  79. return floatValue;
  80. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  81. return offsetValue * repeatCount + floatValue;
  82. }
  83. break;
  84. // Quaternion
  85. case Animation.ANIMATIONTYPE_QUATERNION:
  86. var quatValue = useTangent ? this._animation.quaternionInterpolateFunctionWithTangents(startValue, startKey.outTangent.scale(frameDelta), endValue, endKey.inTangent.scale(frameDelta), gradient) : this._animation.quaternionInterpolateFunction(startValue, endValue, gradient);
  87. switch (loopMode) {
  88. case Animation.ANIMATIONLOOPMODE_CYCLE:
  89. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  90. return quatValue;
  91. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  92. return quatValue.add(offsetValue.scale(repeatCount));
  93. }
  94. return quatValue;
  95. // Vector3
  96. case Animation.ANIMATIONTYPE_VECTOR3:
  97. var vec3Value = useTangent ? this._animation.vector3InterpolateFunctionWithTangents(startValue, startKey.outTangent.scale(frameDelta), endValue, endKey.inTangent.scale(frameDelta), gradient) : this._animation.vector3InterpolateFunction(startValue, endValue, gradient);
  98. switch (loopMode) {
  99. case Animation.ANIMATIONLOOPMODE_CYCLE:
  100. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  101. return vec3Value;
  102. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  103. return vec3Value.add(offsetValue.scale(repeatCount));
  104. }
  105. // Vector2
  106. case Animation.ANIMATIONTYPE_VECTOR2:
  107. var vec2Value = useTangent ? this._animation.vector2InterpolateFunctionWithTangents(startValue, startKey.outTangent.scale(frameDelta), endValue, endKey.inTangent.scale(frameDelta), gradient) : this._animation.vector2InterpolateFunction(startValue, endValue, gradient);
  108. switch (loopMode) {
  109. case Animation.ANIMATIONLOOPMODE_CYCLE:
  110. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  111. return vec2Value;
  112. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  113. return vec2Value.add(offsetValue.scale(repeatCount));
  114. }
  115. // Size
  116. case Animation.ANIMATIONTYPE_SIZE:
  117. switch (loopMode) {
  118. case Animation.ANIMATIONLOOPMODE_CYCLE:
  119. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  120. return this._animation.sizeInterpolateFunction(startValue, endValue, gradient);
  121. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  122. return this._animation.sizeInterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  123. }
  124. // Color3
  125. case Animation.ANIMATIONTYPE_COLOR3:
  126. switch (loopMode) {
  127. case Animation.ANIMATIONLOOPMODE_CYCLE:
  128. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  129. return this._animation.color3InterpolateFunction(startValue, endValue, gradient);
  130. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  131. return this._animation.color3InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  132. }
  133. // Matrix
  134. case Animation.ANIMATIONTYPE_MATRIX:
  135. switch (loopMode) {
  136. case Animation.ANIMATIONLOOPMODE_CYCLE:
  137. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  138. if (Animation.AllowMatricesInterpolation) {
  139. return this._animation.matrixInterpolateFunction(startValue, endValue, gradient);
  140. }
  141. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  142. return startValue;
  143. }
  144. default:
  145. break;
  146. }
  147. break;
  148. }
  149. }
  150. return this._getKeyValue(keys[keys.length - 1].value);
  151. }
  152. public setValue(currentValue: any, blend: boolean = false): void {
  153. // Set value
  154. var path: any;
  155. var destination: any;
  156. let targetPropertyPath = this._animation.targetPropertyPath
  157. if (targetPropertyPath.length > 1) {
  158. var property = this._target[targetPropertyPath[0]];
  159. for (var index = 1; index < targetPropertyPath.length - 1; index++) {
  160. property = property[targetPropertyPath[index]];
  161. }
  162. path = targetPropertyPath[targetPropertyPath.length - 1];
  163. destination = property;
  164. } else {
  165. path = targetPropertyPath[0];
  166. destination = this._target;
  167. }
  168. // Blending
  169. if (this._animation.enableBlending && this._blendingFactor <= 1.0) {
  170. if (!this._originalBlendValue) {
  171. if (destination[path].clone) {
  172. this._originalBlendValue = destination[path].clone();
  173. } else {
  174. this._originalBlendValue = destination[path];
  175. }
  176. }
  177. if (this._originalBlendValue.prototype) { // Complex value
  178. if (this._originalBlendValue.prototype.Lerp) { // Lerp supported
  179. destination[path] = this._originalBlendValue.construtor.prototype.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
  180. } else { // Blending not supported
  181. destination[path] = currentValue;
  182. }
  183. } else if (this._originalBlendValue.m) { // Matrix
  184. destination[path] = Matrix.Lerp(this._originalBlendValue, currentValue, this._blendingFactor);
  185. } else { // Direct value
  186. destination[path] = this._originalBlendValue * (1.0 - this._blendingFactor) + this._blendingFactor * currentValue;
  187. }
  188. this._blendingFactor += this._animation.blendingSpeed;
  189. } else {
  190. destination[path] = currentValue;
  191. }
  192. if (this._target.markAsDirty) {
  193. this._target.markAsDirty(this._animation.targetProperty);
  194. }
  195. }
  196. public goToFrame(frame: number): void {
  197. let keys = this._animation.getKeys();
  198. if (frame < keys[0].frame) {
  199. frame = keys[0].frame;
  200. } else if (frame > keys[keys.length - 1].frame) {
  201. frame = keys[keys.length - 1].frame;
  202. }
  203. var currentValue = this._interpolate(frame, 0, this._animation.loopMode);
  204. this.setValue(currentValue);
  205. }
  206. public _prepareForSpeedRatioChange(newSpeedRatio: number): void {
  207. let newRatio = this._previousDelay * (this._animation.framePerSecond * newSpeedRatio) / 1000.0;
  208. this._ratioOffset = this._previousRatio - newRatio;
  209. }
  210. private _ratioOffset = 0;
  211. private _previousDelay: number;
  212. private _previousRatio: number;
  213. public animate(delay: number, from: number, to: number, loop: boolean, speedRatio: number, blend: boolean = false): boolean {
  214. let targetPropertyPath = this._animation.targetPropertyPath
  215. if (!targetPropertyPath || targetPropertyPath.length < 1) {
  216. this._stopped = true;
  217. return false;
  218. }
  219. var returnValue = true;
  220. let keys = this._animation.getKeys();
  221. // Adding a start key at frame 0 if missing
  222. if (keys[0].frame !== 0) {
  223. var newKey = { frame: 0, value: keys[0].value };
  224. keys.splice(0, 0, newKey);
  225. }
  226. // Check limits
  227. if (from < keys[0].frame || from > keys[keys.length - 1].frame) {
  228. from = keys[0].frame;
  229. }
  230. if (to < keys[0].frame || to > keys[keys.length - 1].frame) {
  231. to = keys[keys.length - 1].frame;
  232. }
  233. //to and from cannot be the same key
  234. if(from === to) {
  235. if (from > keys[0].frame) {
  236. from--;
  237. } else if (to < keys[keys.length - 1].frame) {
  238. to++;
  239. }
  240. }
  241. // Compute ratio
  242. var range = to - from;
  243. var offsetValue;
  244. // ratio represents the frame delta between from and to
  245. var ratio = (delay * (this._animation.framePerSecond * speedRatio) / 1000.0) + this._ratioOffset;
  246. var highLimitValue = 0;
  247. this._previousDelay = delay;
  248. this._previousRatio = ratio;
  249. if (((to > from && ratio > range) || (from > to && ratio < range)) && !loop) { // If we are out of range and not looping get back to caller
  250. returnValue = false;
  251. highLimitValue = this._getKeyValue(keys[keys.length - 1].value);
  252. } else {
  253. // Get max value if required
  254. if (this._animation.loopMode !== Animation.ANIMATIONLOOPMODE_CYCLE) {
  255. var keyOffset = to.toString() + from.toString();
  256. if (!this._offsetsCache[keyOffset]) {
  257. var fromValue = this._interpolate(from, 0, Animation.ANIMATIONLOOPMODE_CYCLE);
  258. var toValue = this._interpolate(to, 0, Animation.ANIMATIONLOOPMODE_CYCLE);
  259. switch (this._animation.dataType) {
  260. // Float
  261. case Animation.ANIMATIONTYPE_FLOAT:
  262. this._offsetsCache[keyOffset] = toValue - fromValue;
  263. break;
  264. // Quaternion
  265. case Animation.ANIMATIONTYPE_QUATERNION:
  266. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  267. break;
  268. // Vector3
  269. case Animation.ANIMATIONTYPE_VECTOR3:
  270. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  271. // Vector2
  272. case Animation.ANIMATIONTYPE_VECTOR2:
  273. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  274. // Size
  275. case Animation.ANIMATIONTYPE_SIZE:
  276. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  277. // Color3
  278. case Animation.ANIMATIONTYPE_COLOR3:
  279. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  280. default:
  281. break;
  282. }
  283. this._highLimitsCache[keyOffset] = toValue;
  284. }
  285. highLimitValue = this._highLimitsCache[keyOffset];
  286. offsetValue = this._offsetsCache[keyOffset];
  287. }
  288. }
  289. if (offsetValue === undefined) {
  290. switch (this._animation.dataType) {
  291. // Float
  292. case Animation.ANIMATIONTYPE_FLOAT:
  293. offsetValue = 0;
  294. break;
  295. // Quaternion
  296. case Animation.ANIMATIONTYPE_QUATERNION:
  297. offsetValue = new Quaternion(0, 0, 0, 0);
  298. break;
  299. // Vector3
  300. case Animation.ANIMATIONTYPE_VECTOR3:
  301. offsetValue = Vector3.Zero();
  302. break;
  303. // Vector2
  304. case Animation.ANIMATIONTYPE_VECTOR2:
  305. offsetValue = Vector2.Zero();
  306. break;
  307. // Size
  308. case Animation.ANIMATIONTYPE_SIZE:
  309. offsetValue = Size.Zero();
  310. break;
  311. // Color3
  312. case Animation.ANIMATIONTYPE_COLOR3:
  313. offsetValue = Color3.Black();
  314. }
  315. }
  316. // Compute value
  317. var repeatCount = (ratio / range) >> 0;
  318. var currentFrame = returnValue ? from + ratio % range : to;
  319. var currentValue = this._interpolate(currentFrame, repeatCount, this._animation.loopMode, offsetValue, highLimitValue);
  320. // Set value
  321. this.setValue(currentValue);
  322. // Check events
  323. let events = this._animation.getEvents();
  324. for (var index = 0; index < events.length; index++) {
  325. // Make sure current frame has passed event frame and that event frame is within the current range
  326. // Also, handle both forward and reverse animations
  327. if (
  328. (range > 0 && currentFrame >= events[index].frame && events[index].frame >= from) ||
  329. (range < 0 && currentFrame <= events[index].frame && events[index].frame <= from)
  330. ){
  331. var event = events[index];
  332. if (!event.isDone) {
  333. // If event should be done only once, remove it.
  334. if (event.onlyOnce) {
  335. events.splice(index, 1);
  336. index--;
  337. }
  338. event.isDone = true;
  339. event.action();
  340. } // Don't do anything if the event has already be done.
  341. } else if (events[index].isDone && !events[index].onlyOnce) {
  342. // reset event, the animation is looping
  343. events[index].isDone = false;
  344. }
  345. }
  346. if (!returnValue) {
  347. this._stopped = true;
  348. }
  349. return returnValue;
  350. }
  351. }
  352. }