tween dynamic simple

A comparison between Tweenjs, Createjs.Tweenjs and GreenSock TweenLite

by Lukasz Guminski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.4.0/Tween.min.js"></script>

<div id="target"></div>

CSS

html,
body {
  margin: 0px;
  cursor: pointer;
}

#target {
  font-size: 13px;
  padding: 0px 32px;
}

JavaScript

init();
			animate();

			function init() {

			  var width = 480;
			  var height = 320;

			  var target = document.getElementById('target');

			  var canvas = document.createElement('canvas');
			  canvas.width = width;
			  canvas.height = height;
			  target.appendChild(canvas);

			  var context = canvas.getContext('2d');


			  var rabbit = {
			    x: width - 50,
			    y: 50
			  };



			  new TWEEN.Tween(rabbit).to({
			    x: width - 50,
			    y: height - 50
			  }, 3000).onUpdate(function(object) {

			    // draw background
			    context.fillStyle = "rgb(240,250,240)";
			    context.fillRect(0, 0, width, height);

			    // draw rabbit
			    context.fillStyle = "rgb(150,150,150)";

			    context.save();
			    context.translate(object.x, object.y);

			    context.beginPath();
			    context.moveTo(0, 0);
			    context.bezierCurveTo(15, 0, 15, -40, 5, -30);
			    context.lineTo(0, 0);
			    context.bezierCurveTo(-15, 0, -15, -40, -5, -30);
			    context.lineTo(0, 0);
			    context.fill();

			    context.beginPath();
			    context.arc(0, 0, 15, 0, Math.PI * 2, true);
			    context.fill();

			    context.restore();

			  }).start();


			  var fox = {
			    x: 50,
			    y: 50
			  };

			  new TWEEN.Tween(fox).to(rabbit, 3000).onUpdate(function(object) {

			    // draw fox
			    context.fillStyle = "rgb(200,80,80)";

			    context.save();
			    context.translate(object.x, object.y - 13);
			    context.scale(1.2, 1.2);

			    context.beginPath();
			    context.moveTo(4, 24);
			    context.lineTo(8, 16);
			    context.lineTo(14, 10);
			    context.lineTo(15, 0);
			    context.lineTo(9, -10);
			    context.lineTo(2, 0);
			    context.lineTo(-2, 0);
			    context.lineTo(-9, -10);
			    context.lineTo(-15, 0);
			    context.lineTo(-14, 10);
			    context.lineTo(-8, 16);
			    context.lineTo(-4, 24);
			    context.closePath();
			    context.fill();

			    context.restore();

			  }).start();

			}

			function...