Как выполняется функция в JS?

Question

Хотел сделать движение пикчи по кривой и её возврат в начальную точку но анимация почему-то ломается. Вот код:

  function task4() {
    document.write("<img src=\"images/bg.jpg\" id=sin>")
    sin.onclick = function () {
        sin.style.position = 'absolute';
        stime = Date.now();
        timer = setInterval(function () {
            let ctime = Date.now() - stime;
            sin.style.left = ctime / 5 + 'px';
            sin.style.top = Math.pow((ctime), 1 / 1.4) + 'px';
            if (ctime > 1000) clearInterval(timer);
        }, 20)

        stime = Date.now();
        rtimer = setInterval(function () {
            let ctime = 1000 - (Date.now() - stime);
            sin.style.left = ctime / 5 + 'px';
            sin.style.top = Math.pow((ctime), 1 / 1.4) + 'px';
            if (ctime < 0) clearInterval(rtimer);
        }, 20)
    }
}

Если дело в кривой функции прошу помогите исправть.

Answer 1

Вторая часть анимации с возвратом выполнялась одновременно с первой. Поэтому вторую часть анимации поместил в блок if(ctime > 1000){}:

function task4() {

    let src = 'https://www.gravatar.com/avatar/35bf0665a75c3439070e28d27dca107b?s=64';
    document.body.insertAdjacentHTML('beforeEnd', `<img src='${src}' id='sin'>`);
    let sin = document.getElementById('sin');
    sin.style.position = 'absolute';
    sin.style.left = 0;
    sin.style.top = 0;
    
    sin.onclick = function () {
      stime = Date.now();
      timer = setInterval(function () {
         let ctime = Date.now() - stime;
         sin.style.left = ctime / 5 + 'px';
         sin.style.top = Math.pow((ctime), 1 / 1.5) + 'px';
           if (ctime > 1000){           
             clearInterval(timer);   // Поместил код возврата после окончания первой части анимации
             stime = Date.now();       
             rtimer = setInterval(function () {
               let ctime = 1000 - (Date.now() - stime);
               sin.style.left = ctime / 5 + 'px';
               sin.style.top = Math.pow((ctime), 1/1.5) + 'px';
               if (ctime < 0){
                 sin.style.left = 0;
                 sin.style.top = 0;
                 clearInterval(rtimer);
               } 
             }, 20);
           }
        }, 20)
     }
}

task4();

БЛОГ НА HUSL

Как выполняется функция в JS?

Ответы (1 шт):