CODEWITHSUNDEEP
javascriptanimationpatheaseljsjstween
user1972450
user1972450

Reputation:

Countdown animation with EaselJs

I am trying to simulate a countdown animation using easeljs. I have got an example of what it should look like. http://jsfiddle.net/eguneys/AeK28/

But it looks like a hack, is there a proper/better/flexible way to do this?

To put it other way, how can i define a path, and draw that path with easeljs.

This looks ugly:

     createjs.Tween.get(bar, {override: true}).to({x: 400}, 1500, createjs.linear)
.call(function() {
    createjs.Tween.get(bar, {override: true}).to({y: 400}, 1500, createjs.linear)
 .call(function() {
    createjs.Tween.get(bar, {override: true}).to({ x: 10 }, 1500, createjs.linear)
  .call(function() {
    createjs.Tween.get(bar, {override: true}).to({ y: 10 }, 1500, createjs.linear);
        })
    });
});

Upvotes: 1

Views: 1280

Answers (1)

joelrobichaud
joelrobichaud

Reputation: 665

You can use the TweenJS MotionGuidePlugin to tween along a path instead of having multiple tweens.

createjs.MotionGuidePlugin.install();
createjs.Tween.get(bar).to({
    guide: {path: [10,10, 10,10,400,10, 400,10,400,400, 400,400,10,400, 10,400,10,10]}
}, 6000, createjs.linear);

The path array is basically the set of coordinates for a moveTo call followed by multiple curveTo calls. The coordinates will be interpolated along the path resulting from those calls.

A more modular way to to specify your path array would be to have a function generating it using a set of points you declared.

function getMotionPathFromPoints (points) {
    var i, motionPath;

    for (i = 0, motionPath = []; i < points.length; ++i) {
        if (i === 0) {
            motionPath.push(points[i].x, points[i].y);
        } else {
            motionPath.push(points[i - 1].x, points[i - 1].y, points[i].x, points[i].y);
        }
    }

    return motionPath;
}

var points = [
    new createjs.Point(10, 10),
    new createjs.Point(400, 10),
    new createjs.Point(400, 400),
    new createjs.Point(10, 400),
    new createjs.Point(10, 10)
];

createjs.MotionGuidePlugin.install();
createjs.Tween.get(bar).to({
    guide: {path: getMotionPathFromPoints(points)}
}, 6000, createjs.linear);

FIDDLE

Upvotes: 2

Related Questions