Анимация: метод 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