Tween.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755
  1. /**
  2. * Tween.js - Licensed under the MIT license
  3. * https://github.com/sole/tween.js
  4. * ----------------------------------------------
  5. *
  6. * See https://github.com/sole/tween.js/graphs/contributors for the full list of contributors.
  7. * Thank you all, you're awesome!
  8. */
  9. // Date.now shim for (ahem) Internet Explo(d|r)er
  10. if ( Date.now === undefined ) {
  11. Date.now = function () {
  12. return new Date().valueOf();
  13. };
  14. }
  15. var TWEEN = TWEEN || ( function () {
  16. var _tweens = [];
  17. return {
  18. REVISION: '14',
  19. getAll: function () {
  20. return _tweens;
  21. },
  22. removeAll: function () {
  23. _tweens = [];
  24. },
  25. add: function ( tween ) {
  26. _tweens.push( tween );
  27. },
  28. remove: function ( tween ) {
  29. var i = _tweens.indexOf( tween );
  30. if ( i !== -1 ) {
  31. _tweens.splice( i, 1 );
  32. }
  33. },
  34. update: function ( time ) {
  35. if ( _tweens.length === 0 ) return false;
  36. var i = 0;
  37. time = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() );
  38. while ( i < _tweens.length ) {
  39. if ( _tweens[ i ].update( time ) ) {
  40. i++;
  41. } else {
  42. _tweens.splice( i, 1 );
  43. }
  44. }
  45. return true;
  46. }
  47. };
  48. } )();
  49. TWEEN.Tween = function ( object ) {
  50. var _object = object;
  51. var _valuesStart = {};
  52. var _valuesEnd = {};
  53. var _valuesStartRepeat = {};
  54. var _duration = 1000;
  55. var _repeat = 0;
  56. var _yoyo = false;
  57. var _isPlaying = false;
  58. var _reversed = false;
  59. var _delayTime = 0;
  60. var _startTime = null;
  61. var _easingFunction = TWEEN.Easing.Linear.None;
  62. var _interpolationFunction = TWEEN.Interpolation.Linear;
  63. var _chainedTweens = [];
  64. var _onStartCallback = null;
  65. var _onStartCallbackFired = false;
  66. var _onUpdateCallback = null;
  67. var _onCompleteCallback = null;
  68. var _onStopCallback = null;
  69. // Set all starting values present on the target object
  70. for ( var field in object ) {
  71. _valuesStart[ field ] = parseFloat(object[field], 10);
  72. }
  73. this.to = function ( properties, duration ) {
  74. if ( duration !== undefined ) {
  75. _duration = duration;
  76. }
  77. _valuesEnd = properties;
  78. return this;
  79. };
  80. this.start = function ( time ) {
  81. TWEEN.add( this );
  82. _isPlaying = true;
  83. _onStartCallbackFired = false;
  84. _startTime = time !== undefined ? time : ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now() );
  85. _startTime += _delayTime;
  86. for ( var property in _valuesEnd ) {
  87. // check if an Array was provided as property value
  88. if ( _valuesEnd[ property ] instanceof Array ) {
  89. if ( _valuesEnd[ property ].length === 0 ) {
  90. continue;
  91. }
  92. // create a local copy of the Array with the start value at the front
  93. _valuesEnd[ property ] = [ _object[ property ] ].concat( _valuesEnd[ property ] );
  94. }
  95. _valuesStart[ property ] = _object[ property ];
  96. if( ( _valuesStart[ property ] instanceof Array ) === false ) {
  97. _valuesStart[ property ] *= 1.0; // Ensures we're using numbers, not strings
  98. }
  99. _valuesStartRepeat[ property ] = _valuesStart[ property ] || 0;
  100. }
  101. return this;
  102. };
  103. this.stop = function () {
  104. if ( !_isPlaying ) {
  105. return this;
  106. }
  107. TWEEN.remove( this );
  108. _isPlaying = false;
  109. if ( _onStopCallback !== null ) {
  110. _onStopCallback.call( _object );
  111. }
  112. this.stopChainedTweens();
  113. return this;
  114. };
  115. this.stopChainedTweens = function () {
  116. for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) {
  117. _chainedTweens[ i ].stop();
  118. }
  119. };
  120. this.delay = function ( amount ) {
  121. _delayTime = amount;
  122. return this;
  123. };
  124. this.repeat = function ( times ) {
  125. _repeat = times;
  126. return this;
  127. };
  128. this.yoyo = function( yoyo ) {
  129. _yoyo = yoyo;
  130. return this;
  131. };
  132. this.easing = function ( easing ) {
  133. _easingFunction = easing;
  134. return this;
  135. };
  136. this.interpolation = function ( interpolation ) {
  137. _interpolationFunction = interpolation;
  138. return this;
  139. };
  140. this.chain = function () {
  141. _chainedTweens = arguments;
  142. return this;
  143. };
  144. this.onStart = function ( callback ) {
  145. _onStartCallback = callback;
  146. return this;
  147. };
  148. this.onUpdate = function ( callback ) {
  149. _onUpdateCallback = callback;
  150. return this;
  151. };
  152. this.onComplete = function ( callback ) {
  153. _onCompleteCallback = callback;
  154. return this;
  155. };
  156. this.onStop = function ( callback ) {
  157. _onStopCallback = callback;
  158. return this;
  159. };
  160. this.update = function ( time ) {
  161. var property;
  162. if ( time < _startTime ) {
  163. return true;
  164. }
  165. if ( _onStartCallbackFired === false ) {
  166. if ( _onStartCallback !== null ) {
  167. _onStartCallback.call( _object );
  168. }
  169. _onStartCallbackFired = true;
  170. }
  171. var elapsed = ( time - _startTime ) / _duration;
  172. elapsed = elapsed > 1 ? 1 : elapsed;
  173. var value = _easingFunction( elapsed );
  174. for ( property in _valuesEnd ) {
  175. var start = _valuesStart[ property ] || 0;
  176. var end = _valuesEnd[ property ];
  177. if ( end instanceof Array ) {
  178. _object[ property ] = _interpolationFunction( end, value );
  179. } else {
  180. // Parses relative end values with start as base (e.g.: +10, -3)
  181. if ( typeof(end) === "string" ) {
  182. end = start + parseFloat(end, 10);
  183. }
  184. // protect against non numeric properties.
  185. if ( typeof(end) === "number" ) {
  186. _object[ property ] = start + ( end - start ) * value;
  187. }
  188. }
  189. }
  190. if ( _onUpdateCallback !== null ) {
  191. _onUpdateCallback.call( _object, value );
  192. }
  193. if ( elapsed == 1 ) {
  194. if ( _repeat > 0 ) {
  195. if( isFinite( _repeat ) ) {
  196. _repeat--;
  197. }
  198. // reassign starting values, restart by making startTime = now
  199. for( property in _valuesStartRepeat ) {
  200. if ( typeof( _valuesEnd[ property ] ) === "string" ) {
  201. _valuesStartRepeat[ property ] = _valuesStartRepeat[ property ] + parseFloat(_valuesEnd[ property ], 10);
  202. }
  203. if (_yoyo) {
  204. var tmp = _valuesStartRepeat[ property ];
  205. _valuesStartRepeat[ property ] = _valuesEnd[ property ];
  206. _valuesEnd[ property ] = tmp;
  207. }
  208. _valuesStart[ property ] = _valuesStartRepeat[ property ];
  209. }
  210. if (_yoyo) {
  211. _reversed = !_reversed;
  212. }
  213. _startTime = time + _delayTime;
  214. return true;
  215. } else {
  216. if ( _onCompleteCallback !== null ) {
  217. _onCompleteCallback.call( _object );
  218. }
  219. for ( var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++ ) {
  220. _chainedTweens[ i ].start( time );
  221. }
  222. return false;
  223. }
  224. }
  225. return true;
  226. };
  227. };
  228. TWEEN.Easing = {
  229. Linear: {
  230. None: function ( k ) {
  231. return k;
  232. }
  233. },
  234. Quadratic: {
  235. In: function ( k ) {
  236. return k * k;
  237. },
  238. Out: function ( k ) {
  239. return k * ( 2 - k );
  240. },
  241. InOut: function ( k ) {
  242. if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
  243. return - 0.5 * ( --k * ( k - 2 ) - 1 );
  244. }
  245. },
  246. Cubic: {
  247. In: function ( k ) {
  248. return k * k * k;
  249. },
  250. Out: function ( k ) {
  251. return --k * k * k + 1;
  252. },
  253. InOut: function ( k ) {
  254. if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k;
  255. return 0.5 * ( ( k -= 2 ) * k * k + 2 );
  256. }
  257. },
  258. Quartic: {
  259. In: function ( k ) {
  260. return k * k * k * k;
  261. },
  262. Out: function ( k ) {
  263. return 1 - ( --k * k * k * k );
  264. },
  265. InOut: function ( k ) {
  266. if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k;
  267. return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 );
  268. }
  269. },
  270. Quintic: {
  271. In: function ( k ) {
  272. return k * k * k * k * k;
  273. },
  274. Out: function ( k ) {
  275. return --k * k * k * k * k + 1;
  276. },
  277. InOut: function ( k ) {
  278. if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k;
  279. return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 );
  280. }
  281. },
  282. Sinusoidal: {
  283. In: function ( k ) {
  284. return 1 - Math.cos( k * Math.PI / 2 );
  285. },
  286. Out: function ( k ) {
  287. return Math.sin( k * Math.PI / 2 );
  288. },
  289. InOut: function ( k ) {
  290. return 0.5 * ( 1 - Math.cos( Math.PI * k ) );
  291. }
  292. },
  293. Exponential: {
  294. In: function ( k ) {
  295. return k === 0 ? 0 : Math.pow( 1024, k - 1 );
  296. },
  297. Out: function ( k ) {
  298. return k === 1 ? 1 : 1 - Math.pow( 2, - 10 * k );
  299. },
  300. InOut: function ( k ) {
  301. if ( k === 0 ) return 0;
  302. if ( k === 1 ) return 1;
  303. if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 1024, k - 1 );
  304. return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 );
  305. }
  306. },
  307. Circular: {
  308. In: function ( k ) {
  309. return 1 - Math.sqrt( 1 - k * k );
  310. },
  311. Out: function ( k ) {
  312. return Math.sqrt( 1 - ( --k * k ) );
  313. },
  314. InOut: function ( k ) {
  315. if ( ( k *= 2 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1);
  316. return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1);
  317. }
  318. },
  319. Elastic: {
  320. In: function ( k ) {
  321. var s, a = 0.1, p = 0.4;
  322. if ( k === 0 ) return 0;
  323. if ( k === 1 ) return 1;
  324. if ( !a || a < 1 ) { a = 1; s = p / 4; }
  325. else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
  326. return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
  327. },
  328. Out: function ( k ) {
  329. var s, a = 0.1, p = 0.4;
  330. if ( k === 0 ) return 0;
  331. if ( k === 1 ) return 1;
  332. if ( !a || a < 1 ) { a = 1; s = p / 4; }
  333. else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
  334. return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 );
  335. },
  336. InOut: function ( k ) {
  337. var s, a = 0.1, p = 0.4;
  338. if ( k === 0 ) return 0;
  339. if ( k === 1 ) return 1;
  340. if ( !a || a < 1 ) { a = 1; s = p / 4; }
  341. else s = p * Math.asin( 1 / a ) / ( 2 * Math.PI );
  342. if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) );
  343. return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1;
  344. }
  345. },
  346. Back: {
  347. In: function ( k ) {
  348. var s = 1.70158;
  349. return k * k * ( ( s + 1 ) * k - s );
  350. },
  351. Out: function ( k ) {
  352. var s = 1.70158;
  353. return --k * k * ( ( s + 1 ) * k + s ) + 1;
  354. },
  355. InOut: function ( k ) {
  356. var s = 1.70158 * 1.525;
  357. if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) );
  358. return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 );
  359. }
  360. },
  361. Bounce: {
  362. In: function ( k ) {
  363. return 1 - TWEEN.Easing.Bounce.Out( 1 - k );
  364. },
  365. Out: function ( k ) {
  366. if ( k < ( 1 / 2.75 ) ) {
  367. return 7.5625 * k * k;
  368. } else if ( k < ( 2 / 2.75 ) ) {
  369. return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
  370. } else if ( k < ( 2.5 / 2.75 ) ) {
  371. return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
  372. } else {
  373. return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
  374. }
  375. },
  376. InOut: function ( k ) {
  377. if ( k < 0.5 ) return TWEEN.Easing.Bounce.In( k * 2 ) * 0.5;
  378. return TWEEN.Easing.Bounce.Out( k * 2 - 1 ) * 0.5 + 0.5;
  379. }
  380. }
  381. };
  382. TWEEN.Interpolation = {
  383. Linear: function ( v, k ) {
  384. var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.Linear;
  385. if ( k < 0 ) return fn( v[ 0 ], v[ 1 ], f );
  386. if ( k > 1 ) return fn( v[ m ], v[ m - 1 ], m - f );
  387. return fn( v[ i ], v[ i + 1 > m ? m : i + 1 ], f - i );
  388. },
  389. Bezier: function ( v, k ) {
  390. var b = 0, n = v.length - 1, pw = Math.pow, bn = TWEEN.Interpolation.Utils.Bernstein, i;
  391. for ( i = 0; i <= n; i++ ) {
  392. b += pw( 1 - k, n - i ) * pw( k, i ) * v[ i ] * bn( n, i );
  393. }
  394. return b;
  395. },
  396. CatmullRom: function ( v, k ) {
  397. var m = v.length - 1, f = m * k, i = Math.floor( f ), fn = TWEEN.Interpolation.Utils.CatmullRom;
  398. if ( v[ 0 ] === v[ m ] ) {
  399. if ( k < 0 ) i = Math.floor( f = m * ( 1 + k ) );
  400. return fn( v[ ( i - 1 + m ) % m ], v[ i ], v[ ( i + 1 ) % m ], v[ ( i + 2 ) % m ], f - i );
  401. } else {
  402. if ( k < 0 ) return v[ 0 ] - ( fn( v[ 0 ], v[ 0 ], v[ 1 ], v[ 1 ], -f ) - v[ 0 ] );
  403. if ( k > 1 ) return v[ m ] - ( fn( v[ m ], v[ m ], v[ m - 1 ], v[ m - 1 ], f - m ) - v[ m ] );
  404. 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 );
  405. }
  406. },
  407. Utils: {
  408. Linear: function ( p0, p1, t ) {
  409. return ( p1 - p0 ) * t + p0;
  410. },
  411. Bernstein: function ( n , i ) {
  412. var fc = TWEEN.Interpolation.Utils.Factorial;
  413. return fc( n ) / fc( i ) / fc( n - i );
  414. },
  415. Factorial: ( function () {
  416. var a = [ 1 ];
  417. return function ( n ) {
  418. var s = 1, i;
  419. if ( a[ n ] ) return a[ n ];
  420. for ( i = n; i > 1; i-- ) s *= i;
  421. return a[ n ] = s;
  422. };
  423. } )(),
  424. CatmullRom: function ( p0, p1, p2, p3, t ) {
  425. var v0 = ( p2 - p0 ) * 0.5, v1 = ( p3 - p1 ) * 0.5, t2 = t * t, t3 = t * t2;
  426. return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;
  427. }
  428. }
  429. };