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

试图找到最佳方式（或任何方式）为正在绘制的线设置动画。这只是一个案例研究，我将如何在屏幕上画几条线等，创建最终图像的“简介”动画。目前，我唯一能做的就是创建一个宽度和高度为1x1的矩形，然后在该对象的scaleX之间创建，但我遇到的问题是注册点，因此当我只希望缩放的宽度增加时，线条会移动，并缩放，使其保持在初始位置。（基本上是将左侧向下固定）是否没有办法仅在矩形的宽度之间？这一切都让人感觉有点不舒服，但我现在只是在试验。（这只是我学习EaselJS:P的第3天）最理想的情况是，我想象有一种方法可以为图形对象的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();

var canvas=document.getElementById（'canvas'），
stage=newcreatejs.stage（画布）；
函数init（）{
var line=new createjs.Shape（）；
line.graphics.beginll（'#000'）.drawRect（10,10,1,1）；
//设置注册点不起作用
line.regX=0；
//尝试将每个to（）上的x=0设置为无效
//tween=createjs.tween.get（行，{loop:false}）.to（{scaleX:20，x:0}，2000）.wait（1000）.to（{scaleX:1，x:0}，2000）；
//没有办法区分矩形本身的宽度吗？scaleX会产生这样的结果，这是有道理的
//但我似乎找不到任何其他方法来制作正在绘制的线的动画
tween=createjs.tween.get（行，{loop:false}）.to（{scaleX:20}，2000）.wait（1000）.to（{scaleX:1}，2000）；
stage.addChild（行）；
createjs.Ticker.addEventListener（'tick'，handleTick）；
}
函数handleTick（）{
阶段。更新（事件）；
}
init（）；

这里有一把小提琴来演示：

---

你有没有想过如何做到这一点？教程链接、API链接/参考和一般欢迎使用。

经过更多研究，我发现我可以通过使用for tweening来更轻松地完成我需要的任务。

如果你想坚持使用CreateJS系列

试试这个

SO链接的内容：

您可以使用“沿一条路径连接到两个连接点”，而不是使用多个连接点

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

函数getMotionPathFromPoints（点）{
变量i，运动路径；
对于（i=0，motionPath=[]；i

---

希望这有帮助

检查此链接：。你的问题似乎有关联。是的，我看到了这一点，这也是我进入社区的部分原因。经过更多的研究，我发现我可以通过使用Raphael（）和GSAP for tweening（）更轻松地完成我需要的工作。虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面更改，只有链接的答案可能会变得无效。我刚刚从原始SO帖子复制了该链接内容。谢谢@SuperBiasedMan