Please explain this TweenJS code

Am a newbie in CreateJS and i have use this example code but don't understand it that much coz there is no code by code exaplaination. The code is the one below:

createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 225 }, 100)
  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

Can someone explain it for me please.Step by step.

Best Regards.

Solution

Create a tween for the circle object. It will loop through instructions:

createjs.Tween.get(circle, { loop: true })

Tween calls are "chained", so by appending methods, it will run them in order. Technically, each method just returns a reference to the tween so you can call a bunch in order. The line breaks in the code make it more readable, but it is basically:

tween.to(values).to(values).to(values);

The first tween sets the x position of the circle to 400px in a 1000 millisecond animation. It has an ease on it that has a custom value. Check out the TweenJS Ease class for more.

.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))

After the first animation, it will then set the alpha and y values over 500ms, with a slightly different ease.

.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))

The rest should make sense.

.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

You can also chain other methods on Tween, such as call() to call a function, or set to change other properties on the tween target that are not being tweened.

Just for reference, this is the same as something more traditional like this:

var tween = createjs.Tween.get(circle, { loop: true });
tween.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4));
tween.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ alpha: 0, y: 225 }, 100);
tween.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

Cheers.