Question

尝试找到动画正在绘制的线条的最佳方式（或任何方式）。这只是一个案例研究，我将如何绘制几行等到屏幕创建最终图像的“介绍”动画。目前，我唯一可以做的就是创建一个宽度和高度为1x1的矩形形状，然后补间该对象的scaleX，但我遇到的问题是注册点，所以该线移动为当我只想让刻度增加它的宽度而将它留在它的初始位置时，以及刻度。（基本上将左侧固定）是否无法单独补间矩形的宽度？这一切都让人觉得有点笨拙，但我现在只是在试验。（这只是我学习EaselJS的第3天：P）最理想的是，我想有一种方法可以为图形对象的lineTo方法设置动画，但我对此方法没有更多的运气。这是我到目前为止所得到的：

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

这是一个小提琴演示：http://jsfiddle.net/vanPg/

有关如何实现这一目标的任何想法？教程链接，API链接/参考和一般的ranting欢迎。

Answer 1

经过更多研究后，我发现通过使用Raphael和GSAP进行补间，我可以更轻松地完成所需操作。

Answer 2

如果您想坚持使用CreateJS系列。

试试这个，

Countdown animation with EaselJs

来自SO链接的内容：

您可以使用TweenJS MotionGuidePlugin沿路径补间，而不是使用多个补间。

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

路径数组基本上是moveTo调用后跟多个curveTo调用的坐标集。坐标将沿着这些调用产生的路径进行插值。

指定路径数组的更加模块化的方法是使用一组函数生成它，使用您声明的一组点。

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

希望这有帮助！

使用EaselJS和TweenJS动画在屏幕上绘制的线条

2 个答案: