tween.js 12 KB

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