Анимация (requestAnimationFrame)

Анимацию рекомендуется делать через CSS. Но если это надо сделать через JavaScript, то для этого есть метод requestAnimationFrame().

function moveElement() {
    // код анимации
}

requestAnimationFrame(moveElement);

Код выше запустит функцию moveElement(), но он выполнит её один раз. Чтобы функция повторялась, её надо вызвать повторно внутри самой функции.

function moveElement() {
    // код анимации

    requestAnimationFrame(moveElement);
}

requestAnimationFrame(moveElement);

Функция анимации будет выполняться постоянно. Чтобы остановить анимацию, достаточно перестать выполнять метод requestAnimationFrame().

function moveElement() {
    // код анимации

    // Перестать вызывать анимацию, когда указанное значение достигнет 150
    if (positionLeft < 150) {
        requestAnimationFrame(moveElement);
    }
}

requestAnimationFrame(moveElement);

Пример на JSFiddle

Метод requestAnimationFrame() выполняет анимацию в 60 кадров в секунду.

Данный метод появился в HTML 5 и доступен во всех популярных браузерах (Internet Explorer поддерживает начиная с версии IE 10).

Отличия setInterval и requestAnimationFrame

В JavaScript также есть метод setInterval(), который задаёт интервал выполнения кода (например, раз в секунду). Но её не рекомендуется использовать в качестве анимации:

• Если пользователь переключил вкладку, то setInterval() продолжает выполняться. А при использовании requestAnimationFrame(), анимация останавливаетса, уменьшая использование ресурсов компьютера;
• Для каждой анимации запускается свой отдельный setInterval(), и много анимаций могут нагружать ресурсы компьютера. Все анимации в requestAnimationFrame() происходят в одном месте.