Javascript animate: Element.animate() — Web APIs | MDN

Leave a Comment / Разное / By /

Анимация — веб-API | MDN

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

Цель события Анимация
Анимация()

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

Анимация.currentTime

Текущее значение времени анимации в миллисекундах, независимо от того, запущена она или приостановлена. Если в анимации отсутствует временная шкала , она неактивна или еще не воспроизводилась, ее значение равно null .

Анимация.эффект

Получает и задает AnimationEffect , связанный с этой анимацией. Обычно это объект KeyframeEffect .

Анимация.
готово Только чтение

Возвращает текущее завершенное обещание для этой анимации.

Анимация.id

Получает и задает строку , используемую для идентификации анимации.

Анимация.ожидание Только чтение

Указывает, ожидает ли анимация в данный момент асинхронной операции, такой как запуск воспроизведения или приостановка запущенной анимации.

Animation.playState Только чтение

Возвращает числовое значение, описывающее состояние воспроизведения анимации.

Animation.playbackRate

Получает или задает скорость воспроизведения анимации.

Animation.ready Только чтение

Возвращает текущий готовый промис для этой анимации.

анимация.replaceState
Только чтение

Возвращает состояние замены анимации. Это будет активно , если анимация была заменена, или сохранено , если для нее была вызвана Animation.persist() .

Анимация.startTime

Получает или задает запланированное время начала воспроизведения анимации.

Анимация.временная шкала

Получает или устанавливает временная шкала , связанная с этой анимацией.

Animation.cancel()

Удаляет все ключевых кадраEffects , вызванные этой анимацией, и прерывает ее воспроизведение.

анимация.commitStyles()

Фиксирует конечное состояние стиля анимации для анимируемого элемента, даже после того, как эта анимация была удалена. Это приведет к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри

атрибут стиля .

Анимация.finish()

Ищет любой конец анимации, в зависимости от того, воспроизводится анимация или наоборот.

Анимация.пауза()

Приостанавливает воспроизведение анимации.

анимация.persist()

Явно сохраняет анимацию, хотя в противном случае она была бы удалена из-за поведения браузера «Автоматическое удаление анимации заливки».

Анимация.play()

Запускает или возобновляет воспроизведение анимации, либо снова запускает анимацию, если она ранее была завершена.

Анимация.обратная()

Реверсирует направление воспроизведения, останавливая его в начале анимации. Если анимация завершена или не воспроизведена, она будет воспроизводиться от конца к началу.

Анимация.updatePlaybackRate()

Устанавливает скорость анимации после первой синхронизации ее позиции воспроизведения.

отменить

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

отделка

Срабатывает по окончании воспроизведения анимации.

удалить

Срабатывает, когда анимация удалена (т. е. переведена в

активное состояние замены).

Можно запустить большое количество анимаций для одного и того же элемента. Если они неопределенные (т. е. заполняются вперед), это может привести к огромному списку анимаций, что может привести к утечке памяти. По этой причине современные браузеры реализовали часть спецификации веб-анимации, которая автоматически удаляет переопределяющие анимации прямого заполнения, если только разработчик явно не указал их сохранение.

Вы можете увидеть это в действии в нашей демонстрации простой замены неопределенной анимации. Связанные функции JavaScript:

  • animation.commitStyles() для фиксации конечного состояния стиля анимации для анимируемого элемента, даже после того, как эта анимация была удалена.
  • Событие remove в интерфейсе Animation
    срабатывает, когда анимация удаляется (т. е. переводится в состояние active replace).
  • animation.persist() , когда вы явно хотите сохранить анимацию.
  • animation.replaceState , чтобы вернуть состояние замены анимации. Это будет активно , если анимация была удалена, или сохранено , если было вызвано persist() .

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

Рассмотрите возможность предоставления механизма для приостановки или отключения анимации, а также использования медиа-запроса с уменьшенным движением для создания дополнительных возможностей для пользователей, которые выразили предпочтение отсутствию анимации.

  • Разработка более безопасной веб-анимации для чувствительности к движению · A List Apart Статья
  • Введение в медиа-запрос с уменьшенным движением | CSS-трюки
  • Адаптивный дизайн для движения | Вебкит
  • MDN Понимание WCAG, пояснения к Руководству 2.2
  • Понимание критерия успеха 2.2.2 | Понимание W3C WCAG 2.0
Спецификация
Веб-анимация
Включите JavaScript для просмотра данных.
  • API веб-анимации

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять участие? Узнайте

, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Добавьте движения в свои приложения с помощью одной строки кода

Быстрая демонстрация

AutoAnimate добавляет автоматические анимации в ваши приложения JavaScript с помощью одной строки кода. Вот тот же компонент списка с AutoAnimate и без него, примененный к элементу упаковки:

Native JavaScript 😐

  • Nuxt.js
  • Next.js
  • SvelteKit
  • Remix
  • Meteor

