├── README.md
├── index.html
├── js
└── general.js
├── license.txt
├── style
├── reset.css
└── style.css
├── tween.js
└── tween.min.js
/README.md:
--------------------------------------------------------------------------------
1 | Simple Tween JS
2 | =================
3 |
4 | Simple Tween JS is a tiny microframework for easily integrating Tweens by dropping in a file. The performance is uber optimized and has a minimal impact on your application. Its originally designed for HTML Canvas JavaScript applications, but you can use it for just about anything JavaScript related.
5 |
6 | Live demo at http://ashblue.github.com/simple-tween-js/ (demo broken in IE9, but
7 | the library does work and has been tested in IE9)
8 |
9 | ##Setup
10 |
11 | 1. Download the minified or regular tween.js file and place it in your project files
12 | 2. Include the tween script at the bottom of your page, before your other JavaScript files
13 |
14 | ```
15 |
16 | ```
17 | 3. You can now create new tweens with syntax similar to the following.
18 |
19 | ```javascript
20 | var myTween = new Tween(startValue, distance, duration, animationType, loop);
21 | ```
22 |
23 | ##Browser Support
24 | Known to be stable in the following browsers. Could very well work in older versions
25 | such as IE8, haven't tested. Mainly because the demo is written in HTML5's Canvas.
26 |
27 | * Google Chrome - 22+
28 | * Safari - 6+
29 | * Firefox - 15+
30 | * Internet Exploror - 9+
31 | * Opera - 12+
32 |
33 | ##Usage Guide
34 | 1. Create a new Tween object
35 |
36 | ```javascript
37 | var myTween = new Tween(startValue, distance, duration, animationType, loop);
38 | ```
39 |
40 | 2. You can then get the tween's current value by calling getValue
41 |
42 | ```javascript
43 | myTween.getValue();
44 | ```
45 |
46 | 3. For more information please see the documentation built into https://github.com/ashblue/simple-tween-js/blob/master/tween.js
47 |
48 | ###Available Methods
49 | * Tween.getValue();
50 | * Tween.expired();
51 | * Tween.reset();
52 | * Tween.set(startValue, distance, duration, animationType, loop);
53 |
54 | ###Easing Options
55 | You can choose from many different easing options for animationType: 'linear', 'quadIn', 'quadOut', 'quadInOut', 'cubeIn', 'cubeOut', 'cubeInOut', 'quartIn', 'quartOut', 'quartInOut', 'quintIn', 'quintOut', 'quintInOut', 'sineIn', 'sineOut', 'sineInOut', 'expoIn', 'expoOut', 'expoInOut', 'circIn', 'circOut', 'circInOut'
56 |
57 | ###How to make your tweens process faster
58 | The library here uses Date.now() to get the current time. If your JavaScript application
59 | already has a cached value of the current time, you can substitute all references to Date.now()
60 | with it.
61 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Canvas Tweening Demo
6 |
11 | Download Google Chrome to view the demo
12 |
13 |
14 |
15 | X Start: X Distance: X Duration: Y Start: Y Distance: X Duration:
22 |
23 |
24 | Trail: Loop: Repeat:
28 |
29 |
54 |
55 |
80 |
81 | Run Animation
82 |
83 |
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/js/general.js:
--------------------------------------------------------------------------------
1 | /*
2 | Name: Canvas SAT Demo
3 | Version: 1.0
4 | Author: Ashton Blue
5 | Author URL: http://blueashes.com
6 | */
7 |
8 | // How to figure out what a user's computer can handle for frames with fallbacks
9 | // Original by Paul Irish: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
10 | window.requestAnimFrame = ( function() {
11 | return window.requestAnimationFrame ||
12 | window.webkitRequestAnimationFrame ||
13 | window.mozRequestAnimationFrame ||
14 | window.oRequestAnimationFrame ||
15 | window.msRequestAnimationFrame ||
16 | function (callback, element){
17 | return window.setTimeout(callback, 1000 / 60);
18 | };
19 | }());
20 |
21 | var game;
22 |
23 | (function (document) {
24 | // Grab dom elements
25 | var X_START = document.getElementById('x-start');
26 | var X_END = document.getElementById('x-end');
27 | var X_DURATION = document.getElementById('x-dur');
28 | var Y_START = document.getElementById('y-start');
29 | var Y_END = document.getElementById('y-end');
30 | var Y_DURATION = document.getElementById('y-dur');
31 | var X_BTNS = document.getElementsByClassName('btn-x');
32 | var Y_BTNS = document.getElementsByClassName('btn-y');
33 | var TRAIL = document.getElementById('trail');
34 | var RUN = document.getElementById('run-animation');
35 | var LOOP = document.getElementById('loop');
36 | var REPEAT = document.getElementById('repeat');
37 |
38 | var _xAnimation = 'linear';
39 | var _yAnimation = 'linear';
40 | var _trail = false;
41 | var _loop = false;
42 | var _repeat = false;
43 | var square;
44 |
45 | var _events = {
46 | setXAnimation: function (e) {
47 | e.preventDefault();
48 |
49 | for (var i = X_BTNS.length; i--;) {
50 | X_BTNS[i].classList.remove('active');
51 | }
52 | this.classList.add('active');
53 |
54 | _xAnimation = this.dataset.tween;
55 | },
56 |
57 | setYAnimation: function (e) {
58 | e.preventDefault();
59 |
60 | for (var i = Y_BTNS.length; i--;) {
61 | Y_BTNS[i].classList.remove('active');
62 | }
63 | this.classList.add('active');
64 |
65 | _yAnimation = this.dataset.tween;
66 | },
67 |
68 | runTween: function (e) {
69 | e.preventDefault();
70 |
71 | game.ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);
72 | square.tweenX = new Tween(parseInt(X_START.value, 10), parseInt(X_END.value, 10), parseInt(X_DURATION.value, 10), _xAnimation, _loop || _repeat);
73 | square.tweenY = new Tween(parseInt(Y_START.value, 10), parseInt(Y_END.value, 10), parseInt(Y_DURATION.value, 10), _yAnimation, _loop || _repeat);
74 | },
75 |
76 | clickCanvas: function (e) {
77 | // Force set distance relative to start
78 | X_END.value = e.pageX - this.offsetLeft - parseInt(X_START.value, 10);
79 | Y_END.value = e.pageY - this.offsetTop - parseInt(Y_START.value, 10);
80 |
81 | // Force click run
82 | RUN.click();
83 | },
84 |
85 | toggleTrail: function (e) {
86 | _trail = !_trail;
87 | },
88 |
89 | toggleLoop: function () {
90 | _loop = _loop ? false : 'loop';
91 | },
92 |
93 | toggleRepeat: function () {
94 | _repeat = _repeat ? false : 'repeat';
95 | }
96 | };
97 |
98 | game = {
99 | canvas: document.getElementById('canvas'),
100 |
101 | setup: function() {
102 | if (this.canvas.getContext) {
103 | this.bind();
104 |
105 | // Setup variables
106 | this.ctx = this.canvas.getContext('2d');
107 |
108 | // Run the game
109 | this.init();
110 | this.animate();
111 | }
112 | },
113 |
114 | bind: function () {
115 | // Animations
116 | for (var i = X_BTNS.length; i--;) {
117 | X_BTNS[i].addEventListener('click', _events.setXAnimation);
118 | }
119 |
120 | for (i = Y_BTNS.length; i--;) {
121 | Y_BTNS[i].addEventListener('click', _events.setYAnimation);
122 | }
123 |
124 | // Checkboxes
125 | TRAIL.addEventListener('click', _events.toggleTrail);
126 | LOOP.addEventListener('click', _events.toggleLoop);
127 | REPEAT.addEventListener('click', _events.toggleRepeat);
128 |
129 | this.canvas.addEventListener('click', _events.clickCanvas);
130 |
131 | RUN.addEventListener('click', _events.runTween);
132 | },
133 |
134 | init: function() {
135 | square.init();
136 | },
137 |
138 | animate: function() {
139 | if (!_trail) {
140 | game.ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);
141 | }
142 |
143 | // Create delta
144 | game.time = Date.now();
145 | game.delta = game.time - (game.timeNow || game.time);
146 |
147 | game.draw();
148 | game.play = window.requestAnimFrame(game.animate);
149 |
150 | // Remember delta location
151 | game.timeNow = game.time;
152 | },
153 |
154 | draw: function() {
155 | // Draw objects
156 | square.update();
157 | square.draw();
158 | }
159 | };
160 |
161 | var square = {
162 | x: 0,
163 | y: 0,
164 | width: 30,
165 | height: 30,
166 | distance: 300,
167 | duration: 1000,
168 |
169 | init: function () {
170 | this.tweenX = new Tween(this.x, this.distance, this.duration, 'linear');
171 | this.tweenY = new Tween(this.y, this.distance, this.duration, 'linear');
172 | },
173 |
174 | update: function () {
175 | this.x = this.tweenX.getValue();
176 | this.y = this.tweenY.getValue();
177 | },
178 |
179 | draw: function () {
180 | game.ctx.fillRect(this.x, this.y, this.width, this.height);
181 | }
182 | };
183 |
184 | window.onload = function () {
185 | game.setup();
186 | };
187 | }(document));
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2012 Ash Blue (blueashes.com)
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/style/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0b1 | 201101
3 | NOTE: WORK IN PROGRESS
4 | USE WITH CAUTION AND TEST WITH ABANDON */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, figcaption, figure,
16 | footer, header, hgroup, menu, nav, section, summary,
17 | time, mark, audio, video {
18 | margin: 0;
19 | padding: 0;
20 | border: 0;
21 | outline: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 |
46 | /* remember to define visible focus styles!
47 | :focus {
48 | outline: ?????;
49 | } */
50 |
51 | /* remember to highlight inserts somehow! */
52 | ins {
53 | text-decoration: none;
54 | }
55 | del {
56 | text-decoration: line-through;
57 | }
58 |
59 | table {
60 | border-collapse: collapse;
61 | border-spacing: 0;
62 | }
--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
1 | .break {
2 | margin-bottom: 15px;
3 | }
4 |
5 | input {
6 | width: 40px;
7 | margin-right: 10px;
8 | }
9 |
10 | a {
11 | margin-right: 5px;
12 | }
13 |
14 | .active {
15 | background: #ff0;
16 | }
--------------------------------------------------------------------------------
/tween.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Desc.
3 | * @author Ash Blue
4 | * @link http://blueashes.com
5 | * @todo Include instructions to replace Date.now() with your game loop's time
6 | * time to make things more accurate
7 | * @todo Can the tween methods not be prototypes so they're static?
8 | */
9 | (function (window) {
10 | /**
11 | * Supports easing for the following commands you can demo at
12 | * http://ashblue.github.com/canvas-tween-demo/ 'linear', 'quadIn', 'quadOut',
13 | * 'quadInOut', 'cubeIn', 'cubeOut', 'cubeInOut', 'quartIn', 'quartOut', 'quartInOut',
14 | * 'quintIn', 'quintOut', 'quintInOut', 'sineIn', 'sineOut', 'sineInOut', 'expoIn',
15 | * 'expoOut', 'expoInOut', 'circIn', 'circOut', 'circInOut'. Adopted from
16 | * http://gizma.com/easing/
17 | * @link http://ashblue.github.com/canvas-tween-demo/
18 | */
19 | var _easingLibrary = {
20 | /**
21 | * @param {number} t Current time in millseconds
22 | * @param {number} b Start value
23 | * @param {number} c Distance traveled relative to the start value
24 | * @param {number} d Duration in milliseconds
25 | */
26 | linear: function (t, b, c, d) {
27 | return c * t / d + b;
28 | },
29 |
30 | quadIn: function (t, b, c, d) {
31 | t /= d;
32 | return c * t * t + b;
33 | },
34 |
35 | quadOut: function (t, b, c, d) {
36 | t /= d;
37 | return -c * t * (t - 2) + b;
38 | },
39 |
40 | quadInOut: function (t, b, c, d) {
41 | t /= d / 2;
42 | if (t < 1) {
43 | return c / 2 * t * t + b;
44 | }
45 | t--;
46 | return -c / 2 * (t * (t - 2) - 1) + b;
47 | },
48 |
49 | cubeIn: function (t, b, c, d) {
50 | t /= d;
51 | return c*t*t*t + b;
52 | },
53 |
54 | cubeOut: function (t, b, c, d) {
55 | t /= d;
56 | t--;
57 | return c*(t*t*t + 1) + b;
58 | },
59 |
60 | cubeInOut: function (t, b, c, d) {
61 | t /= d/2;
62 | if (t < 1) {
63 | return c / 2 * t * t * t + b;
64 | }
65 | t -= 2;
66 | return c/2*(t*t*t + 2) + b;
67 | },
68 |
69 | quartIn: function (t, b, c, d) {
70 | t /= d;
71 | return c * t * t * t * t + b;
72 | },
73 |
74 | quartOut: function (t, b, c, d) {
75 | t /= d;
76 | t--;
77 | return -c * (t * t * t * t - 1) + b;
78 | },
79 |
80 | quartInOut: function (t, b, c, d) {
81 | t /= d/2;
82 | if (t < 1) {
83 | return c / 2 * t * t * t * t + b;
84 | }
85 | t -= 2;
86 | return -c / 2 * (t * t * t * t - 2) + b;
87 | },
88 |
89 | quintIn: function (t, b, c, d) {
90 | t /= d;
91 | return c * t * t * t * t * t + b;
92 | },
93 |
94 | quintOut: function (t, b, c, d) {
95 | t /= d;
96 | t--;
97 | return c * (t * t * t * t * t + 1) + b;
98 | },
99 |
100 | quintInOut: function (t, b, c, d) {
101 | t /= d / 2;
102 | if (t < 1) {
103 | return c / 2 * t * t * t * t * t + b;
104 | }
105 | t -= 2;
106 | return c / 2 * (t * t * t * t * t + 2) + b;
107 | },
108 |
109 | sineIn: function (t, b, c, d) {
110 | return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
111 | },
112 |
113 | sineOut: function (t, b, c, d) {
114 | return c * Math.sin(t / d * (Math.PI / 2)) + b;
115 | },
116 |
117 | sineInOut: function (t, b, c, d) {
118 | return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
119 | },
120 |
121 | expoIn: function (t, b, c, d) {
122 | return c * Math.pow(2, 10 * (t / d - 1)) + b;
123 | },
124 |
125 | expoOut: function (t, b, c, d) {
126 | return c * (-Math.pow(2, -10 * t/d) + 1) + b;
127 | },
128 |
129 | expoInOut: function (t, b, c, d) {
130 | t /= d / 2;
131 | if (t < 1) {
132 | return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
133 | }
134 | t--;
135 | return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
136 | },
137 |
138 | circIn: function (t, b, c, d) {
139 | t /= d;
140 | return -c * (Math.sqrt(1 - t * t) - 1) + b;
141 | },
142 |
143 | circOut: function (t, b, c, d) {
144 | t /= d;
145 | t--;
146 | return c * Math.sqrt(1 - t * t) + b;
147 | },
148 |
149 | circInOut: function (t, b, c, d) {
150 | t /= d / 2;
151 | if (t < 1) {
152 | return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
153 | }
154 | t -= 2;
155 | return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
156 | }
157 | };
158 |
159 | var _private = {
160 | /**
161 | * Rounds the passed number to two decimal places. Prevents large float
162 | * numbers from being multiplied
163 | * @param {number} num Number you want to round
164 | * @returns {number} Rounded number
165 | */
166 | round: function (num) {
167 | return Math.round(num * 100) / 100;
168 | }
169 | };
170 |
171 | /**
172 | * Constructor for the tween
173 | * @param {number} startValue What value does the tween start at
174 | * @param {number} distance How far does the tween's value advance from the startValue?
175 | * @param {number} duration Amount of time in milliseconds the tween runs for
176 | * @param {string} animationType What easing function should be used from the easing library?
177 | * See _easingLibrary for a list of potential easing equations.
178 | * @param {string} loop Can be left blank, set to loop, or repeat. Loop repeats repeats the animation
179 | * in reverse every time. Repeat will run the original tween from the beginning
180 | * @returns {self}
181 | */
182 | window.Tween = function (startValue, distance, duration, animationType, loop) {
183 | this.startTime = Date.now();
184 | this.startValue = startValue;
185 | this.distance = distance;
186 | this.duration = duration;
187 | this.animationType = animationType;
188 | this.loop = loop;
189 |
190 | return this;
191 | };
192 |
193 | /**
194 | * Get the current value of the tween
195 | * @returns {number} Current value of the tween
196 | */
197 | window.Tween.prototype.getValue = function () {
198 | // Run normally
199 | if (!this.expired()) {
200 | var total = _easingLibrary[this.animationType](Date.now() - this.startTime, this.startValue, this.distance, this.duration);
201 |
202 | // Ended and no repeat is present
203 | } else if (!this.loop) {
204 | var total = this.startValue + this.distance;
205 |
206 | // Calculate time passed and restart repeat
207 | } else if (this.loop === 'repeat') {
208 | this.startTime = Date.now();
209 | var total = _easingLibrary[this.animationType](Date.now() - this.startTime, this.startValue, this.distance, this.duration);
210 |
211 | // Run a looped repeat in reverse
212 | } else {
213 | this.startValue = this.startValue + this.distance;
214 | this.distance = -this.distance;
215 | this.startTime = Date.now();
216 | var total = _easingLibrary[this.animationType](Date.now() - this.startTime, this.startValue, this.distance, this.duration);
217 | }
218 |
219 | return _private.round(total);
220 | };
221 |
222 | /**
223 | * Retrieves the start time relative to the time passed from the previous start time
224 | * @returns {number} Start time of the tween relative to time passed
225 | */
226 | window.Tween.prototype.getStartTime = function () {
227 | return Date.now() - this.startTime - this.duration + Date.now();
228 | };
229 |
230 | /**
231 | * Has the tween expired yet?
232 | * @returns {boolean} True if the tween has expired
233 | */
234 | window.Tween.prototype.expired = function () {
235 | return this.startTime + this.duration < Date.now();
236 | };
237 |
238 | /**
239 | * Set the tween's properties for the beginning value, distance, duration, and animation type
240 | * @param {number} startValue What value does the tween start at
241 | * @param {number} distance How far does the tween's value advance from the startValue?
242 | * @param {number} duration Amount of time in milliseconds the tween runs for
243 | * @param {string} animationType What easing function should be used from the easing library?
244 | * @param {string} loop Can be left blank, set to loop, or repeat. Loop repeats repeats the animation
245 | * in reverse every time. Repeat will run the original tween from the beginning
246 | * @returns {self}
247 | */
248 | window.Tween.prototype.set = function (startValue, distance, duration, animationType, loop) {
249 | this.startValue = typeof startValue === 'number' ? startValue : this.startValue;
250 | this.distance = typeof distance === 'number' ? distance : this.distance;
251 | this.duration = typeof duration === 'number' ? duration : this.duration;
252 | this.animationType = animationType || this.animationType;
253 | this.loop = loop || this.loop;
254 |
255 | return this;
256 | };
257 |
258 | /**
259 | * Resets the tween and runs it relative to the current time
260 | * @returns {self}
261 | */
262 | window.Tween.prototype.reset = function () {
263 | this.startTime = Date.now();
264 |
265 | return this;
266 | };
267 | }(window));
--------------------------------------------------------------------------------
/tween.min.js:
--------------------------------------------------------------------------------
1 | (function(e){var t={linear:function(e,t,n,r){return n*e/r+t},quadIn:function(e,t,n,r){return e/=r,n*e*e+t},quadOut:function(e,t,n,r){return e/=r,-n*e*(e-2)+t},quadInOut:function(e,t,n,r){return e/=r/2,e<1?n/2*e*e+t:(e--,-n/2*(e*(e-2)-1)+t)},cubeIn:function(e,t,n,r){return e/=r,n*e*e*e+t},cubeOut:function(e,t,n,r){return e/=r,e--,n*(e*e*e+1)+t},cubeInOut:function(e,t,n,r){return e/=r/2,e<1?n/2*e*e*e+t:(e-=2,n/2*(e*e*e+2)+t)},quartIn:function(e,t,n,r){return e/=r,n*e*e*e*e+t},quartOut:function(e,t,n,r){return e/=r,e--,-n*(e*e*e*e-1)+t},quartInOut:function(e,t,n,r){return e/=r/2,e<1?n/2*e*e*e*e+t:(e-=2,-n/2*(e*e*e*e-2)+t)},quintIn:function(e,t,n,r){return e/=r,n*e*e*e*e*e+t},quintOut:function(e,t,n,r){return e/=r,e--,n*(e*e*e*e*e+1)+t},quintInOut:function(e,t,n,r){return e/=r/2,e<1?n/2*e*e*e*e*e+t:(e-=2,n/2*(e*e*e*e*e+2)+t)},sineIn:function(e,t,n,r){return-n*Math.cos(e/r*(Math.PI/2))+n+t},sineOut:function(e,t,n,r){return n*Math.sin(e/r*(Math.PI/2))+t},sineInOut:function(e,t,n,r){return-n/2*(Math.cos(Math.PI*e/r)-1)+t},expoIn:function(e,t,n,r){return n*Math.pow(2,10*(e/r-1))+t},expoOut:function(e,t,n,r){return n*(-Math.pow(2,-10*e/r)+1)+t},expoInOut:function(e,t,n,r){return e/=r/2,e<1?n/2*Math.pow(2,10*(e-1))+t:(e--,n/2*(-Math.pow(2,-10*e)+2)+t)},circIn:function(e,t,n,r){return e/=r,-n*(Math.sqrt(1-e*e)-1)+t},circOut:function(e,t,n,r){return e/=r,e--,n*Math.sqrt(1-e*e)+t},circInOut:function(e,t,n,r){return e/=r/2,e<1?-n/2*(Math.sqrt(1-e*e)-1)+t:(e-=2,n/2*(Math.sqrt(1-e*e)+1)+t)}},n={round:function(e){return Math.round(e*100)/100}};e.Tween=function(e,t,n,r,i){return this.startTime=Date.now(),this.startValue=e,this.distance=t,this.duration=n,this.animationType=r,this.loop=i,this},e.Tween.prototype.getValue=function(){if(!this.expired())var e=t[this.animationType](Date.now()-this.startTime,this.startValue,this.distance,this.duration);else if(!this.loop)var e=this.startValue+this.distance;else if(this.loop==="repeat"){this.startTime=Date.now();var e=t[this.animationType](Date.now()-this.startTime,this.startValue,this.distance,this.duration)}else{this.startValue=this.startValue+this.distance,this.distance=-this.distance,this.startTime=Date.now();var e=t[this.animationType](Date.now()-this.startTime,this.startValue,this.distance,this.duration)}return n.round(e)},e.Tween.prototype.getStartTime=function(){return Date.now()-this.startTime-this.duration+Date.now()},e.Tween.prototype.expired=function(){return this.startTime+this.duration