Очистите и перезапустите один интервал, пока работает другой - PullRequest
Новая
       20

Очистите и перезапустите один интервал, пока работает другой

0 голосов
/ 05 февраля 2019

Я пытаюсь сделать анимацию, где один снимок автомобиля показывается в течение 5 секунд, затем новое изображение показывается еще в течение пяти секунд, а последнее изображение, которое я хочу отобразить в течение 10 секунд, пока оно «съезжает» с холста,У меня готовы первые 10 секунд.И машина будет двигаться за последние 10, но когда я очищаю интервал, он продолжает двигаться, и анимация не перезапускается.

(sekunder = секунд) Вот мой код: 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var front = document.getElementById("front");
var back = document.getElementById("back");
var side = document.getElementById("side");
var height = canvas.offsetHeight;
var width = canvas.offsetWidth;
var mili = 0;
var sekunder = 0;

function draw(){

    if(sekunder == 0 || sekunder < 5){
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(front, 0, 0);
    }

    else if(sekunder == 5 || sekunder < 10){
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(back, 0, 0);
    }
    else if(sekunder == 10 || sekunder < 20){
        var car3 = setInterval(movecar, 10);

    }
    sekunder ++;

    if(sekunder == 20){
        sekunder = 0;
        clearInterval(car3);
        mili = 0;

    }
}
function movecar(){
    mili++;
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(side, -1*mili, 0);
}
draw();
setInterval(draw, 1000);
...