AutoAnimate 🤩

  • Nuxt.js
  • Next.js
  • SvelteKit
  • Remix
  • Meteor

Это заметное улучшение UX без дополнительных усилий разработчиков! 🎉

Важно отметить, что наш компонент списка не нужно было писать с учетом AutoAnimate. AutoAnimate можно применить задним числом к ​​любой разметке в вашей кодовой базе, включая сторонний код — просто укажите родительский узел DOM, а AutoAnimate сделает все остальное! 🤯

Установка

Установите с помощью выбранного менеджера пакетов, чтобы добавить @formkit/auto-animate в свой проект:

Ааааа, готово! Это было быстро. 🐇

Использование

AutoAnimate — это, по сути, единственная функция — autoAnimate — которая принимает родительский элемент. Автоматическая анимация будет применена к родительскому элементу и его непосредственным дочерним элементам. Анимации специально запускаются, когда происходит одно из трех событий:

  • Ребенок добавил в DOM.
  • Дочерний элемент удален из DOM.
  • Ребенок перемещен в DOM.

Давайте посмотрим, как это выглядит на практике. Сейчас мы воспользуемся функцией autoAnimate напрямую. Пользователи React и Vue — позже вы получите дополнительный синтаксический сахар, — а пока давайте изучим основы:

Нажмите, чтобы открыть!

Слишком просто! Мягкий, плавный переход без добавления каких-либо классов перехода или пользовательского CSS. Это заметное обновление для конечных пользователей, требующее минимальных усилий разработчика. Ознакомьтесь с примерами, чтобы увидеть другие варианты использования.

Советы по достижению успеха

  • Можно использовать и другие виды переходов. Например, если вы вносите стилистические изменения только с помощью CSS (например, эффект наведения), используйте стандартные переходы CSS для таких настроек стиля.
  • Анимации запускаются только при добавлении, удалении или перемещении непосредственных дочерних элементов родительского элемента (тот, который вы передали в autoAnimate ).
  • Родительский элемент автоматически получит позицию: относительная , если он позиционирован статически. Помните об этом при написании стилей.
  • Иногда макеты flexbox не сразу изменяют размер своих дочерних элементов. Дочерний элемент со свойством flex-grow: 1 ожидает окружающее содержимое перед привязкой к его полной ширине. AutoAnimate в этих случаях не работает, но если вы зададите элементу более явную ширину, он должен работать как шарм.

AutoAnimate учитывает настройку пользователя предпочитает уменьшение движения и автоматически отключается, если пользователь указал, что хочет уменьшить движение. Ознакомьтесь с [документами MDN для получения дополнительной информации](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) по этой мультимедийной функции.

Конфигурация

AutoAnimate предназначена для использования с нулевой конфигурацией . Мы считаем, что конфигурация по умолчанию соответствует цели проекта: цель AutoAnimate — существенно улучшить взаимодействие с пользователем, не влияя на время реализации или бюджет производительности разработчика. При этом доступны некоторые второстепенные параметры конфигурации. AutoAnimate позволяет передать второй аргумент в autoAnimate со следующими параметрами:

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

React hook

Пользователи React могут использовать хук useAutoAnimate , импортировав его из @formkit/auto-animate/react . Этот хук возвращает ссылку для применения к родительскому элементу, а также функцию для включения или отключения анимации.

Solid Primitive

Пользователи Solid могут использовать функцию createAutoAnimate , импортировав ее из @formkit/auto-animate/solid . Этот хук возвращает ссылку для применения к родительскому элементу, а также функцию для включения или отключения анимации.

  • Домашняя страница
  • Настройки
  • Выход

Директива Solid

Пользователи Solid также могут использовать директиву autoAnimate , импортировав ее из @formkit/auto-animate/solid .

Директива Vue

Пользователи Vue могут глобально зарегистрировать директиву v-auto-animate . Это делает добавление переходов и анимации таким же простым, как применение атрибута. Импортируйте плагин Vue из @formkit/auto-animate/vue и зарегистрируйте его в своем приложении Vue:

После регистрации плагина его можно применить в любом месте вашего приложения, добавив v-auto-animate. директива для родительского элемента:

Щелкните смайлики, чтобы удалить их.

  • 😏
  • 😐
  • 😑
  • 😒
  • 😕
  • 😖
  • 😗
  • 😘
  • 😙
  • 😚
  • 😛
  • 😜
  • 😟
  • 😠
  • 😦
  • 😨
  • 😬
  • 😭
  • 😮
  • 😰
  • 😴
  • 😵
  • 😶

УЧАСТВУЙТЕ, ЧТОБЫ ПОЛУЧИТЬ, чтобы быть уникальным.

Пользователи Vue могут передавать параметры, напрямую устанавливая значение директивы. , разработчики Vue могут использовать компоновку useAutoAnimate . Этот составной объект поддерживает все те же замечательные функции, но также предоставляет механизм для включения и отключения анимации.

