component-tween/examples/array.html

Motion tween engine using 'ease'

<style>
	canvas {
		border: 1px solid #eee;
	}
</style>

<script src="../build/build.js"></script>

<canvas width=1000 height=500></canvas>

<script>
	var Tween = require('tween');
	var raf = require('component-raf');
	var canvas = document.querySelector('canvas');
	var ctx = canvas.getContext('2d');
	var h = 500;

  function random(n, f) {
		var arr = [];
		while (n--) arr.push(Math.random() * f);
		return arr;
	}

	var tween = Tween(random(1000, 50))
		.ease('out-bounce')
		.to(random(1000, 400))
		.duration(800);

	tween.update(function(a){
		canvas.width = canvas.width;
		ctx.fillStyle = '#0070ff';
		for (var i = 0; i < a.length; i++) {
		  ctx.fillRect(i, h - a[i], 1, a[i]);
		}
	});

	tween.on('end', function(){
		animate = function(){};
	});

	function animate() {
		raf(animate);
		tween.update();
	}

	animate();
</script>