tween dynamic array

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 rabbit1 = {
			    x: 50,
			    y: height - 50
			  };

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

			  var rabbits = {
			    x: [rabbit1.x, rabbit2.x],
			    y: [rabbit1.y, rabbit2.y]
			  };

			  new TWEEN.Tween(rabbit1).to({
			    x: width - 50,
			    y: height - 50
			  }, 3000).onUpdate(function(object) {
			    rabbits.x[0] = object.x;
			    rabbits.y[0] = object.y;
			    // draw background
			    context.fillStyle = "rgb(240,250,240)";
			    context.fillRect(0, 0, width, height);

			    // draw rabbit
			    context.fillStyle = "rgb(0,0,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.closePath();
			    context.fill();

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

			    context.restore();

			  }).start();


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

			  new TWEEN.Tween(rabbit2).to({
			    x: width - 50,
			    y: height - 50
			  }, 3000).onUpdate(function(object) {
			    rabbits.x[1] = object.x;
			    rabbits.y[1] = object.y;
			    // draw fox
			    context.fillStyle = "rgb(0,80,80)";

			    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);
			   ...