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

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

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

Метод pause() интерфейса API веб-анимаций's Animation приостанавливает воспроизведение анимации.

Синтаксис

animation.pause();

Параметры

Нет.

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

Нет.

Исключения

InvalidStateError DOMException: Выбрасывается, если время анимации currentTime равно unresolved (возможно, анимация ещё не начала воспроизводиться), а конечное время анимации равно положительной бесконечности.

Пример

Animation.pause() часто используется в игре «Растущая/Уменьшающаяся Алиса» в API веб-анимаций Growing/Shrinking Alice Game, в основном потому, что анимации, созданные с помощью метода Element.animate(), немедленно начинаются, и их нужно вручную приостановить, если вы хотите этого избежать:

// animation of the cupcake slowly getting eaten up
const nommingCake = document
  .getElementById("eat-me_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();

Кроме того, при сбросе:

// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);

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

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

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

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

См. также

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

© 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/pause