Spec-Zone.ru › Web APIs

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

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

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

  • Узнать больше
  • Показать полную совместимость
  • Отправить отзыв

Метод play() интерфейса API анимации веб-страниц' Animation запускает или возобновляет воспроизведение анимации. Если анимация завершена, вызов play() перезапускает анимацию, воспроизводя её с начала.

Синтаксис

play()

Параметры

Нет.

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

Нет (undefined).

Примеры

В примере Игра «Растущая/уменьшающаяся Алиса», нажатие на торт вызывает воспроизведение вперёд анимации роста Алисы (aliceChange), делая её больше, а также запускает анимацию торта. Две Animation.play() анимации, одна EventListener:

// The cake has its own animation:
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,
    },
  );

// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();

// This function will play when ever a user clicks or taps
const growAlice = () => {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

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

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

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

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
play 75 79 48 62 13.1 75 48 54 13.4 11.0 75

См. также

  • API анимации веб-страниц
  • Animation для других методов и свойств, которые можно использовать для управления анимацией веб-страницы.
  • Animation.pause() для приостановки анимации.
  • 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/play

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API