Анимация

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

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

Интерфейс Animation API веб-анимаций представляет собой единый проигрыватель анимации и предоставляет средства управления воспроизведением и временную шкалу для узла или источника анимации.

Конструктор

Animation(): Создаёт новый экземпляр объекта Animation.

Свойства экземпляра

Animation.currentTime: Текущее значение времени анимации в миллисекундах, независимо от того, запущена она или приостановлена. Если анимация не имеет timeline, неактивна или ещё не воспроизводилась, её значение равно null.
Animation.effect: Получает и устанавливает AnimationEffect, связанный с этой анимацией. Обычно это объект KeyframeEffect.
Animation.finished Только для чтения: Возвращает текущую Promise для завершения этой анимации.
Animation.id: Получает и устанавливает String для идентификации анимации.
Animation.overallProgress Только для чтения Экспериментально: Возвращает число от 0 до 1, обозначающее общий прогресс анимации к состоянию завершения.
Animation.pending Только для чтения: Указывает, ожидает ли анимация в данный момент асинхронной операции, например, начала воспроизведения или паузы во время воспроизведения.
Animation.playState Только для чтения: Возвращает перечисление, описывающее состояние воспроизведения анимации.
Animation.playbackRate: Получает или устанавливает скорость воспроизведения анимации.
Animation.ready Только для чтения: Возвращает текущую готовую Promise для этой анимации.
Animation.replaceState Только для чтения: Указывает, активна ли анимация, была ли она автоматически удалена после замены другой анимацией или была явно сохранена с помощью вызова Animation.persist().
Animation.startTime: Получает или устанавливает запланированное время начала воспроизведения анимации.
Animation.timeline: Получает или устанавливает timeline, связанную с этой анимацией.

Методы экземпляра

Animation.cancel(): Очищает все keyframeEffects, вызванные этой анимацией, и прерывает её воспроизведение.
Animation.commitStyles(): Применяет текущее состояние стилей анимации к анимируемому элементу, даже после удаления этой анимации. Это приводит к записи текущего состояния стилей в анимируемый элемент в виде свойств внутри атрибута style.
Animation.finish(): Переходит к одному из концов анимации в зависимости от того, воспроизводится ли анимация или обращается.
Animation.pause(): Приостанавливает воспроизведение анимации.
Animation.persist(): Явно сохраняет анимацию, предотвращая её автоматическое удаление при замене её другой анимацией.
Animation.play(): Запускает или возобновляет воспроизведение анимации или повторно запускает анимацию, если она ранее завершилась.
Animation.reverse(): Изменяет направление воспроизведения на обратное, останавливаясь в начале анимации. Если анимация завершена или не воспроизводилась, она будет воспроизводиться с конца в начало.
Animation.updatePlaybackRate(): Устанавливает скорость анимации после первоначальной синхронизации её позиции воспроизведения.

События

cancel: Срабатывает при вызове метода Animation.cancel() или при переходе анимации в состояние "idle" воспроизведения из другого состояния.
finish: Срабатывает при завершении воспроизведения анимации.
remove: Срабатывает при автоматическом удалении анимации браузером.

Соображения по доступности

Мигающая и вспыхивающая анимация может быть проблематичной для людей с когнитивными проблемами, такими как синдром дефицита внимания и гиперактивности (СДВГ). Кроме того, некоторые виды движений могут быть триггером для вестибулярных расстройств, эпилепсии, мигрени и светобоязни.

Рассмотрите возможность предоставления механизма для приостановки или отключения анимации, а также использование запроса на уменьшение движения (или эквивалентного клиентского подсказки агента пользователя Sec-CH-Prefers-Reduced-Motion), чтобы создать дополняющий опыт для пользователей, которые выразили предпочтение без анимации.

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

Спецификация
Веб-анимации # the-animation-interface

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android

`Animation`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`Animation`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`cancel`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`cancel_event`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`commitStyles`	84	84	75	70	13.1	84	79	60	13.4	14.0	84
`currentTime`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`effect`	75	79	63	62	13.1	75	63	54	13.4	11.0	75
`finish`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`finish_event`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`finished`	84	84	63	70	13.1	84	63	60	13.4	14.0	84
`id`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`overallProgress`	133	133	Нет	Нет	Нет	133	Нет	Нет	Нет	Нет	133
`pause`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`pending`	76	79	59 До версии 59, статус ожидания отображался значением `"pending"` возвращаемым из `Animation.playState`.	63	13.1	76	59 До версии 59, статус ожидания отображался значением `"pending"` возвращаемым из `Animation.playState`.	54	13.4	12.0	76
`persist`	84	84	75	70	13.1	84	79	60	13.4	14.0	84
`play`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`playState`	75 До Chrome 50/Opera 37, это свойство возвращало `idle` для анимации, которая ещё не началась. Начиная с Chrome 50/Opera 37, оно показывает `paused`.	79	48 До Firefox 59, это свойство возвращало `pending` для анимаций с незавершенными асинхронными операциями, но начиная с Firefox 59 это обозначается отдельным свойством `Animation.pending`. Это отражает недавние изменения в спецификации.	62 До Chrome 50/Opera 37, это свойство возвращало `idle` для анимации, которая ещё не началась. Начиная с Chrome 50/Opera 37, оно показывает `paused`.	13.1	75 До Chrome Android 50/Opera 37, это свойство возвращало `idle` для анимации, которая ещё не началась. Начиная с Chrome Android 50/Opera 37, оно показывает `paused`.	48 До Firefox для Android 59, это свойство возвращало `pending` для анимаций с незавершенными асинхронными операциями, но начиная с Firefox для Android 59 это обозначается отдельным свойством `Animation.pending`. Это отражает недавние изменения в спецификации.	54 До Chrome 50/Opera 37, это свойство возвращало `idle` для анимации, которая ещё не началась. Начиная с Chrome 50/Opera 37, оно показывает `paused`.	13.4	11.0 До Samsung Internet 5.0/Opera 37, это свойство возвращало `idle` для анимации, которая ещё не началась. Начиная с Samsung Internet 5.0/Opera 37, оно показывает `paused`.	75 До WebView Android 50/Opera 37, это свойство возвращало `idle` для анимации, которая ещё не началась. Начиная с WebView Android 50/Opera 37, оно показывает `paused`.
`playbackRate`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`ready`	84	84	63	70	13.1	84	63	60	13.4	14.0	84
`remove_event`	84	84	75	70	13.1	84	79	60	13.4	14.0	84

`remove_filling_animation`	84	84	75	70	13.1	84	79	60	13.4	14.0	84
`replaceState`	84	84	75	70	13.1	84	79	60	13.4	14.0	84
`reverse`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`startTime`	75	79	48	62	13.1	75	48	54	13.4	11.0	75
`timeline`	84	84	75 В настоящее время поддерживается только метод получения	70	13.1 В настоящее время поддерживается только метод получения	84	79 В настоящее время поддерживается только метод получения	60	13.4 В настоящее время поддерживается только метод получения	14.0	84
`updatePlaybackRate`	76	79	60	63	13.1	76	60	54	13.4	12.0	76

См. также

API анимации веб-страниц

© 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