animating a line being drawn on the screen with EaselJS and TweenJS

问题

Trying to find the best way (or any way) to animate a line being drawn. This is just a case study for how I would draw several lines etc to the screen creating an "intro" animation of a final image. At the moment the only thing I've figured I can do is create a rectangle shape with width and height of 1x1 and then tween the scaleX of that object, but the issue I have with that is the registration point, so the line moves as well as scales when I would only want the scale to grow its width leaving it at it's initial position. (Basically pinning the left side down) Is there no way to tween the width of a rectangle alone? This all feels a bit hacky, but I'm just experimenting for now. (this is only day 3 of my learning EaselJS :P) Optimally, I'd imagine there would be a way to animate the lineTo method of a graphics object but I've have no more luck doing that over this method. Here's what I've got so far:

<canvas id="canvas" width="500" height="500"></canvas>

var canvas = document.getElementById('canvas'),
stage = new createjs.Stage(canvas);

function init() {
    var line = new createjs.Shape();
    line.graphics.beginFill('#000').drawRect(10, 10, 1, 1);

    // setting registration point doesn't work
    line.regX = 0;

    // trying to set the x = 0 on each to() doesn't work
    // tween = createjs.Tween.get(line, {loop: false}).to({scaleX: 20, x: 0}, 2000).wait(1000).to({scaleX: 1, x: 0}, 2000);

    // is there no way to tween the width itself of the rectangle?? it actually makes sense that scaleX would produce such a result
    // but i can't seem to find any other way to animate a line being drawn
    tween = createjs.Tween.get(line, {loop: false}).to({scaleX: 20}, 2000).wait(1000).to({scaleX: 1}, 2000);
    stage.addChild(line);
    createjs.Ticker.addEventListener('tick', handleTick);
}

function handleTick() {
    stage.update(event);
}

init();

And here's a Fiddle to demonstrate: http://jsfiddle.net/vanPg/

Any thoughts on how to accomplish this? Tutorial links, API links/references, and general ranting welcome.

回答1:

After more research I've discovered I can do what I need much easier by using Raphael along with GSAP for tweening.

回答2:

In case, if you want to stick with CreateJS family.

Try this,

Countdown animation with EaselJs

Content from the SO link:

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

Hope this helps!

来源：https://stackoverflow.com/questions/20153480/animating-a-line-being-drawn-on-the-screen-with-easeljs-and-tweenjs

标签

javascript

easeljs

createjs