Импорт компонуемого из @formkit/auto-animate/vue и вызовите его в настройках сценария , чтобы создать шаблон ref. Use the ref attribute on your parent element to store it in the template ref:

  • React
  • Solid
  • Vue
  • Svelte
  • Angular

Vue users can pass options directly to the composable:
useAutoAnimate ({ продолжительность: 100 })

Действие Svelte

Функция root autoAnimate может быть непосредственно использована как действие Svelte. Просто импортируйте autoAnimate и используйте его как директиву для родительского элемента.

Добавить жанр
  • Рок
  • Панк

Пользователи Svelte могут передавать параметры, напрямую устанавливая значение действия глобально зарегистрируйте директиву auto-animate . Это делает добавление переходов и анимации таким же простым, как применение атрибута. Импорт AutoAnimateModule из @formkit/auto-animate/angular и зарегистрируйте его в своем приложении Angular:

После того, как вы зарегистрировали плагин, его можно применить в любом месте вашего приложения, добавив директиву auto-animate к родительскому элементу:

Муравей и кузнечик

Мальчик, который кричал о волке

Пользователи Angular могут передавать параметры, напрямую устанавливая параметры ввода

    Отключить анимацию

    Иногда может потребоваться временно отключить анимацию, а затем снова включить ее. Функция autoAnimate возвращает контроллер анимации с методами enable() и disable() для этой цели, а хуки Vue и React ( useAutoAnimate ) возвращают кортеж со вторым значением, являющимся функцией включения/отключения. который принимает логическое значение для включения или отключения анимации.

    • красный
    • зеленый
    • синий

    Примеры

    Пример списка

    Добавление и удаление фруктов из списка. Обратите внимание, что фрукты размещаются в случайном порядке в списке, чтобы имитировать введение предметов, а не просто толкание и возврат в исходное положение.

    • 🍎 Яблоко
    • 🍌 Банан
    • 🍒 Вишня

    Пример карточек

    Имитирует отображение формы для добавления события в список карточек событий. Обратите внимание, что он помещает его в начало списка, и все карточки анимируются до места назначения, а родительский элемент (невидимый) плавно изменяет размер, чтобы приспособиться.

    • Обед для сотрудников

      31 марта

      Присоединяйтесь к нам на общем собрании.

    • Инженерная схватка

      10 апреля

      Команда инженеров играет в регби.

    Пример прямоугольников (оси x/y)

    Важной особенностью AutoAnimate является то, что он работает как с осями x, так и с y. Элементы, которые перемещаются в DOM из одного места в другое или переносятся в конце строки, будут автоматически переведены в соответствующую позицию.

    1

    2

    3

    4

    5

    6

    7

    8

    10

    11 0007

    12

    9000 2 9000 2

    9000 2

    9000 2

    9000 2

    9000 2

    9000 2

    9000 2

    9000 2

    9000 2 9000 2

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    Часто задаваемые вопросы Пример аккордеона

    Нам всем приходилось создавать аккордеоны раньше. На первый взгляд довольно легко, но добавление движения в последовательность открытия/закрытия может, мягко говоря, разочаровать, и если вы соберете все вместе, используя

    max-height переходов, вы обязательно потеряете плавность. Больше не надо!

    • Зачем ты его создал?

      Нам нужен был способ анимировать элементы DOM без добавления виртуальный DOM в Vue и React. И оказалось, что наше решение сработает. отлично подходит для многих других случаев использования.

    • Это с открытым исходным кодом?

    • Кто это сделал?

    Пример проверки FormKit

    Вам не обязательно использовать FormKit для использования AutoAnimate, но если вы являетесь пользователем FormKit, вы можете сделать несколько полезных вещей. Например, вы можете использовать AutoAnimate для анимации сообщений проверки, добавляемых и удаляемых из ввода:

    Имя пользователя

    Выберите новое имя пользователя.

    Пароль

    Выберите новый пароль.

    Подтвердите пароль

    Выберите новый пароль.

    Плагины

    Хотя AutoAnimate предназначен для использования с настройками по умолчанию без настройки, некоторым пользователям может потребоваться заменить ключевые кадры анимации по умолчанию на пользовательские. Для этого укажите функцию в качестве второго аргумента функции autoAnimate . Эта функция будет вызываться перед каждой анимацией и должна возвращать значение 9.0004 Эффект ключевого кадра .

    Здесь мы создадим новый набор ключевых кадров для действий add , remove и keep , которые выходят за пределы своих назначений для создания «прыгающего» анимационного эффекта.

    Мы можем использовать наши недавно определенные ключевые кадры в любом предыдущем примере, чтобы увидеть эффект, который это дает. Вот наш предыдущий пример списка с примененными к нему «прыгающими» ключевыми кадрами:

    Пример списка с «прыгающими» ключевыми кадрами

    • 🍎 Apple
    • 🍌 Банан
    • 🍒 Вишня

    Почему бы и нет.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *