Меньше чем javascript для этой анимации цикла?

Question

Я проделал эту простую анимацию, но у меня есть чувство, что я написал много строк кода для такой простой задачи. Есть ли способ достичь такого же результата, но с меньшим количеством кода?

https://jsfiddle.net/qw82Lwy0/1/

function myMove() { 
    var elem = document.getElementById("animate"); 
    var pos = 0; 
    var id = setInterval(frame, 5); 
    var flag = true; 

    function frame() { 
    if (flag) { 
     pos++; 
     elem.style.top = pos + 'px'; 
     elem.style.left = pos + 'px'; 
     if (pos == 350) { 
     flag = false; 
     } 
    } else if (!flag) { 
     pos--; 
     elem.style.top = pos + 'px'; 
     elem.style.left = pos + 'px'; 
     if (pos == 0) { 
     flag = true; 
     } 
    } 
    } 
} 

P.S: Нет JQuery или CSS-анимация, просто JavaScript.

Answer 1

вместо использования флага и отдельного кода для двух условий вы можете просто перевернуть инкремент следующим образом:

function myMove() { 
    var elem = document.getElementById("animate"); 
    var pos = 0; 
    var id = setInterval(frame, 5); 
    var changeVal = 1; 

    function frame() { 
     pos+=changeVal; 
     if ((pos >= 350) || (pos <= 0)) changeVal *= -1; 
     elem.style.top = elem.style.left = pos + 'px'; 
    } 
} 

Answer 2

Ну, вы могли бы сократить вашу frame() функцию следующим образом:

function myMove() { 
    var elem = document.getElementById("animate"); 
    var pos = 0; 
    var id = setInterval(frame, 5); 
    var flag = true; 

    function frame() { 
    if (flag) { 
     pos++; 
     if (pos == 350) { 
     flag = false; 
     } 
    } else { // since you are checking if flag is true, the only other answer is false 
     pos--; 
     if (pos == 0) { 
     flag = true; 
     } 
    } 
    elem.style.top = pos + 'px'; // since this occurs in both cases 
    elem.style.left = pos + 'px'; // you can do it afterward 
    } 
} 

Answer 3

использовать функцию с 3 paraneters: posAdd, flagValue и posValue

function frame(posAdd,flagValue,posValue) { 
    if (flagValue) { 
     pos=pos+posAdd; 
     elem.style.top = pos + 'px'; 
     elem.style.left = pos + 'px'; 
     if (pos == posValue) { 
     flag = !flagValue; 
    } 
    } 
} 

И называют его дважды: кадр (1, true, 350) И рамка (-1, false, 0)

Answer 4

Анимация теперь может быть выполнена в современных браузерах с использованием CSS. Например, анимацию javascript можно свести к нескольким строкам с помощью перехода CSS.

См. MDN для получения более подробной информации и примеров transitions и animations.

Выполните фрагмент кода ниже, чтобы попробовать

window.ball.addEventListener('transitionend', toggle); 
 

 
function toggle() { 
 
    window.ball.classList.toggle('move'); 
 
}

.animation { 
 
    position: relative; 
 
    background-color: lightyellow; 
 
    border: 1px solid gray; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
#ball { 
 
    transition-property: left top background-color; 
 
    transition-duration: 2s; 
 
    position: absolute; 
 
    background-color: red; 
 
    border-radius: 12px; 
 
    height: 25px; 
 
    width: 25px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
#ball.move { 
 
    background-color: blue; 
 
    left: 175px; 
 
    top: 175px; 
 
}

<button onclick="toggle()">Start</button> 
 
<div class="animation"><div id="ball"></div></div>