Анимация (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);
Метод requestAnimationFrame()
выполняет анимацию в 60 кадров в секунду.
Данный метод появился в HTML 5 и доступен во всех популярных браузерах (Internet Explorer поддерживает начиная с версии IE 10).
Отличия setInterval и requestAnimationFrame
В JavaScript также есть метод setInterval()
, который задаёт интервал выполнения кода (например, раз в секунду). Но её не рекомендуется использовать в качестве анимации:
- Если пользователь переключил вкладку, то
setInterval()
продолжает выполняться. А при использованииrequestAnimationFrame()
, анимация останавливаетса, уменьшая использование ресурсов компьютера; - Для каждой анимации запускается свой отдельный
setInterval()
, и много анимаций могут нагружать ресурсы компьютера. Все анимации вrequestAnimationFrame()
происходят в одном месте.
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта