babylon.animation.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. var BABYLON;
  2. (function (BABYLON) {
  3. var Animation = (function () {
  4. function Animation(name, targetProperty, framePerSecond, dataType, loopMode) {
  5. this.name = name;
  6. this.targetProperty = targetProperty;
  7. this.framePerSecond = framePerSecond;
  8. this.dataType = dataType;
  9. this.loopMode = loopMode;
  10. this._offsetsCache = {};
  11. this._highLimitsCache = {};
  12. this._stopped = false;
  13. this.allowMatricesInterpolation = false;
  14. this.targetPropertyPath = targetProperty.split(".");
  15. this.dataType = dataType;
  16. this.loopMode = loopMode === undefined ? Animation.ANIMATIONLOOPMODE_CYCLE : loopMode;
  17. }
  18. Animation.CreateAndStartAnimation = function (name, mesh, targetProperty, framePerSecond, totalFrame, from, to, loopMode, easingFunction) {
  19. var dataType = undefined;
  20. if (!isNaN(parseFloat(from)) && isFinite(from)) {
  21. dataType = Animation.ANIMATIONTYPE_FLOAT;
  22. }
  23. else if (from instanceof BABYLON.Quaternion) {
  24. dataType = Animation.ANIMATIONTYPE_QUATERNION;
  25. }
  26. else if (from instanceof BABYLON.Vector3) {
  27. dataType = Animation.ANIMATIONTYPE_VECTOR3;
  28. }
  29. else if (from instanceof BABYLON.Vector2) {
  30. dataType = Animation.ANIMATIONTYPE_VECTOR2;
  31. }
  32. else if (from instanceof BABYLON.Color3) {
  33. dataType = Animation.ANIMATIONTYPE_COLOR3;
  34. }
  35. if (dataType == undefined) {
  36. return null;
  37. }
  38. var animation = new Animation(name, targetProperty, framePerSecond, dataType, loopMode);
  39. var keys = [];
  40. keys.push({ frame: 0, value: from });
  41. keys.push({ frame: totalFrame, value: to });
  42. animation.setKeys(keys);
  43. if (easingFunction !== undefined) {
  44. animation.setEasingFunction(easingFunction);
  45. }
  46. mesh.animations.push(animation);
  47. return mesh.getScene().beginAnimation(mesh, 0, totalFrame, (animation.loopMode === 1));
  48. };
  49. // Methods
  50. Animation.prototype.reset = function () {
  51. this._offsetsCache = {};
  52. this._highLimitsCache = {};
  53. this.currentFrame = 0;
  54. };
  55. Animation.prototype.isStopped = function () {
  56. return this._stopped;
  57. };
  58. Animation.prototype.getKeys = function () {
  59. return this._keys;
  60. };
  61. Animation.prototype.getEasingFunction = function () {
  62. return this._easingFunction;
  63. };
  64. Animation.prototype.setEasingFunction = function (easingFunction) {
  65. this._easingFunction = easingFunction;
  66. };
  67. Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
  68. return startValue + (endValue - startValue) * gradient;
  69. };
  70. Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
  71. return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
  72. };
  73. Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
  74. return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
  75. };
  76. Animation.prototype.vector2InterpolateFunction = function (startValue, endValue, gradient) {
  77. return BABYLON.Vector2.Lerp(startValue, endValue, gradient);
  78. };
  79. Animation.prototype.color3InterpolateFunction = function (startValue, endValue, gradient) {
  80. return BABYLON.Color3.Lerp(startValue, endValue, gradient);
  81. };
  82. Animation.prototype.matrixInterpolateFunction = function (startValue, endValue, gradient) {
  83. var startScale = new BABYLON.Vector3(0, 0, 0);
  84. var startRotation = new BABYLON.Quaternion();
  85. var startTranslation = new BABYLON.Vector3(0, 0, 0);
  86. startValue.decompose(startScale, startRotation, startTranslation);
  87. var endScale = new BABYLON.Vector3(0, 0, 0);
  88. var endRotation = new BABYLON.Quaternion();
  89. var endTranslation = new BABYLON.Vector3(0, 0, 0);
  90. endValue.decompose(endScale, endRotation, endTranslation);
  91. var resultScale = this.vector3InterpolateFunction(startScale, endScale, gradient);
  92. var resultRotation = this.quaternionInterpolateFunction(startRotation, endRotation, gradient);
  93. var resultTranslation = this.vector3InterpolateFunction(startTranslation, endTranslation, gradient);
  94. var result = BABYLON.Matrix.Compose(resultScale, resultRotation, resultTranslation);
  95. return result;
  96. };
  97. Animation.prototype.clone = function () {
  98. var clone = new Animation(this.name, this.targetPropertyPath.join("."), this.framePerSecond, this.dataType, this.loopMode);
  99. clone.setKeys(this._keys);
  100. return clone;
  101. };
  102. Animation.prototype.setKeys = function (values) {
  103. this._keys = values.slice(0);
  104. this._offsetsCache = {};
  105. this._highLimitsCache = {};
  106. };
  107. Animation.prototype._getKeyValue = function (value) {
  108. if (typeof value === "function") {
  109. return value();
  110. }
  111. return value;
  112. };
  113. Animation.prototype._interpolate = function (currentFrame, repeatCount, loopMode, offsetValue, highLimitValue) {
  114. if (loopMode === Animation.ANIMATIONLOOPMODE_CONSTANT && repeatCount > 0) {
  115. return highLimitValue.clone ? highLimitValue.clone() : highLimitValue;
  116. }
  117. this.currentFrame = currentFrame;
  118. // Try to get a hash to find the right key
  119. 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));
  120. if (this._keys[startKey].frame >= currentFrame) {
  121. while (startKey - 1 >= 0 && this._keys[startKey].frame >= currentFrame) {
  122. startKey--;
  123. }
  124. }
  125. for (var key = startKey; key < this._keys.length; key++) {
  126. if (this._keys[key + 1].frame >= currentFrame) {
  127. var startValue = this._getKeyValue(this._keys[key].value);
  128. var endValue = this._getKeyValue(this._keys[key + 1].value);
  129. // gradient : percent of currentFrame between the frame inf and the frame sup
  130. var gradient = (currentFrame - this._keys[key].frame) / (this._keys[key + 1].frame - this._keys[key].frame);
  131. // check for easingFunction and correction of gradient
  132. if (this._easingFunction != null) {
  133. gradient = this._easingFunction.ease(gradient);
  134. }
  135. switch (this.dataType) {
  136. // Float
  137. case Animation.ANIMATIONTYPE_FLOAT:
  138. switch (loopMode) {
  139. case Animation.ANIMATIONLOOPMODE_CYCLE:
  140. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  141. return this.floatInterpolateFunction(startValue, endValue, gradient);
  142. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  143. return offsetValue * repeatCount + this.floatInterpolateFunction(startValue, endValue, gradient);
  144. }
  145. break;
  146. // Quaternion
  147. case Animation.ANIMATIONTYPE_QUATERNION:
  148. var quaternion = null;
  149. switch (loopMode) {
  150. case Animation.ANIMATIONLOOPMODE_CYCLE:
  151. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  152. quaternion = this.quaternionInterpolateFunction(startValue, endValue, gradient);
  153. break;
  154. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  155. quaternion = this.quaternionInterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  156. break;
  157. }
  158. return quaternion;
  159. // Vector3
  160. case Animation.ANIMATIONTYPE_VECTOR3:
  161. switch (loopMode) {
  162. case Animation.ANIMATIONLOOPMODE_CYCLE:
  163. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  164. return this.vector3InterpolateFunction(startValue, endValue, gradient);
  165. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  166. return this.vector3InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  167. }
  168. // Vector2
  169. case Animation.ANIMATIONTYPE_VECTOR2:
  170. switch (loopMode) {
  171. case Animation.ANIMATIONLOOPMODE_CYCLE:
  172. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  173. return this.vector2InterpolateFunction(startValue, endValue, gradient);
  174. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  175. return this.vector2InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  176. }
  177. // Color3
  178. case Animation.ANIMATIONTYPE_COLOR3:
  179. switch (loopMode) {
  180. case Animation.ANIMATIONLOOPMODE_CYCLE:
  181. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  182. return this.color3InterpolateFunction(startValue, endValue, gradient);
  183. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  184. return this.color3InterpolateFunction(startValue, endValue, gradient).add(offsetValue.scale(repeatCount));
  185. }
  186. // Matrix
  187. case Animation.ANIMATIONTYPE_MATRIX:
  188. switch (loopMode) {
  189. case Animation.ANIMATIONLOOPMODE_CYCLE:
  190. case Animation.ANIMATIONLOOPMODE_CONSTANT:
  191. if (this.allowMatricesInterpolation) {
  192. return this.matrixInterpolateFunction(startValue, endValue, gradient);
  193. }
  194. case Animation.ANIMATIONLOOPMODE_RELATIVE:
  195. return startValue;
  196. }
  197. default:
  198. break;
  199. }
  200. break;
  201. }
  202. }
  203. return this._getKeyValue(this._keys[this._keys.length - 1].value);
  204. };
  205. Animation.prototype.animate = function (delay, from, to, loop, speedRatio) {
  206. if (!this.targetPropertyPath || this.targetPropertyPath.length < 1) {
  207. this._stopped = true;
  208. return false;
  209. }
  210. var returnValue = true;
  211. // Adding a start key at frame 0 if missing
  212. if (this._keys[0].frame !== 0) {
  213. var newKey = { frame: 0, value: this._keys[0].value };
  214. this._keys.splice(0, 0, newKey);
  215. }
  216. // Check limits
  217. if (from < this._keys[0].frame || from > this._keys[this._keys.length - 1].frame) {
  218. from = this._keys[0].frame;
  219. }
  220. if (to < this._keys[0].frame || to > this._keys[this._keys.length - 1].frame) {
  221. to = this._keys[this._keys.length - 1].frame;
  222. }
  223. // Compute ratio
  224. var range = to - from;
  225. var offsetValue;
  226. // ratio represents the frame delta between from and to
  227. var ratio = delay * (this.framePerSecond * speedRatio) / 1000.0;
  228. var highLimitValue = 0;
  229. if (ratio > range && !loop) {
  230. returnValue = false;
  231. highLimitValue = this._getKeyValue(this._keys[this._keys.length - 1].value);
  232. }
  233. else {
  234. // Get max value if required
  235. if (this.loopMode !== Animation.ANIMATIONLOOPMODE_CYCLE) {
  236. var keyOffset = to.toString() + from.toString();
  237. if (!this._offsetsCache[keyOffset]) {
  238. var fromValue = this._interpolate(from, 0, Animation.ANIMATIONLOOPMODE_CYCLE);
  239. var toValue = this._interpolate(to, 0, Animation.ANIMATIONLOOPMODE_CYCLE);
  240. switch (this.dataType) {
  241. // Float
  242. case Animation.ANIMATIONTYPE_FLOAT:
  243. this._offsetsCache[keyOffset] = toValue - fromValue;
  244. break;
  245. // Quaternion
  246. case Animation.ANIMATIONTYPE_QUATERNION:
  247. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  248. break;
  249. // Vector3
  250. case Animation.ANIMATIONTYPE_VECTOR3:
  251. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  252. // Vector2
  253. case Animation.ANIMATIONTYPE_VECTOR2:
  254. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  255. // Color3
  256. case Animation.ANIMATIONTYPE_COLOR3:
  257. this._offsetsCache[keyOffset] = toValue.subtract(fromValue);
  258. default:
  259. break;
  260. }
  261. this._highLimitsCache[keyOffset] = toValue;
  262. }
  263. highLimitValue = this._highLimitsCache[keyOffset];
  264. offsetValue = this._offsetsCache[keyOffset];
  265. }
  266. }
  267. if (offsetValue === undefined) {
  268. switch (this.dataType) {
  269. // Float
  270. case Animation.ANIMATIONTYPE_FLOAT:
  271. offsetValue = 0;
  272. break;
  273. // Quaternion
  274. case Animation.ANIMATIONTYPE_QUATERNION:
  275. offsetValue = new BABYLON.Quaternion(0, 0, 0, 0);
  276. break;
  277. // Vector3
  278. case Animation.ANIMATIONTYPE_VECTOR3:
  279. offsetValue = BABYLON.Vector3.Zero();
  280. break;
  281. // Vector2
  282. case Animation.ANIMATIONTYPE_VECTOR2:
  283. offsetValue = BABYLON.Vector2.Zero();
  284. break;
  285. // Color3
  286. case Animation.ANIMATIONTYPE_COLOR3:
  287. offsetValue = BABYLON.Color3.Black();
  288. }
  289. }
  290. // Compute value
  291. var repeatCount = (ratio / range) >> 0;
  292. var currentFrame = returnValue ? from + ratio % range : to;
  293. var currentValue = this._interpolate(currentFrame, repeatCount, this.loopMode, offsetValue, highLimitValue);
  294. // Set value
  295. if (this.targetPropertyPath.length > 1) {
  296. var property = this._target[this.targetPropertyPath[0]];
  297. for (var index = 1; index < this.targetPropertyPath.length - 1; index++) {
  298. property = property[this.targetPropertyPath[index]];
  299. }
  300. property[this.targetPropertyPath[this.targetPropertyPath.length - 1]] = currentValue;
  301. }
  302. else {
  303. this._target[this.targetPropertyPath[0]] = currentValue;
  304. }
  305. if (this._target.markAsDirty) {
  306. this._target.markAsDirty(this.targetProperty);
  307. }
  308. if (!returnValue) {
  309. this._stopped = true;
  310. }
  311. return returnValue;
  312. };
  313. Object.defineProperty(Animation, "ANIMATIONTYPE_FLOAT", {
  314. get: function () {
  315. return Animation._ANIMATIONTYPE_FLOAT;
  316. },
  317. enumerable: true,
  318. configurable: true
  319. });
  320. Object.defineProperty(Animation, "ANIMATIONTYPE_VECTOR3", {
  321. get: function () {
  322. return Animation._ANIMATIONTYPE_VECTOR3;
  323. },
  324. enumerable: true,
  325. configurable: true
  326. });
  327. Object.defineProperty(Animation, "ANIMATIONTYPE_VECTOR2", {
  328. get: function () {
  329. return Animation._ANIMATIONTYPE_VECTOR2;
  330. },
  331. enumerable: true,
  332. configurable: true
  333. });
  334. Object.defineProperty(Animation, "ANIMATIONTYPE_QUATERNION", {
  335. get: function () {
  336. return Animation._ANIMATIONTYPE_QUATERNION;
  337. },
  338. enumerable: true,
  339. configurable: true
  340. });
  341. Object.defineProperty(Animation, "ANIMATIONTYPE_MATRIX", {
  342. get: function () {
  343. return Animation._ANIMATIONTYPE_MATRIX;
  344. },
  345. enumerable: true,
  346. configurable: true
  347. });
  348. Object.defineProperty(Animation, "ANIMATIONTYPE_COLOR3", {
  349. get: function () {
  350. return Animation._ANIMATIONTYPE_COLOR3;
  351. },
  352. enumerable: true,
  353. configurable: true
  354. });
  355. Object.defineProperty(Animation, "ANIMATIONLOOPMODE_RELATIVE", {
  356. get: function () {
  357. return Animation._ANIMATIONLOOPMODE_RELATIVE;
  358. },
  359. enumerable: true,
  360. configurable: true
  361. });
  362. Object.defineProperty(Animation, "ANIMATIONLOOPMODE_CYCLE", {
  363. get: function () {
  364. return Animation._ANIMATIONLOOPMODE_CYCLE;
  365. },
  366. enumerable: true,
  367. configurable: true
  368. });
  369. Object.defineProperty(Animation, "ANIMATIONLOOPMODE_CONSTANT", {
  370. get: function () {
  371. return Animation._ANIMATIONLOOPMODE_CONSTANT;
  372. },
  373. enumerable: true,
  374. configurable: true
  375. });
  376. // Statics
  377. Animation._ANIMATIONTYPE_FLOAT = 0;
  378. Animation._ANIMATIONTYPE_VECTOR3 = 1;
  379. Animation._ANIMATIONTYPE_QUATERNION = 2;
  380. Animation._ANIMATIONTYPE_MATRIX = 3;
  381. Animation._ANIMATIONTYPE_COLOR3 = 4;
  382. Animation._ANIMATIONTYPE_VECTOR2 = 5;
  383. Animation._ANIMATIONLOOPMODE_RELATIVE = 0;
  384. Animation._ANIMATIONLOOPMODE_CYCLE = 1;
  385. Animation._ANIMATIONLOOPMODE_CONSTANT = 2;
  386. return Animation;
  387. })();
  388. BABYLON.Animation = Animation;
  389. })(BABYLON || (BABYLON = {}));