Tween.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935
  1. /**
  2. * Tween.js - Licensed under the MIT license
  3. * https://github.com/tweenjs/tween.js
  4. * ----------------------------------------------
  5. *
  6. * See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
  7. * Thank you all, you're awesome!
  8. */
  9. var _Group = function () {
  10. this._tweens = {};
  11. this._tweensAddedDuringUpdate = {};
  12. };
  13. _Group.prototype = {
  14. getAll: function () {
  15. return Object.keys(this._tweens).map(function (tweenId) {
  16. return this._tweens[tweenId];
  17. }.bind(this));
  18. },
  19. removeAll: function () {
  20. this._tweens = {};
  21. },
  22. add: function (tween) {
  23. this._tweens[tween.getId()] = tween;
  24. this._tweensAddedDuringUpdate[tween.getId()] = tween;
  25. },
  26. remove: function (tween) {
  27. delete this._tweens[tween.getId()];
  28. delete this._tweensAddedDuringUpdate[tween.getId()];
  29. },
  30. update: function (time, preserve) {
  31. var tweenIds = Object.keys(this._tweens);
  32. if (tweenIds.length === 0) {
  33. return false;
  34. }
  35. time = time !== undefined ? time : TWEEN.now();
  36. // Tweens are updated in "batches". If you add a new tween during an update, then the
  37. // new tween will be updated in the next batch.
  38. // If you remove a tween during an update, it may or may not be updated. However,
  39. // if the removed tween was added during the current batch, then it will not be updated.
  40. while (tweenIds.length > 0) {
  41. this._tweensAddedDuringUpdate = {};
  42. for (var i = 0; i < tweenIds.length; i++) {
  43. var tween = this._tweens[tweenIds[i]];
  44. if (tween && tween.update(time) === false) {
  45. tween._isPlaying = false;
  46. if (!preserve) {
  47. delete this._tweens[tweenIds[i]];
  48. }
  49. }
  50. }
  51. tweenIds = Object.keys(this._tweensAddedDuringUpdate);
  52. }
  53. return true;
  54. }
  55. };
  56. var TWEEN = new _Group();
  57. TWEEN.Group = _Group;
  58. TWEEN._nextId = 0;
  59. TWEEN.nextId = function () {
  60. return TWEEN._nextId++;
  61. };
  62. // Include a performance.now polyfill.
  63. // In node.js, use process.hrtime.
  64. if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
  65. TWEEN.now = function () {
  66. var time = process.hrtime();
  67. // Convert [seconds, nanoseconds] to milliseconds.
  68. return time[0] * 1000 + time[1] / 1000000;
  69. };
  70. }
  71. // In a browser, use self.performance.now if it is available.
  72. else if (typeof (self) !== 'undefined' &&
  73. self.performance !== undefined &&
  74. self.performance.now !== undefined) {
  75. // This must be bound, because directly assigning this function
  76. // leads to an invocation exception in Chrome.
  77. TWEEN.now = self.performance.now.bind(self.performance);
  78. }
  79. // Use Date.now if it is available.
  80. else if (Date.now !== undefined) {
  81. TWEEN.now = Date.now;
  82. }
  83. // Otherwise, use 'new Date().getTime()'.
  84. else {
  85. TWEEN.now = function () {
  86. return new Date().getTime();
  87. };
  88. }
  89. TWEEN.Tween = function (object, group) {
  90. this._object = object;
  91. this._valuesStart = {};
  92. this._valuesEnd = {};
  93. this._valuesStartRepeat = {};
  94. this._duration = 1000;
  95. this._repeat = 0;
  96. this._repeatDelayTime = undefined;
  97. this._yoyo = false;
  98. this._isPlaying = false;
  99. this._reversed = false;
  100. this._delayTime = 0;
  101. this._startTime = null;
  102. this._easingFunction = TWEEN.Easing.Linear.None;
  103. this._interpolationFunction = TWEEN.Interpolation.Linear;
  104. this._chainedTweens = [];
  105. this._onStartCallback = null;
  106. this._onStartCallbackFired = false;
  107. this._onUpdateCallback = null;
  108. this._onRepeatCallback = null;
  109. this._onCompleteCallback = null;
  110. this._onStopCallback = null;
  111. this._group = group || TWEEN;
  112. this._id = TWEEN.nextId();
  113. };
  114. TWEEN.Tween.prototype = {
  115. getId: function () {
  116. return this._id;
  117. },
  118. isPlaying: function () {
  119. return this._isPlaying;
  120. },
  121. to: function (properties, duration) {
  122. this._valuesEnd = Object.create(properties);
  123. if (duration !== undefined) {
  124. this._duration = duration;
  125. }
  126. return this;
  127. },
  128. duration: function duration(d) {
  129. this._duration = d;
  130. return this;
  131. },
  132. start: function (time) {
  133. this._group.add(this);
  134. this._isPlaying = true;
  135. this._onStartCallbackFired = false;
  136. this._startTime = time !== undefined ? typeof time === 'string' ? TWEEN.now() + parseFloat(time) : time : TWEEN.now();
  137. this._startTime += this._delayTime;
  138. for (var property in this._valuesEnd) {
  139. // Check if an Array was provided as property value
  140. if (this._valuesEnd[property] instanceof Array) {
  141. if (this._valuesEnd[property].length === 0) {
  142. continue;
  143. }
  144. // Create a local copy of the Array with the start value at the front
  145. this._valuesEnd[property] = [this._object[property]].concat(this._valuesEnd[property]);
  146. }
  147. // If `to()` specifies a property that doesn't exist in the source object,
  148. // we should not set that property in the object
  149. if (this._object[property] === undefined) {
  150. continue;
  151. }
  152. // Save the starting value.
  153. this._valuesStart[property] = this._object[property];
  154. if ((this._valuesStart[property] instanceof Array) === false) {
  155. this._valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
  156. }
  157. this._valuesStartRepeat[property] = this._valuesStart[property] || 0;
  158. }
  159. return this;
  160. },
  161. stop: function () {
  162. if (!this._isPlaying) {
  163. return this;
  164. }
  165. this._group.remove(this);
  166. this._isPlaying = false;
  167. if (this._onStopCallback !== null) {
  168. this._onStopCallback(this._object);
  169. }
  170. this.stopChainedTweens();
  171. return this;
  172. },
  173. end: function () {
  174. this.update(Infinity);
  175. return this;
  176. },
  177. stopChainedTweens: function () {
  178. for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
  179. this._chainedTweens[i].stop();
  180. }
  181. },
  182. group: function (group) {
  183. this._group = group;
  184. return this;
  185. },
  186. delay: function (amount) {
  187. this._delayTime = amount;
  188. return this;
  189. },
  190. repeat: function (times) {
  191. this._repeat = times;
  192. return this;
  193. },
  194. repeatDelay: function (amount) {
  195. this._repeatDelayTime = amount;
  196. return this;
  197. },
  198. yoyo: function (yoyo) {
  199. this._yoyo = yoyo;
  200. return this;
  201. },
  202. easing: function (easingFunction) {
  203. this._easingFunction = easingFunction;
  204. return this;
  205. },
  206. interpolation: function (interpolationFunction) {
  207. this._interpolationFunction = interpolationFunction;
  208. return this;
  209. },
  210. chain: function () {
  211. this._chainedTweens = arguments;
  212. return this;
  213. },
  214. onStart: function (callback) {
  215. this._onStartCallback = callback;
  216. return this;
  217. },
  218. onUpdate: function (callback) {
  219. this._onUpdateCallback = callback;
  220. return this;
  221. },
  222. onRepeat: function onRepeat(callback) {
  223. this._onRepeatCallback = callback;
  224. return this;
  225. },
  226. onComplete: function (callback) {
  227. this._onCompleteCallback = callback;
  228. return this;
  229. },
  230. onStop: function (callback) {
  231. this._onStopCallback = callback;
  232. return this;
  233. },
  234. update: function (time) {
  235. var property;
  236. var elapsed;
  237. var value;
  238. if (time < this._startTime) {
  239. return true;
  240. }
  241. if (this._onStartCallbackFired === false) {
  242. if (this._onStartCallback !== null) {
  243. this._onStartCallback(this._object);
  244. }
  245. this._onStartCallbackFired = true;
  246. }
  247. elapsed = (time - this._startTime) / this._duration;
  248. elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
  249. value = this._easingFunction(elapsed);
  250. for (property in this._valuesEnd) {
  251. // Don't update properties that do not exist in the source object
  252. if (this._valuesStart[property] === undefined) {
  253. continue;
  254. }
  255. var start = this._valuesStart[property] || 0;
  256. var end = this._valuesEnd[property];
  257. if (end instanceof Array) {
  258. this._object[property] = this._interpolationFunction(end, value);
  259. } else {
  260. // Parses relative end values with start as base (e.g.: +10, -3)
  261. if (typeof (end) === 'string') {
  262. if (end.charAt(0) === '+' || end.charAt(0) === '-') {
  263. end = start + parseFloat(end);
  264. } else {
  265. end = parseFloat(end);
  266. }
  267. }
  268. // Protect against non numeric properties.
  269. if (typeof (end) === 'number') {
  270. this._object[property] = start + (end - start) * value;
  271. }
  272. }
  273. }
  274. if (this._onUpdateCallback !== null) {
  275. this._onUpdateCallback(this._object, elapsed);
  276. }
  277. if (elapsed === 1) {
  278. if (this._repeat > 0) {
  279. if (isFinite(this._repeat)) {
  280. this._repeat--;
  281. }
  282. // Reassign starting values, restart by making startTime = now
  283. for (property in this._valuesStartRepeat) {
  284. if (typeof (this._valuesEnd[property]) === 'string') {
  285. this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
  286. }
  287. if (this._yoyo) {
  288. var tmp = this._valuesStartRepeat[property];
  289. this._valuesStartRepeat[property] = this._valuesEnd[property];
  290. this._valuesEnd[property] = tmp;
  291. }
  292. this._valuesStart[property] = this._valuesStartRepeat[property];
  293. }
  294. if (this._yoyo) {
  295. this._reversed = !this._reversed;
  296. }
  297. if (this._repeatDelayTime !== undefined) {
  298. this._startTime = time + this._repeatDelayTime;
  299. } else {
  300. this._startTime = time + this._delayTime;
  301. }
  302. if (this._onRepeatCallback !== null) {
  303. this._onRepeatCallback(this._object);
  304. }
  305. return true;
  306. } else {
  307. if (this._onCompleteCallback !== null) {
  308. this._onCompleteCallback(this._object);
  309. }
  310. for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
  311. // Make the chained tweens start exactly at the time they should,
  312. // even if the `update()` method was called way past the duration of the tween
  313. this._chainedTweens[i].start(this._startTime + this._duration);
  314. }
  315. return false;
  316. }
  317. }
  318. return true;
  319. }
  320. };
  321. TWEEN.Easing = {
  322. Linear: {
  323. None: function (k) {
  324. return k;
  325. }
  326. },
  327. Quadratic: {
  328. In: function (k) {
  329. return k * k;
  330. },
  331. Out: function (k) {
  332. return k * (2 - k);
  333. },
  334. InOut: function (k) {
  335. if ((k *= 2) < 1) {
  336. return 0.5 * k * k;
  337. }
  338. return - 0.5 * (--k * (k - 2) - 1);
  339. }
  340. },
  341. Cubic: {
  342. In: function (k) {
  343. return k * k * k;
  344. },
  345. Out: function (k) {
  346. return --k * k * k + 1;
  347. },
  348. InOut: function (k) {
  349. if ((k *= 2) < 1) {
  350. return 0.5 * k * k * k;
  351. }
  352. return 0.5 * ((k -= 2) * k * k + 2);
  353. }
  354. },
  355. Quartic: {
  356. In: function (k) {
  357. return k * k * k * k;
  358. },
  359. Out: function (k) {
  360. return 1 - (--k * k * k * k);
  361. },
  362. InOut: function (k) {
  363. if ((k *= 2) < 1) {
  364. return 0.5 * k * k * k * k;
  365. }
  366. return - 0.5 * ((k -= 2) * k * k * k - 2);
  367. }
  368. },
  369. Quintic: {
  370. In: function (k) {
  371. return k * k * k * k * k;
  372. },
  373. Out: function (k) {
  374. return --k * k * k * k * k + 1;
  375. },
  376. InOut: function (k) {
  377. if ((k *= 2) < 1) {
  378. return 0.5 * k * k * k * k * k;
  379. }
  380. return 0.5 * ((k -= 2) * k * k * k * k + 2);
  381. }
  382. },
  383. Sinusoidal: {
  384. In: function (k) {
  385. return 1 - Math.cos(k * Math.PI / 2);
  386. },
  387. Out: function (k) {
  388. return Math.sin(k * Math.PI / 2);
  389. },
  390. InOut: function (k) {
  391. return 0.5 * (1 - Math.cos(Math.PI * k));
  392. }
  393. },
  394. Exponential: {
  395. In: function (k) {
  396. return k === 0 ? 0 : Math.pow(1024, k - 1);
  397. },
  398. Out: function (k) {
  399. return k === 1 ? 1 : 1 - Math.pow(2, - 10 * k);
  400. },
  401. InOut: function (k) {
  402. if (k === 0) {
  403. return 0;
  404. }
  405. if (k === 1) {
  406. return 1;
  407. }
  408. if ((k *= 2) < 1) {
  409. return 0.5 * Math.pow(1024, k - 1);
  410. }
  411. return 0.5 * (- Math.pow(2, - 10 * (k - 1)) + 2);
  412. }
  413. },
  414. Circular: {
  415. In: function (k) {
  416. return 1 - Math.sqrt(1 - k * k);
  417. },
  418. Out: function (k) {
  419. return Math.sqrt(1 - (--k * k));
  420. },
  421. InOut: function (k) {
  422. if ((k *= 2) < 1) {
  423. return - 0.5 * (Math.sqrt(1 - k * k) - 1);
  424. }
  425. return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
  426. }
  427. },
  428. Elastic: {
  429. In: function (k) {
  430. if (k === 0) {
  431. return 0;
  432. }
  433. if (k === 1) {
  434. return 1;
  435. }
  436. return -Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
  437. },
  438. Out: function (k) {
  439. if (k === 0) {
  440. return 0;
  441. }
  442. if (k === 1) {
  443. return 1;
  444. }
  445. return Math.pow(2, -10 * k) * Math.sin((k - 0.1) * 5 * Math.PI) + 1;
  446. },
  447. InOut: function (k) {
  448. if (k === 0) {
  449. return 0;
  450. }
  451. if (k === 1) {
  452. return 1;
  453. }
  454. k *= 2;
  455. if (k < 1) {
  456. return -0.5 * Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
  457. }
  458. return 0.5 * Math.pow(2, -10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI) + 1;
  459. }
  460. },
  461. Back: {
  462. In: function (k) {
  463. var s = 1.70158;
  464. return k * k * ((s + 1) * k - s);
  465. },
  466. Out: function (k) {
  467. var s = 1.70158;
  468. return --k * k * ((s + 1) * k + s) + 1;
  469. },
  470. InOut: function (k) {
  471. var s = 1.70158 * 1.525;
  472. if ((k *= 2) < 1) {
  473. return 0.5 * (k * k * ((s + 1) * k - s));
  474. }
  475. return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
  476. }
  477. },
  478. Bounce: {
  479. In: function (k) {
  480. return 1 - TWEEN.Easing.Bounce.Out(1 - k);
  481. },
  482. Out: function (k) {
  483. if (k < (1 / 2.75)) {
  484. return 7.5625 * k * k;
  485. } else if (k < (2 / 2.75)) {
  486. return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
  487. } else if (k < (2.5 / 2.75)) {
  488. return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
  489. } else {
  490. return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
  491. }
  492. },
  493. InOut: function (k) {
  494. if (k < 0.5) {
  495. return TWEEN.Easing.Bounce.In(k * 2) * 0.5;
  496. }
  497. return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5;
  498. }
  499. }
  500. };
  501. TWEEN.Interpolation = {
  502. Linear: function (v, k) {
  503. var m = v.length - 1;
  504. var f = m * k;
  505. var i = Math.floor(f);
  506. var fn = TWEEN.Interpolation.Utils.Linear;
  507. if (k < 0) {
  508. return fn(v[0], v[1], f);
  509. }
  510. if (k > 1) {
  511. return fn(v[m], v[m - 1], m - f);
  512. }
  513. return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
  514. },
  515. Bezier: function (v, k) {
  516. var b = 0;
  517. var n = v.length - 1;
  518. var pw = Math.pow;
  519. var bn = TWEEN.Interpolation.Utils.Bernstein;
  520. for (var i = 0; i <= n; i++) {
  521. b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
  522. }
  523. return b;
  524. },
  525. CatmullRom: function (v, k) {
  526. var m = v.length - 1;
  527. var f = m * k;
  528. var i = Math.floor(f);
  529. var fn = TWEEN.Interpolation.Utils.CatmullRom;
  530. if (v[0] === v[m]) {
  531. if (k < 0) {
  532. i = Math.floor(f = m * (1 + k));
  533. }
  534. return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
  535. } else {
  536. if (k < 0) {
  537. return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
  538. }
  539. if (k > 1) {
  540. return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
  541. }
  542. return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
  543. }
  544. },
  545. Utils: {
  546. Linear: function (p0, p1, t) {
  547. return (p1 - p0) * t + p0;
  548. },
  549. Bernstein: function (n, i) {
  550. var fc = TWEEN.Interpolation.Utils.Factorial;
  551. return fc(n) / fc(i) / fc(n - i);
  552. },
  553. Factorial: (function () {
  554. var a = [1];
  555. return function (n) {
  556. var s = 1;
  557. if (a[n]) {
  558. return a[n];
  559. }
  560. for (var i = n; i > 1; i--) {
  561. s *= i;
  562. }
  563. a[n] = s;
  564. return s;
  565. };
  566. })(),
  567. CatmullRom: function (p0, p1, p2, p3, t) {
  568. var v0 = (p2 - p0) * 0.5;
  569. var v1 = (p3 - p1) * 0.5;
  570. var t2 = t * t;
  571. var t3 = t * t2;
  572. return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (- 3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
  573. }
  574. }
  575. };
  576. // UMD (Universal Module Definition)
  577. (function (root) {
  578. if (typeof define === 'function' && define.amd) {
  579. // AMD
  580. define([], function () {
  581. return TWEEN;
  582. });
  583. } else if (typeof module !== 'undefined' && typeof exports === 'object') {
  584. // Node.js
  585. module.exports = TWEEN;
  586. } else if (root !== undefined) {
  587. // Global variable
  588. root.TWEEN = TWEEN;
  589. }
  590. })(this);