Javascript 如何在前一个动画结束后启动动画？

我有一个动画功能，可以同时播放所有动画。这不是我想要的，我想在前一个动画结束后播放每个动画。我该怎么做

canvas = document.getElementById("test");
ctx = canvas.getContext("2d");

function animateLines(name, x1, y1, x2, y2, stroke, width, duration){
    var count = 0;
    var ms = 10;
    duration = duration * ms;
    var counter;

    function countNumbers(){
        ctx.beginPath();
        ctx.moveTo(x1, y1);

        count += 1;
        if(x2 > x1){
            ctx.lineTo((x1 + count), y2);
        }

        else if(y2 > y1){
            ctx.lineTo(x1, (y1 + count));
        }

        if((x1 < x2) && (count == x2)){
            clearInterval(counter);
        }

        else if((y1 < y2) && (count == y2)){
            clearInterval(counter);
        }
        ctx.lineWidth = width;
        ctx.strokeStyle = stroke;
        ctx.stroke();
    }

    $("#pause").on("click", function(){
        clearInterval(counter);
    })

    $("#play").on("click", function(){
        counter = setInterval(countNumbers, duration);
    })
}

animateLines("Line", 0, 100, 100, 100, "white", 5, 3);
animateLines("Line2", 150, 250, 350, 250, "red", 5, 2);
animateLines("Line3", 100, 0, 100, 300, "blue", 5, 1);

canvas=document.getElementById（“测试”）； ctx=canvas.getContext（“2d”）； 函数动画线（名称、x1、y1、x2、y2、笔划、宽度、持续时间）{ var计数=0； var-ms=10； 持续时间=持续时间*毫秒； var计数器； 函数countNumbers（）{ ctx.beginPath（）； ctx.moveTo（x1，y1）； 计数+=1； 如果（x2>x1）{ ctx.lineTo（（x1+计数），y2）； } 如果（y2>y1），则为else{ ctx.lineTo（x1，（y1+计数））； } 如果（（x1

---

所以基本上，我想点击play，让

Line

的动画开始。当它结束时，让

Line2

开始，当它结束时，让

Line3

开始。

此代码必须适用于您。很抱歉，我没有保留你的代码风格，我在一个对象下编写了所有代码，但我希望你理解那里发生了什么

canvas = document.getElementById("test");
ctx = canvas.getContext("2d");
var anim={
    currentStep:0,
    steps:[
        {name:"Line", x1:0, y1:100, x2:100, y2:100, stroke:"yellow", width:5, duration:3},
        {name:"Line2", x1:150, y1:250, x2:350, y2:250, stroke:"red", width:5, duration:2},
        {name:"Line3", x1:100, y1:0, x2:100, y2:300, stroke:"blue", width:5, duration:1}
        ],
    count:0,
    ms:10,
    counter:0,
    draw: function(){
        var cur=anim.steps[anim.currentStep];
        ctx.beginPath(); ctx.moveTo(cur.x1, cur.y1);
        anim.count += 1;
        if(cur.x2 > cur.x1){ctx.lineTo((cur.x1 + anim.count), cur.y2);}
        else if(cur.y2 > cur.y1){ctx.lineTo(cur.x1, (cur.y1 + anim.count));}
        if((cur.x1 < cur.x2) && (anim.count == cur.x2)){anim.changeStep();}
        else if((cur.y1 < cur.y2) && (anim.count == cur.y2)){anim.changeStep();}
        ctx.lineWidth = cur.width;
        ctx.strokeStyle = cur.stroke;
        ctx.stroke();
        },
    changeStep: function(){
        anim.currentStep++;
        anim.count=0;
        if(anim.currentStep==anim.steps.length){clearInterval(anim.counter); console.log('stopped');}
        }
    };
$("#pause").on("click", function(){clearInterval(anim.counter);});
$("#play").on("click", function(){anim.counter=setInterval(anim.draw, anim.steps[anim.currentStep].duration*anim.ms);});

canvas=document.getElementById（“测试”）； ctx=canvas.getContext（“2d”）； 动物变种={ 当前步骤：0， 步骤：[ {名称：“线条”，x1:0，y1:100，x2:100，y2:100，笔划：“黄色”，宽度：5，持续时间：3}， {名称：“Line2”，x1:150，y1:250，x2:350，y2:250，笔划：“红色”，宽度：5，持续时间：2}， {名称：“Line3”，x1:100，y1:0，x2:100，y2:300，笔划：“蓝色”，宽度：5，持续时间：1} ], 计数：0， ms:10， 柜台:0,， 绘图：函数（）{ var cur=动画步骤[动画当前步骤]； ctx.beginPath（）；ctx.moveTo（cur.x1，cur.y1）； anim.count+=1； 如果（cur.x2>cur.x1）{ctx.lineTo（（cur.x1+anim.count），cur.y2）；} else如果（cur.y2>cur.y1）{ctx.lineTo（cur.x1，（cur.y1+anim.count））；} 如果（（cur.x1使用本机——这些在完成时有回调，这使它们很容易链接。但是jquery动画不会在画布上动画，是吗？它们对DOM不是很明确吗？除了@dave建议的，您还可以尝试在jqueryI中使用

.done

。很抱歉，我错过了您正在制作

画布的动画。在这种情况下，我可能会使用或@dave，真棒，我会去看看。谢谢。所以基本上，它只是增加了绘图函数的步骤数？是的，它在每个步骤结束后增加currentStep，函数draw（）只是在currentStep中设置的绘图步骤。您可以根据需要添加任意多的步骤。有一件事——持续时间只适用于第一步。如果希望每个步骤的持续时间都有效，则需要清除interval并在changeStep（）函数中增加currentStep后再次设置它。