babylon.animation.js 18 KB

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