Jquery 设置线绘制动画时tweenjs的性能问题

我正在使用eaeljs和tweenjs来设置多条线的动画，这些线通过一个点从一个位置绘制到一个位置，使其成为一条曲线，并将一个img连接到线的前面。我使用的是tween插件MotionGuidePlugin。这应该发生在init（）函数内部。没有鼠标事件或基于用户的事件触发此操作

我的问题是我的画布在一段时间后变得很慢。线条变得更加“象素化”，动画跳过了很多帧-创建一条直线而不是曲线。我在堆栈溢出上研究了这个问题，发现这是因为每一帧都会绘制一个新的图形。解决方案似乎是清除图形或缓存它，但我不知道如何用我当前的代码实现这一点：

createjs.MotionGuidePlugin.install();

var shape = new createjs.Shape();
var bar = { x: arrowStartPosX, y: arrowStartPosY, oldx: arrowStartPosX, oldy: arrowStartPosY };
stage.addChild(shape);

var image = new createjs.Bitmap("arrow.png");
image.alpha = 0;
stage.addChild(image);

createjs.Ticker.addEventListener("tick", tick);

run();

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

function run() {
    var posXStart = arrowStartPosX + 200;
    var points = [
        new createjs.Point(arrowStartPosX, arrowStartPosY),
        new createjs.Point(posXStart, middlePosY),
        new createjs.Point(arrowStartPosX, arrowEndPosY)
    ];

    createjs.Tween.get(bar).wait(timeCount-400).to({
        guide: {path: getMotionPathFromPoints(points)}
    }, 1900);

    createjs.Tween.get(image).to({rotation: -70}, 0)
    .wait(timeCount-400).to({alpha: 1}, 0)
    .to({rotation: -290, 
    guide:{ path:[startImgPosX, startImgPosY, middleImgPosX, middleImgPosY, endImgPosX, endImgPosY], 
    orient: "auto"}},1900);
}

function tick() {
    shape.graphics
    .setStrokeStyle(2, 'round', 'round')
    .beginStroke("#000000")
    .curveTo(bar.oldx, bar.oldy, bar.x, bar.y)
    .endStroke();

    bar.oldx = bar.x;
    bar.oldy = bar.y;
}

createjs.MotionGuidePlugin.install（）；
var shape=new createjs.shape（）；
var bar={x:arrowStartPosX，y:arrowStartPosY，oldx:arrowStartPosX，oldy:arrowStartPosY}；
阶段。添加儿童（形状）；
var image=new createjs.Bitmap（“arrow.png”）；
image.alpha=0；
stage.addChild（图像）；
createjs.Ticker.addEventListener（“勾号”，勾号）；
run（）；
函数getMotionPathFromPoints（点）{
控制台日志（点）；
变量i，运动路径；
控制台.日志（点.长度）；
对于（i=0，motionPath=[]；i

这些线应该画出来，完成后，它们应该保持在原位。有人能给我解释一下如何修复我的代码，使画布再次正常运行吗

更新：

---

我现在已经为我的问题创建了一个解决方案。如果你在一段时间内什么都不做，你会看到JSFIDLE网页变慢了，就像我自己的网页一样。

向量可能非常昂贵，你的演示显示你正在添加大量的小行。每次更新阶段时，必须重新绘制图形。 如果没有缓存，您将无法长时间实现此效果，尤其是在低功耗设备上

根据最终目标，可以缓存形状，然后在创建新内容时绘制

// Cache up front
var shape = new createjs.Shape();
shape.cache(0,0,100,1000);

// Clear the graphics before drawing new content
shape.graphics.clear()
    .setStrokeStyle(3, 'round', 'round')
    .beginStroke("#aaa")
    .curveTo(bar.oldx, bar.oldy, bar.x, bar.y)
    .endStroke();

// Update the cache with "source-over" to just add the new content.
    shape.updateCache("source-over");
    stage.update();

下面是一个fiddle更新：

这一方针永远不会放缓

---

干杯。

你能把这个当作提琴或类似的东西贴出来吗？当然可以，这里：。如果你有一段时间什么都不做，你会看到JSFIDLE网页变得非常慢，我的webpageThanks也是如此！我在我的代码中尝试了这一点，但它仍然慢了下来。这可能是因为有很多其他特定于画布的代码。添加stage.update（）会使页面速度大幅降低……如果没有完整的代码，应用程序是否会降低速度？如果这种方法没有效果，那么它要么是由其他原因造成的，要么是您的实现不正确。您是否有其他

stage.update（）

调用？试着把这些减少到尽可能少的数量。通常我会设置一个tick事件监听器来更新stage。如果你想有条件地更新它，你可以只设置一个布尔标志，在需要的时候切换需要阶段更新的操作。因此，我通过在tick事件中添加一个If语句使其更快，这样当动画完成时图形就会停止。这样做，并从代码中删除所有stage.update（），使其速度更快。但在某个时刻，当画出足够多的线时，它会慢慢变慢。我不知道我是不是有什么内存泄漏之类的。不，如果我完全删除这个代码，我的代码不会变慢，所以一定是线条画和/或动画的问题。如果你看到它随着时间的推移在图形上变慢，这通常表明指令在堆积。我提到的缓存方法应该可以工作。如果关闭cache/updateCache调用，它将显示新的线段，这表示每个记号所绘制的内容：