├── .gitignore
├── History.md
├── Makefile
├── Readme.md
├── component.json
├── examples
    ├── array.html
    ├── ball.html
    ├── circle.html
    ├── dom.html
    ├── interactive.html
    └── rect.html
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | build
3 | 


--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 1.2.0 / 2015-03-16
 3 | ==================
 4 | 
 5 |   * update "emitter" to v1.2.0
 6 |   * use "component-clone" and "component-type" for browsers support (#5, @cristiandouce)
 7 |   * update component.json (#4, @pgherveou)
 8 |   * package: add browserify mappings (#7, @dfcreative)
 9 |   * package: add "repository" field (#3)
10 | 
11 | 1.1.0 / 2013-05-29
12 | ==================
13 | 
14 |   * add Tween#stop(). Closes #2
15 |   * fix final update to complete the tween. Closes #1
16 | 
17 | 1.0.0 / 2013-05-27
18 | ==================
19 | 
20 |   * pin deps
21 |   * add package.json
22 |   * add interactive example
23 | 
24 | 0.1.0 / 2012-11-10
25 | ==================
26 | 
27 |   * add array tweening support
28 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | 
 2 | build: components index.js
 3 | 	@component build --dev
 4 | 
 5 | components: component.json
 6 | 	@component install --dev
 7 | 
 8 | clean:
 9 | 	rm -fr build components template.js
10 | 
11 | tween.js:
12 | 	@component build --standalone tween \
13 | 		&& mv build/build.js $@ \
14 | 		&& rm -fr build
15 | 
16 | .PHONY: clean tween.js
17 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # tween
 3 | 
 4 |   Motion tween component using [ease](https://github.com/component/ease).
 5 | 
 6 | ## Installation
 7 | 
 8 |     $ component install component/tween
 9 | 
10 | ## Example
11 | 
12 | ```js
13 | var Tween = require('tween');
14 | var raf = require('raf');
15 | var button = document.querySelector('button');
16 | 
17 | var tween = Tween({ rotate: 0, opacity: 0 })
18 |   .ease('out-bounce')
19 |   .to({ rotate: 360, opacity: 1  })
20 |   .duration(800);
21 | 
22 | tween.update(function(o){
23 |   button.style.opacity = o.opacity;
24 |   button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
25 | });
26 | 
27 | tween.on('end', function(){
28 |   animate = function(){};
29 | });
30 | 
31 | function animate() {
32 |   raf(animate);
33 |   tween.update();
34 | }
35 | 
36 | animate();
37 | ```
38 | 
39 | ## API
40 | 
41 | ### Tween(obj:Object|Array)
42 | 
43 |   Initialize a new `Tween` with `obj`.
44 | 
45 | ### Tween#reset()
46 | 
47 |   Reset the tween.
48 | 
49 | ### Tween#to(obj:Object|Array)
50 | 
51 |   Tween to `obj` and reset internal state.
52 | 
53 |      tween.to({ x: 50, y: 100 })
54 | 
55 | ### Tween#duration(ms:Number)
56 | 
57 |   Set duration to `ms` [500].
58 | 
59 | ### Tween#ease(fn:String|Function)
60 | 
61 |   Set easing function to `fn`.
62 | 
63 |      tween.ease('in-out-sine')
64 | 
65 | ### Tween#update(fn:Function)
66 | 
67 |   Set update function to `fn` or
68 |   when no argument is given this performs
69 |   a "step".
70 | 
71 | ### Tween#stop()
72 | 
73 |   Immediately stop the tween and emit "stop" and end" events. `tween.stopped`
74 |   is then marked as `true`.
75 | 
76 | ## License
77 | 
78 |   MIT
79 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tween",
 3 |   "repo": "component/tween",
 4 |   "description": "Motion tween engine using 'ease'",
 5 |   "version": "1.2.0",
 6 |   "keywords": [
 7 |     "tween",
 8 |     "tweening",
 9 |     "animation"
10 |   ],
11 |   "dependencies": {
12 |     "component/clone": "0.2.2",
13 |     "component/ease": "1.0.0",
14 |     "component/emitter": "1.2.0",
15 |     "component/type": "1.1.0"
16 |   },
17 |   "development": {
18 |     "component/raf": "*",
19 |     "component/autoscale-canvas": "*"
20 |   },
21 |   "license": "MIT",
22 |   "scripts": [
23 |     "index.js"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/array.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 | 	canvas {
 4 | 		border: 1px solid #eee;
 5 | 	}
 6 | </style>
 7 | 
 8 | <script src="../build/build.js"></script>
 9 | 
10 | <canvas width=1000 height=500></canvas>
11 | 
12 | <script>
13 | 	var Tween = require('tween');
14 | 	var raf = require('component-raf');
15 | 	var canvas = document.querySelector('canvas');
16 | 	var ctx = canvas.getContext('2d');
17 | 	var h = 500;
18 | 
19 |   function random(n, f) {
20 | 		var arr = [];
21 | 		while (n--) arr.push(Math.random() * f);
22 | 		return arr;
23 | 	}
24 | 
25 | 	var tween = Tween(random(1000, 50))
26 | 		.ease('out-bounce')
27 | 		.to(random(1000, 400))
28 | 		.duration(800);
29 | 
30 | 	tween.update(function(a){
31 | 		canvas.width = canvas.width;
32 | 		ctx.fillStyle = '#0070ff';
33 | 		for (var i = 0; i < a.length; i++) {
34 | 		  ctx.fillRect(i, h - a[i], 1, a[i]);
35 | 		}
36 | 	});
37 | 
38 | 	tween.on('end', function(){
39 | 		animate = function(){};
40 | 	});
41 | 
42 | 	function animate() {
43 | 		raf(animate);
44 | 		tween.update();
45 | 	}
46 | 
47 | 	animate();
48 | </script>


--------------------------------------------------------------------------------
/examples/ball.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 |   canvas {
 4 |     border: 1px solid #eee;
 5 |   }
 6 | </style>
 7 | 
 8 | <script src="../build/build.js"></script>
 9 | 
10 | <canvas width=500 height=400></canvas>
11 | 
12 | <script>
13 |   var Tween = require('tween');
14 |   var raf = require('component-raf');
15 |   var canvas = document.querySelector('canvas');
16 |   var ctx = canvas.getContext('2d');
17 |   var w = canvas.width, h = canvas.height;
18 | 
19 |   var tween = Tween({ x: w/2, y: 20, r: 10, a: .5 })
20 |     .ease('out-bounce')
21 |     .to({ x: w/2, y: h-8, r: 10, a: .5 })
22 |     .duration(2000);
23 | 
24 |   tween.update(function(o){
25 |     canvas.width = canvas.width;
26 |     ctx.fillStyle = 'red';
27 |     ctx.globalAlpha = o.a;
28 |     ctx.arc(o.x | 0, o.y | 0, o.r, 0, Math.PI * 2, false);
29 |     ctx.fill();
30 |   });
31 | 
32 |   var n = 0;
33 |   tween.on('end', function(){
34 |     switch (n++) {
35 |       case 0:
36 |         tween
37 |           .to({ x: w/2, y: 20, r: 10, a: .5 })
38 |           .ease('out-sine')
39 |           .duration(500);
40 |         break;
41 |       case 1:
42 |         tween
43 |           .to({ x: w/2, y: h/2, r: 10, a: .5 })
44 |             .ease('in-out-back')
45 |             .duration(800);
46 |         break;
47 |       case 2:
48 |         tween
49 |           .to({ x: w/2, y: h/2, r: 80, a: 1 })
50 |           .ease('out-bounce')
51 |           .duration(1500);
52 |         break;
53 |       default:
54 |         animate = function(){};
55 |     }
56 |   });
57 | 
58 |   function animate() {
59 |     raf(animate);
60 |     tween.update();
61 |   }
62 | 
63 |   animate();
64 | </script>
65 | 


--------------------------------------------------------------------------------
/examples/circle.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 |   canvas {
 4 |     border: 1px solid #eee;
 5 |   }
 6 | </style>
 7 | 
 8 | <script src="../build/build.js"></script>
 9 | 
10 | <canvas width=500 height=400></canvas>
11 | 
12 | <button onclick='tween.stop()'>Stop</button>
13 | 
14 | <script>
15 |   var Tween = require('tween');
16 |   var raf = require('component-raf');
17 |   var canvas = document.querySelector('canvas');
18 |   var ctx = canvas.getContext('2d');
19 | 
20 |   var tween = Tween({ alpha: 0, border: 1, radius: 1 })
21 |     .ease('out-bounce')
22 |     .to({ alpha: 1, border: 15, radius: 150  })
23 |     .duration(1000);
24 | 
25 |   tween.update(function(o){
26 |     canvas.width = canvas.width;
27 |     ctx.strokeStyle = 'black';
28 |     ctx.globalAlpha = o.alpha;
29 |     ctx.lineWidth = o.border;
30 |     ctx.arc(canvas.width / 2, canvas.height / 2, o.radius, 0, Math.PI * 2, false);
31 |     ctx.stroke();
32 |     ctx.fill();
33 |   });
34 | 
35 |   tween.on('end', function(){
36 |     animate = function(){};
37 |   });
38 | 
39 |   function animate() {
40 |     raf(animate);
41 |     tween.update();
42 |   }
43 | 
44 |   animate();
45 | </script>
46 | 


--------------------------------------------------------------------------------
/examples/dom.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 |   body {
 4 |     padding: 50px;
 5 |   }
 6 | 
 7 |   button {
 8 |     padding: 15px 25px;
 9 |   }
10 | </style>
11 | 
12 | <button>Button</button>
13 | 
14 | <script src="../build/build.js"></script>
15 | 
16 | <script>
17 |   var Tween = require('tween');
18 |   var raf = require('component-raf');
19 |   var button = document.querySelector('button');
20 | 
21 |   var tween = Tween({ rotate: 0, opacity: 0 })
22 |     .ease('out-bounce')
23 |     .to({ rotate: 360, opacity: 1  })
24 |     .duration(800);
25 | 
26 |   tween.update(function(o){
27 |     button.style.opacity = o.opacity;
28 |     button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
29 |   });
30 | 
31 |   tween.on('end', function(){
32 |     animate = function(){};
33 |   });
34 | 
35 |   function animate() {
36 |     raf(animate);
37 |     tween.update();
38 |   }
39 | 
40 |   animate();
41 | </script>
42 | 


--------------------------------------------------------------------------------
/examples/interactive.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 |   canvas {
 4 |     border: 1px solid #eee;
 5 |   }
 6 | </style>
 7 | 
 8 | <script src="../build/build.js"></script>
 9 | 
10 | <canvas width=500 height=400></canvas>
11 | 
12 | <script>
13 |   var Tween = require('tween');
14 |   var raf = require('component-raf');
15 |   var canvas = document.querySelector('canvas');
16 |   var ctx = canvas.getContext('2d');
17 |   var w = canvas.width, h = canvas.height;
18 | 
19 |   function Ball(x, y) {
20 |     this.moveTo(x, y);
21 |     this.rad = 10;
22 |   }
23 | 
24 |   Ball.prototype.moveTo = function(x, y){
25 |     this.x = x;
26 |     this.y = y;
27 |   };
28 | 
29 |   Ball.prototype.draw = function(ctx){
30 |     ctx.save();
31 |     ctx.fillStyle = 'red';
32 |     ctx.arc(this.x | 0, this.y | 0, this.rad, 0, Math.PI * 2, false);
33 |     ctx.fill();
34 |     ctx.restore();
35 |   };
36 | 
37 |   var ball = new Ball(100, 100);
38 |   ball.draw(ctx);
39 | 
40 |   canvas.onclick = function(e){
41 |     console.log('move');
42 | 
43 |     var tween = Tween({ x: ball.x, y: ball.y })
44 |       .ease('out-bounce')
45 |       .to({ x: e.offsetX, y: e.offsetY })
46 |       .duration(1500);
47 | 
48 |     tween.update(function(o){
49 |       canvas.width = canvas.width;
50 |       ball.moveTo(o.x, o.y);
51 |       ball.draw(ctx);
52 |     });
53 | 
54 |     function animate() {
55 |       raf(animate);
56 |       tween.update();
57 |     }
58 | 
59 |     animate();
60 |   };
61 | 
62 | </script>


--------------------------------------------------------------------------------
/examples/rect.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 |   canvas {
 4 |     border: 1px solid #eee;
 5 |   }
 6 | </style>
 7 | 
 8 | <script src="../build/build.js"></script>
 9 | 
10 | <canvas width=500 height=400></canvas>
11 | 
12 | <script>
13 |   var Tween = require('tween');
14 |   var raf = require('component-raf');
15 |   var canvas = document.querySelector('canvas');
16 |   var ctx = canvas.getContext('2d');
17 | 
18 |   var tween = Tween({ w: 1, h: 1, border: 1, alpha: 0 })
19 |     .ease('out-circ')
20 |     .to({ border: 5, w: 150, h: 100, alpha: 1  })
21 |     .duration(800);
22 | 
23 |   tween.update(function(o){
24 |     canvas.width = canvas.width;
25 |     ctx.strokeStyle = 'black';
26 |     ctx.globalAlpha = o.alpha;
27 |     ctx.lineWidth = o.border;
28 |     ctx.rect(canvas.width / 2 - o.w / 2, canvas.height / 2 - o.h / 2, o.w, o.h);
29 |     ctx.stroke();
30 |     ctx.fill();
31 |   });
32 | 
33 |   tween.on('end', function(){
34 |     animate = function(){};
35 |   });
36 | 
37 |   function animate() {
38 |     raf(animate);
39 |     tween.update();
40 |   }
41 | 
42 |   animate();
43 | </script>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * Module dependencies.
  4 |  */
  5 | 
  6 | var Emitter = require('emitter');
  7 | var clone = require('clone');
  8 | var type = require('type');
  9 | var ease = require('ease');
 10 | 
 11 | /**
 12 |  * Expose `Tween`.
 13 |  */
 14 | 
 15 | module.exports = Tween;
 16 | 
 17 | /**
 18 |  * Initialize a new `Tween` with `obj`.
 19 |  *
 20 |  * @param {Object|Array} obj
 21 |  * @api public
 22 |  */
 23 | 
 24 | function Tween(obj) {
 25 |   if (!(this instanceof Tween)) return new Tween(obj);
 26 |   this._from = obj;
 27 |   this.ease('linear');
 28 |   this.duration(500);
 29 | }
 30 | 
 31 | /**
 32 |  * Mixin emitter.
 33 |  */
 34 | 
 35 | Emitter(Tween.prototype);
 36 | 
 37 | /**
 38 |  * Reset the tween.
 39 |  *
 40 |  * @api public
 41 |  */
 42 | 
 43 | Tween.prototype.reset = function(){
 44 |   this.isArray = 'array' === type(this._from);
 45 |   this._curr = clone(this._from);
 46 |   this._done = false;
 47 |   this._start = Date.now();
 48 |   return this;
 49 | };
 50 | 
 51 | /**
 52 |  * Tween to `obj` and reset internal state.
 53 |  *
 54 |  *    tween.to({ x: 50, y: 100 })
 55 |  *
 56 |  * @param {Object|Array} obj
 57 |  * @return {Tween} self
 58 |  * @api public
 59 |  */
 60 | 
 61 | Tween.prototype.to = function(obj){
 62 |   this.reset();
 63 |   this._to = obj;
 64 |   return this;
 65 | };
 66 | 
 67 | /**
 68 |  * Set duration to `ms` [500].
 69 |  *
 70 |  * @param {Number} ms
 71 |  * @return {Tween} self
 72 |  * @api public
 73 |  */
 74 | 
 75 | Tween.prototype.duration = function(ms){
 76 |   this._duration = ms;
 77 |   return this;
 78 | };
 79 | 
 80 | /**
 81 |  * Set easing function to `fn`.
 82 |  *
 83 |  *    tween.ease('in-out-sine')
 84 |  *
 85 |  * @param {String|Function} fn
 86 |  * @return {Tween}
 87 |  * @api public
 88 |  */
 89 | 
 90 | Tween.prototype.ease = function(fn){
 91 |   fn = 'function' == typeof fn ? fn : ease[fn];
 92 |   if (!fn) throw new TypeError('invalid easing function');
 93 |   this._ease = fn;
 94 |   return this;
 95 | };
 96 | 
 97 | /**
 98 |  * Stop the tween and immediately emit "stop" and "end".
 99 |  *
100 |  * @return {Tween}
101 |  * @api public
102 |  */
103 | 
104 | Tween.prototype.stop = function(){
105 |   this.stopped = true;
106 |   this._done = true;
107 |   this.emit('stop');
108 |   this.emit('end');
109 |   return this;
110 | };
111 | 
112 | /**
113 |  * Perform a step.
114 |  *
115 |  * @return {Tween} self
116 |  * @api private
117 |  */
118 | 
119 | Tween.prototype.step = function(){
120 |   if (this._done) return;
121 | 
122 |   // duration
123 |   var duration = this._duration;
124 |   var now = Date.now();
125 |   var delta = now - this._start;
126 |   var done = delta >= duration;
127 | 
128 |   // complete
129 |   if (done) {
130 |     this._from = this._to;
131 |     this._update(this._to);
132 |     this._done = true;
133 |     this.emit('end');
134 |     return this;
135 |   }
136 | 
137 |   // tween
138 |   var from = this._from;
139 |   var to = this._to;
140 |   var curr = this._curr;
141 |   var fn = this._ease;
142 |   var p = (now - this._start) / duration;
143 |   var n = fn(p);
144 | 
145 |   // array
146 |   if (this.isArray) {
147 |     for (var i = 0; i < from.length; ++i) {
148 |       curr[i] = from[i] + (to[i] - from[i]) * n;
149 |     }
150 | 
151 |     this._update(curr);
152 |     return this;
153 |   }
154 | 
155 |   // objech
156 |   for (var k in from) {
157 |     curr[k] = from[k] + (to[k] - from[k]) * n;
158 |   }
159 | 
160 |   this._update(curr);
161 |   return this;
162 | };
163 | 
164 | /**
165 |  * Set update function to `fn` or
166 |  * when no argument is given this performs
167 |  * a "step".
168 |  *
169 |  * @param {Function} fn
170 |  * @return {Tween} self
171 |  * @api public
172 |  */
173 | 
174 | Tween.prototype.update = function(fn){
175 |   if (0 == arguments.length) return this.step();
176 |   this._update = fn;
177 |   return this;
178 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "component-tween",
 3 |   "description": "Motion tween engine using 'ease'",
 4 |   "version": "1.2.0",
 5 |   "keywords": [
 6 |     "tween",
 7 |     "tweening",
 8 |     "animation"
 9 |   ],
10 |   "dependencies": {
11 |     "component-clone": "0.2.2",
12 |     "component-emitter": "1.2.0",
13 |     "component-type": "1.1.0",
14 |     "ease-component": "1.0.0"
15 |   },
16 |   "browser": {
17 |     "clone": "component-clone",
18 |     "emitter": "component-emitter",
19 |     "type": "component-type",
20 |     "ease": "ease-component"
21 |   },
22 |   "license": "MIT",
23 |   "component": {
24 |     "scripts": {
25 |       "tween/index.js": "index.js"
26 |     }
27 |   },
28 |   "repository": {
29 |     "type": "git",
30 |     "url": "https://github.com/component/tween.git"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------