babylon.animation.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  1. var BABYLON;
  2. (function (BABYLON) {
  3. var AnimationRange = (function () {
  4. function AnimationRange(name, from, to) {
  5. this.name = name;
  6. this.from = from;
  7. this.to = to;
  8. }
  9. return AnimationRange;
  10. })();
  11. BABYLON.AnimationRange = AnimationRange;
  12. /**
  13. * Composed of a frame, and an action function
  14. */
  15. var AnimationEvent = (function () {
  16. function AnimationEvent(frame, action, onlyOnce) {
  17. this.frame = frame;
  18. this.action = action;
  19. this.onlyOnce = onlyOnce;
  20. this.isDone = false;
  21. }
  22. return AnimationEvent;
  23. })();
  24. BABYLON.AnimationEvent = AnimationEvent;
  25. var Animation = (function () {
  26. function Animation(name, targetProperty, framePerSecond, dataType, loopMode) {
  27. this.name = name;
  28. this.targetProperty = targetProperty;
  29. this.framePerSecond = framePerSecond;
  30. this.dataType = dataType;
  31. this.loopMode = loopMode;
  32. this._offsetsCache = {};
  33. this._highLimitsCache = {};
  34. this._stopped = false;
  35. // The set of event that will be linked to this animation
  36. this._events = new Array();
  37. this.allowMatricesInterpolation = false;
  38. this._ranges = new Array();
  39. this.targetPropertyPath = targetProperty.split(".");
  40. this.dataType = dataType;
  41. this.loopMode = loopMode === undefined ? Animation.ANIMATIONLOOPMODE_CYCLE : loopMode;
  42. }
  43. Animation._PrepareAnimation = function (targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction) {
  44. var dataType = undefined;
  45. if (!isNaN(parseFloat(from)) && isFinite(from)) {
  46. dataType = Animation.ANIMATIONTYPE_FLOAT;
  47. }
  48. else if (from instanceof BABYLON.Quaternion) {
  49. dataType = Animation.ANIMATIONTYPE_QUATERNION;
  50. }
  51. else if (from instanceof BABYLON.Vector3) {
  52. dataType = Animation.ANIMATIONTYPE_VECTOR3;
  53. }
  54. else if (from instanceof BABYLON.Vector2) {
  55. dataType = Animation.ANIMATIONTYPE_VECTOR2;
  56. }
  57. else if (from instanceof BABYLON.Color3) {
  58. dataType = Animation.ANIMATIONTYPE_COLOR3;
  59. }
  60. if (dataType == undefined) {
  61. return null;
  62. }
  63. var animation = new Animation(name, targetProperty, framePerSecond, dataType, loopMode);
  64. var keys = [];
  65. keys.push({ frame: 0, value: from });
  66. keys.push({ frame: totalFrame, value: to });
  67. animation.setKeys(keys);
  68. if (easingFunction !== undefined) {
  69. animation.setEasingFunction(easingFunction);
  70. }
  71. return animation;
  72. };
  73. Animation.CreateAndStartAnimation = function (name, node, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction, onAnimationEnd) {
  74. var animation = Animation._PrepareAnimation(targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction);
  75. return node.getScene().beginDirectAnimation(node, [animation], 0, totalFrame, (animation.loopMode === 1), 1.0, onAnimationEnd);
  76. };
  77. Animation.CreateMergeAndStartAnimation = function (name, node, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction, onAnimationEnd) {
  78. var animation = Animation._PrepareAnimation(targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction);
  79. node.animations.push(animation);
  80. return node.getScene().beginAnimation(node, 0, totalFrame, (animation.loopMode === 1), 1.0, onAnimationEnd);
  81. };
  82. // Methods
  83. /**
  84. * Add an event to this animation.
  85. */
  86. Animation.prototype.addEvent = function (event) {
  87. this._events.push(event);
  88. };
  89. /**
  90. * Remove all events found at the given frame
  91. * @param frame
  92. */
  93. Animation.prototype.removeEvents = function (frame) {
  94. for (var index = 0; index < this._events.length; index++) {
  95. if (this._events[index].frame === frame) {
  96. this._events.splice(index, 1);
  97. }
  98. }
  99. };
  100. Animation.prototype.createRange = function (name, from, to) {
  101. this._ranges.push(new AnimationRange(name, from, to));
  102. };
  103. Animation.prototype.deleteRange = function (name) {
  104. for (var index = 0; index < this._ranges.length; index++) {
  105. if (this._ranges[index].name === name) {
  106. this._ranges.splice(index, 1);
  107. return;
  108. }
  109. }
  110. };
  111. Animation.prototype.getRange = function (name) {
  112. for (var index = 0; index < this._ranges.length; index++) {
  113. if (this._ranges[index].name === name) {
  114. return this._ranges[index];
  115. }
  116. }
  117. return null;
  118. };
  119. Animation.prototype.reset = function () {
  120. this._offsetsCache = {};
  121. this._highLimitsCache = {};
  122. this.currentFrame = 0;
  123. };
  124. Animation.prototype.isStopped = function () {
  125. return this._stopped;
  126. };
  127. Animation.prototype.getKeys = function () {
  128. return this._keys;
  129. };
  130. Animation.prototype.getEasingFunction = function () {
  131. return this._easingFunction;
  132. };
  133. Animation.prototype.setEasingFunction = function (easingFunction) {
  134. this._easingFunction = easingFunction;
  135. };
  136. Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
  137. return startValue + (endValue - startValue) * gradient;
  138. };
  139. Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
  140. return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
  141. };
  142. Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
  143. return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
  144. };
  145. Animation.prototype.vector2InterpolateFunction = function (startValue, endValue, gradient) {
  146. return BABYLON.Vector2.Lerp(startValue, endValue, gradient);
  147. };
  148. Animation.prototype.color3InterpolateFunction = function (startValue, endValue, gradient) {
  149. return BABYLON.Color3.Lerp(startValue, endValue, gradient);
  150. };
  151. Animation.prototype.matrixInterpolateFunction = function (startValue, endValue, gradient) {
  152. var startScale = new BABYLON.Vector3(0, 0, 0);
  153. var startRotation = new BABYLON.Quaternion();
  154. var startTranslation = new BABYLON.Vector3(0, 0, 0);
  155. startValue.decompose(startScale, startRotation, startTranslation);
  156. var endScale = new BABYLON.Vector3(0, 0, 0);
  157. var endRotation = new BABYLON.Quaternion();
  158. var endTranslation = new BABYLON.Vector3(0, 0, 0);
  159. endValue.decompose(endScale, endRotation, endTranslation);
  160. var resultScale = this.vector3InterpolateFunction(startScale, endScale, gradient);
  161. var resultRotation = this.quaternionInterpolateFunction(startRotation, endRotation, gradient);
  162. var resultTranslation = this.vector3InterpolateFunction(startTranslation, endTranslation, gradient);
  163. var result = BABYLON.Matrix.Compose(resultScale, resultRotation, resultTranslation);
  164. return result;
  165. };
  166. Animation.prototype.clone = function () {
  167. var clone = new Animation(this.name, this.targetPropertyPath.join("."), this.framePerSecond, this.dataType, this.loopMode);
  168. if (this._keys) {
  169. clone.setKeys(this._keys);
  170. }
  171. return clone;
  172. };
  173. Animation.prototype.setKeys = function (values) {
  174. this._keys = values.slice(0);
  175. this._offsetsCache = {};
  176. this._highLimitsCache = {};
  177. };
  178. Animation.prototype._getKeyValue = function (value) {
  179. if (typeof value === "function") {
  180. return value();
  181. }
  182. return value;
  183. };
  184. Animation.prototype._interpolate = function (currentFrame, repeatCount, loopMode, offsetValue, highLimitValue) {
  185. if (loopMode === Animation.ANIMATIONLOOPMODE_CONSTANT && repeatCount > 0) {
  186. return highLimitValue.clone ? highLimitValue.clone() : highLimitValue;
  187. }
  188. this.currentFrame = currentFrame;
  189. // Try to get a hash to find the right key
  190. var startKey = Math.max(0, Math.min(this._keys.length - 1, Math.floor(this._keys.length * (currentFrame - this._keys[0].frame) / (this._keys[this._keys.length - 1].frame - this._keys[0].frame)) - 1));
  191. if (this._keys[startKey].frame >= currentFrame) {
  192. while (startKey - 1 >= 0 && this._keys[startKey].frame >= currentFrame) {
  193. startKey--;
  194. }
  195. }
  196. for (var key = startKey; key < this._keys.length; key++) {
  197. if (this._keys[key + 1].frame >= currentFrame) {
  198. var startValue = this._getKeyValue(this._keys[key].value);
  199. var endValue = this._getKeyValue(this._keys[key + 1].value);
  200. // gradient : percent of currentFrame between the frame inf and the frame sup
  201. var gradient = (currentFrame - this._keys[key].frame) / (this._keys[key + 1].frame - this._keys[key].frame);
  202. // check for easingFunction and correction of gradient
  203. if (this._easingFunction != null) {
  204. gradient = this._easingFunction.ease(gradient);
  205. }
  206. switch (this.dataType) {
  207. // Float
  208. case Animation.ANIMATIONTYPE_FLOAT:
  209. switch (loopMode) {
  210. case Animation.ANIMATIONLOOPMODE_CYCLE:
  211. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  212. return this.floatInterpolateFunction(startValue, endValue, gradient);
  213. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  214. return offsetValue * repeatCount + this.floatInterpolateFunction(startValue, endValue, gradient);
  215. }
  216. break;
  217. // Quaternion
  218. case Animation.ANIMATIONTYPE_QUATERNION:
  219. var quaternion = null;
  220. switch (loopMode) {
  221. case Animation.ANIMATIONLOOPMODE_CYCLE:
  222. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  223. quaternion = this.quaternionInterpolateFunction(startValue, endValue, gradient);
  224. break;
  225. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  226. quaternion = this.quaternionInterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  227. break;
  228. }
  229. return quaternion;
  230. // Vector3
  231. case Animation.ANIMATIONTYPE_VECTOR3:
  232. switch (loopMode) {
  233. case Animation.ANIMATIONLOOPMODE_CYCLE:
  234. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  235. return this.vector3InterpolateFunction(startValue, endValue, gradient);
  236. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  237. return this.vector3InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  238. }
  239. // Vector2
  240. case Animation.ANIMATIONTYPE_VECTOR2:
  241. switch (loopMode) {
  242. case Animation.ANIMATIONLOOPMODE_CYCLE:
  243. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  244. return this.vector2InterpolateFunction(startValue, endValue, gradient);
  245. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  246. return this.vector2InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  247. }
  248. // Color3
  249. case Animation.ANIMATIONTYPE_COLOR3:
  250. switch (loopMode) {
  251. case Animation.ANIMATIONLOOPMODE_CYCLE:
  252. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  253. return this.color3InterpolateFunction(startValue, endValue, gradient);
  254. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  255. return this.color3InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  256. }
  257. // Matrix
  258. case Animation.ANIMATIONTYPE_MATRIX:
  259. switch (loopMode) {
  260. case Animation.ANIMATIONLOOPMODE_CYCLE:
  261. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  262. if (this.allowMatricesInterpolation) {
  263. return this.matrixInterpolateFunction(startValue, endValue, gradient);
  264. }
  265. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  266. return startValue;
  267. }
  268. default:
  269. break;
  270. }
  271. break;
  272. }
  273. }
  274. return this._getKeyValue(this._keys[this._keys.length - 1].value);
  275. };
  276. Animation.prototype.setValue = function (currentValue) {
  277. // Set value
  278. if (this.targetPropertyPath.length > 1) {
  279. var property = this._target[this.targetPropertyPath[0]];
  280. for (var index = 1; index < this.targetPropertyPath.length - 1; index++) {
  281. property = property[this.targetPropertyPath[index]];
  282. }
  283. property[this.targetPropertyPath[this.targetPropertyPath.length - 1]] = currentValue;
  284. }
  285. else {
  286. this._target[this.targetPropertyPath[0]] = currentValue;
  287. }
  288. if (this._target.markAsDirty) {
  289. this._target.markAsDirty(this.targetProperty);
  290. }
  291. };
  292. Animation.prototype.goToFrame = function (frame) {
  293. if (frame < this._keys[0].frame) {
  294. frame = this._keys[0].frame;
  295. }
  296. else if (frame > this._keys[this._keys.length - 1].frame) {
  297. frame = this._keys[this._keys.length - 1].frame;
  298. }
  299. var currentValue = this._interpolate(frame, 0, this.loopMode);
  300. this.setValue(currentValue);
  301. };
  302. Animation.prototype.animate = function (delay, from, to, loop, speedRatio) {
  303. if (!this.targetPropertyPath || this.targetPropertyPath.length < 1) {
  304. this._stopped = true;
  305. return false;
  306. }
  307. var returnValue = true;
  308. // Adding a start key at frame 0 if missing
  309. if (this._keys[0].frame !== 0) {
  310. var newKey = { frame: 0, value: this._keys[0].value };
  311. this._keys.splice(0, 0, newKey);
  312. }
  313. // Check limits
  314. if (from < this._keys[0].frame || from > this._keys[this._keys.length - 1].frame) {
  315. from = this._keys[0].frame;
  316. }
  317. if (to < this._keys[0].frame || to > this._keys[this._keys.length - 1].frame) {
  318. to = this._keys[this._keys.length - 1].frame;
  319. }
  320. // Compute ratio
  321. var range = to - from;
  322. var offsetValue;
  323. // ratio represents the frame delta between from and to
  324. var ratio = delay * (this.framePerSecond * speedRatio) / 1000.0;
  325. var highLimitValue = 0;
  326. if (ratio > range && !loop) {
  327. returnValue = false;
  328. highLimitValue = this._getKeyValue(this._keys[this._keys.length - 1].value);
  329. }
  330. else {
  331. // Get max value if required
  332. if (this.loopMode !== Animation.ANIMATIONLOOPMODE_CYCLE) {
  333. var keyOffset = to.toString() + from.toString();
  334. if (!this._offsetsCache[keyOffset]) {
  335. var fromValue = this._interpolate(from, 0, Animation.ANIMATIONLOOPMODE_CYCLE);
  336. var toValue = this._interpolate(to, 0, Animation.ANIMATIONLOOPMODE_CYCLE);
  337. switch (this.dataType) {
  338. // Float
  339. case Animation.ANIMATIONTYPE_FLOAT:
  340. this._offsetsCache[keyOffset] = toValue - fromValue;
  341. break;
  342. // Quaternion
  343. case Animation.ANIMATIONTYPE_QUATERNION:
  344. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  345. break;
  346. // Vector3
  347. case Animation.ANIMATIONTYPE_VECTOR3:
  348. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  349. // Vector2
  350. case Animation.ANIMATIONTYPE_VECTOR2:
  351. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  352. // Color3
  353. case Animation.ANIMATIONTYPE_COLOR3:
  354. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  355. default:
  356. break;
  357. }
  358. this._highLimitsCache[keyOffset] = toValue;
  359. }
  360. highLimitValue = this._highLimitsCache[keyOffset];
  361. offsetValue = this._offsetsCache[keyOffset];
  362. }
  363. }
  364. if (offsetValue === undefined) {
  365. switch (this.dataType) {
  366. // Float
  367. case Animation.ANIMATIONTYPE_FLOAT:
  368. offsetValue = 0;
  369. break;
  370. // Quaternion
  371. case Animation.ANIMATIONTYPE_QUATERNION:
  372. offsetValue = new BABYLON.Quaternion(0, 0, 0, 0);
  373. break;
  374. // Vector3
  375. case Animation.ANIMATIONTYPE_VECTOR3:
  376. offsetValue = BABYLON.Vector3.Zero();
  377. break;
  378. // Vector2
  379. case Animation.ANIMATIONTYPE_VECTOR2:
  380. offsetValue = BABYLON.Vector2.Zero();
  381. break;
  382. // Color3
  383. case Animation.ANIMATIONTYPE_COLOR3:
  384. offsetValue = BABYLON.Color3.Black();
  385. }
  386. }
  387. // Compute value
  388. var repeatCount = (ratio / range) >> 0;
  389. var currentFrame = returnValue ? from + ratio % range : to;
  390. var currentValue = this._interpolate(currentFrame, repeatCount, this.loopMode, offsetValue, highLimitValue);
  391. // Check events
  392. for (var index = 0; index < this._events.length; index++) {
  393. if (currentFrame >= this._events[index].frame) {
  394. var event = this._events[index];
  395. if (!event.isDone) {
  396. // If event should be done only once, remove it.
  397. if (event.onlyOnce) {
  398. this._events.splice(index, 1);
  399. index--;
  400. }
  401. event.isDone = true;
  402. event.action();
  403. }
  404. }
  405. else if (this._events[index].isDone && !this._events[index].onlyOnce) {
  406. // reset event, the animation is looping
  407. event.isDone = false;
  408. }
  409. }
  410. // Set value
  411. this.setValue(currentValue);
  412. if (!returnValue) {
  413. this._stopped = true;
  414. }
  415. return returnValue;
  416. };
  417. Object.defineProperty(Animation, "ANIMATIONTYPE_FLOAT", {
  418. get: function () {
  419. return Animation._ANIMATIONTYPE_FLOAT;
  420. },
  421. enumerable: true,
  422. configurable: true
  423. });
  424. Object.defineProperty(Animation, "ANIMATIONTYPE_VECTOR3", {
  425. get: function () {
  426. return Animation._ANIMATIONTYPE_VECTOR3;
  427. },
  428. enumerable: true,
  429. configurable: true
  430. });
  431. Object.defineProperty(Animation, "ANIMATIONTYPE_VECTOR2", {
  432. get: function () {
  433. return Animation._ANIMATIONTYPE_VECTOR2;
  434. },
  435. enumerable: true,
  436. configurable: true
  437. });
  438. Object.defineProperty(Animation, "ANIMATIONTYPE_QUATERNION", {
  439. get: function () {
  440. return Animation._ANIMATIONTYPE_QUATERNION;
  441. },
  442. enumerable: true,
  443. configurable: true
  444. });
  445. Object.defineProperty(Animation, "ANIMATIONTYPE_MATRIX", {
  446. get: function () {
  447. return Animation._ANIMATIONTYPE_MATRIX;
  448. },
  449. enumerable: true,
  450. configurable: true
  451. });
  452. Object.defineProperty(Animation, "ANIMATIONTYPE_COLOR3", {
  453. get: function () {
  454. return Animation._ANIMATIONTYPE_COLOR3;
  455. },
  456. enumerable: true,
  457. configurable: true
  458. });
  459. Object.defineProperty(Animation, "ANIMATIONLOOPMODE_RELATIVE", {
  460. get: function () {
  461. return Animation._ANIMATIONLOOPMODE_RELATIVE;
  462. },
  463. enumerable: true,
  464. configurable: true
  465. });
  466. Object.defineProperty(Animation, "ANIMATIONLOOPMODE_CYCLE", {
  467. get: function () {
  468. return Animation._ANIMATIONLOOPMODE_CYCLE;
  469. },
  470. enumerable: true,
  471. configurable: true
  472. });
  473. Object.defineProperty(Animation, "ANIMATIONLOOPMODE_CONSTANT", {
  474. get: function () {
  475. return Animation._ANIMATIONLOOPMODE_CONSTANT;
  476. },
  477. enumerable: true,
  478. configurable: true
  479. });
  480. // Statics
  481. Animation._ANIMATIONTYPE_FLOAT = 0;
  482. Animation._ANIMATIONTYPE_VECTOR3 = 1;
  483. Animation._ANIMATIONTYPE_QUATERNION = 2;
  484. Animation._ANIMATIONTYPE_MATRIX = 3;
  485. Animation._ANIMATIONTYPE_COLOR3 = 4;
  486. Animation._ANIMATIONTYPE_VECTOR2 = 5;
  487. Animation._ANIMATIONLOOPMODE_RELATIVE = 0;
  488. Animation._ANIMATIONLOOPMODE_CYCLE = 1;
  489. Animation._ANIMATIONLOOPMODE_CONSTANT = 2;
  490. return Animation;
  491. })();
  492. BABYLON.Animation = Animation;
  493. })(BABYLON || (BABYLON = {}));