Анимация: метод finish()

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2020 года.

Метод finish() интерфейса API анимаций веб-страниц' Animation устанавливает текущее время воспроизведения в конец анимации, соответствующей текущему направлению воспроизведения.

То есть, если анимация воспроизводится вперёд, она устанавливает время воспроизведения в длину последовательности анимации, а если анимация воспроизводится в обратном направлении (после вызова метода reverse()), она устанавливает время воспроизведения в 0.

Синтаксис

finish()

Параметры

Нет.

Возвращаемое значение

None (undefined).

Исключения

InvalidState: Скорость воспроизведения плеера равна 0, или скорость воспроизведения анимации больше 0, а конечное время анимации равно бесконечности.

Примеры

Следующий пример демонстрирует использование метода finish() и перехват ошибки InvalidState.

interfaceElement.addEventListener("mousedown", () => {
  try {
    player.finish();
  } catch (e) {
    if (e instanceof InvalidState) {
      console.log("finish() called on paused or finished animation.");
    } else {
      logMyErrors(e); //pass exception object to error handler
    }
  }
});

Следующий пример завершает все анимации на одном элементе независимо от направления их воспроизведения.

elem.getAnimations().forEach((animation) => animation.finish());

Спецификации

Спецификация
Web Animations # dom-animation-finish

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`finish`	75	79	48	62	13.1	75	48	54	13.4	11.0	75

См. также

API анимаций веб-страниц
Animation для получения других методов и свойств, которые можно использовать для управления анимацией веб-страницы.
Animation.play() для воспроизведения анимации вперёд.
Animation.reverse() для воспроизведения анимации назад.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Animation/finish