Анимация — веб-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
Спецификация
Веб-анимация
# the-animation-interface

загрузка только таблиц браузера BCD. Включите JavaScript для просмотра данных.

  • API веб-анимации

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

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

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

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

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

10+ лучших библиотек анимации JavaScript для использования в 2023 году

Если вы хотите привлечь внимание посетителя вашего сайта, что может быть лучше анимации? Используя множество движков приложений, свободно доступных в Интернете, вы можете легко заставить элементы вашего веб-сайта исчезать, подпрыгивать или свистеть. В сегодняшнем посте мы увидим как библиотеки анимации JavaScript могут помочь со всем этим.

Сначала немного об анимациях JavaScript

Одно дело — добавить простую анимацию, для которой требуется всего одно действие (например, переключение). Для этого всегда можно использовать простую анимацию CSS. Но для более сложных или продвинутых эффектов лучше использовать JavaScript. Само собой разумеется, что использование JavaScript для создания анимации сложнее, чем использование CSS.

Тем не менее, JavaScript может обрабатывать то, что не может CSS. Это дает разработчикам гораздо больше возможностей для управления сложными анимациями, которые должны координировать несколько движущихся частей.

Анимации JavaScript реализуются путем постепенного изменения стиля элемента. Вы можете добавить их в строку кода или включить в другие объекты. При рендеринге эти изменения вызываются таймером. Кроме того, вы можете контролировать непрерывность анимации, регулируя временной интервал изменений.

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

1. Anime.js

Давайте начнем этот список библиотек анимации JavaScript с Anime.js. Эта легкая библиотека анимации набрала более 43 тысяч звезд на GitHub. Работая с одним мощным API, вы можете использовать его для анимации атрибутов HTML, CSS, JS, SVG и DOM. Благодаря встроенной системе ошеломления он может сделать создание ряби, направленных движений, последовательных и перекрывающихся эффектов простым. Эта система может использоваться как для таймингов, так и для свойств.

В дополнение к ошеломляющим анимациям, Anime.js также предлагает плавную анимацию, сферическую, многоуровневую анимацию и анимацию логотипа. Вы сможете анимировать несколько свойств преобразования CSS в ключевых кадрах одновременно с разным временем для одного элемента HTML.

Вы можете многое сделать, используя встроенные функции обратного вызова и управления. Например, вы можете синхронно воспроизводить, приостанавливать, контролировать, реверсировать и запускать события. Чтобы увидеть, что еще возможно с помощью этой библиотеки, вы можете посетить Codepen.

2. Velocity.js

Velocity.js сочетает в себе лучшее из переходов jQuery и CSS. Его рейтинг составляет более 17 тысяч звезд на GitHub и может похвастаться такими известными пользователями, как WhatsApp и Mailchimp. Зацикливание, реверсирование, задержка, скрытие/отображение элементов, математические свойства (+, -, *, /) и аппаратное ускорение — все это часть функций.

Вы можете использовать Velocity.js для прокрутки окон браузера. Он может работать как с jQuery, загруженным в ваш браузер, так и независимо от него, и даже отменять предыдущие анимации.

Velocity использует собственный стек анимации, заменяя все экземпляры jQuery $.animate() на Velocity $.animate(), чтобы повысить производительность во всех браузерах и устройствах, особенно на мобильных устройствах.

3. Theatre.js

Theatre.js — это библиотека анимации для высококачественной движущейся графики. Это помогает вам разрабатывать микровзаимодействия, которые позволяют вам создавать сложные движения и передавать нюансы. Работая визуально или с кодом, вы можете создавать генеративное интерактивное искусство и легко выполнять итерации, используя передовой редактор последовательностей. Используя свои собственные инструменты или официальные расширения, вы сможете делать множество вещей, например управлять ракурсами камеры, регулировать освещение или тени и многое другое.

Theatre.js — это незавершенный инструмент проектирования, подходящий для создания любых анимаций, от простых взаимодействий с пользовательским интерфейсом до сложных кинематографических сцен. Он направлен на то, чтобы стереть грань между дизайнером и разработчиком; автор и потребитель; и художник и ученый. Он работает путем изменения переменных JS и, следовательно, может работать с любым стеком, таким как Three.js, или с любой внешней библиотекой или фреймворком. Он имеет звездный рейтинг, близкий к 8K на GitHub.

4. Popmotion

Пришел с рейтингом чуть выше 19К звёздам, Popmotion — это функциональная библиотека анимации для любой среды JavaScript. Он может работать практически с любым API, который принимает числа в качестве входных данных, например React, Three.js, A-Frame и PixiJS.

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

Popmotion весит всего 11,7 КБ, но, тем не менее, производит впечатление. Он включает анимацию, такую ​​​​как ключевые кадры, затухание, временную шкалу для синхронизации нескольких экземпляров и многое другое. Вы можете чередовать любые серии анимаций или функций, а также использовать чистые функции для создания собственных конфигураций.

5. Three.js

Three.js возглавляет этот список библиотек анимации JavaScript с почти 88 тысячами звезд на GitHub. Создание и рендеринг 3D-анимации в браузере зависит от WebGL. Three.js помогает создавать сцены, источники света, тени, материалы, текстуры и многое другое. Это помогает вам делать вещи, которые вам пришлось бы кодировать, если бы вы использовали WebGL. Еще одна приятная особенность Three.js в том, что в его системе анимации вы можете анимировать различные свойства ваших моделей.

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

6. GreenSock JS

GSAP GreenSock работает с набором небольших файлов JavaScript, благодаря которым анимация отлично выглядит во всех основных браузерах. Он плавно связывает несколько свойств анимации и устраняет ошибки браузера. Кроме того, он поддерживает плавную и быструю работу с потрясающими возможностями последовательности, элементами управления во время выполнения и нулевыми зависимостями.

Действия GSAP включают создание анимации на холсте и анимацию любого объекта в сцене. Также постепенно раскрывайте, трансформируйте или перемещайте любой объект по пути. Для этой цели он работает с набором программных приложений, таких как SVGPlugins, PixiPlugin, WebGL, Adobe Animate и EaseJS. Его модульная структура поможет вам выбрать именно те функции, которые вам нужны. Эта мощная библиотека имеет 8 миллионов пользователей и около 15 тысяч звезд на GitHub.

7. AniJS

Среди библиотек JavaScript в этом списке AniJS несколько уникальна. Проще говоря, его лучше всего можно описать как библиотеку взаимодействия с пользовательским интерфейсом для веб-дизайнеров. Он позволяет добавлять анимацию к элементам в виде простой структуры, похожей на предложение, что отлично подходит для новичков в анимации. Более того, его неспецифический характер позволяет почти всем использовать его в повседневном UX-дизайне.

На GitHub AniJS оценивается более чем в 3,8 тысячи звезд. Он не зависит от какой-либо сторонней библиотеки и обычно помогает ускорить разработку. Он одинаково хорошо работает на Android и iOS, а также во всех популярных браузерах.

8. Mo.js

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

API-интерфейсы могут показаться простыми, но с ними можно многое сделать. В наборе инструментов вы найдете редактор кривых и редактор временной шкалы, которые помогут вам создавать анимации, а также проигрыватель для управления анимацией. Существуют различные модули для ошеломления, смягчения, временной шкалы и многого другого, и вы можете загрузить только те модули, которые вам нужны для вашего текущего проекта. Эффекты, не зависящие от плотности экрана, позволяют вашим анимациям хорошо выглядеть на любом устройстве. Все это приносит Mo.js почти 18 тысяч звезд на GitHub.

9. Vivus.js

Если вы хотите имитировать рисунок пером на экране в режиме реального времени, Vivus вам подойдет. Он позволяет анимировать SVG, создавая впечатление нарисованного. Поскольку он не имеет зависимостей, он быстрый и легкий.

Вы можете выбрать любую из доступных анимаций — отложенную, синхронную или по очереди. В противном случае вы также можете создать собственный скрипт для рисования SVG. Для большей гибкости вы можете переопределить анимацию каждого пути, используя простую функцию JavaScript. Кроме того, функция Scenarize позволяет вам создавать сценарии анимации вашего SVG. Более 14 тысяч пользователей положительно оценили эту библиотеку на GitHub.

10. ScrollReveal JS

Если вы хотите анимировать веб-элементы по мере их прокрутки, ScrollReveal вас не разочарует. Эта простая в освоении библиотека анимации не имеет зависимостей и имеет более 21,5 тыс. звезд на GitHub.

ScrollReveal поддерживает различные типы эффектов и хорошо работает с веб-браузерами и мобильными браузерами. Он намеренно работает с базовой конфигурацией, поэтому вы можете использовать его в качестве холста для своего творчества. Чтобы добиться максимального эффекта от анимации, создатели советуют использовать ее экономно.

Также есть возможность включить/отключить анимацию в настольных браузерах. ScrollReveal.js использует единую 3D-матрицу для создания анимации. Это помогает избежать любых существующих стилей преобразования CSS. В то же время это означает, что ScrollReveal понимает только несколько типов юнитов.

11. Typed.js

Typed.js — это простая библиотека (на самом деле, скорее плагин) для анимации набора текста на экране. Как только вы вводите любую строку, посетитель может наблюдать, как она набирается с заданной скоростью. Мало того, вы можете работать с кнопкой Backspace, а также начинать новое предложение. Если вы хотите, чтобы посетители с отключенным JS также могли его просматривать, вам просто нужно разместить HTML-элемент div на странице. Таким образом, боты и поисковые системы также могут просматривать введенные слова.

Эта библиотека оценивается более чем в 12,3 тысячи звезд на GitHub. Его можно использовать с ReactJS, VueJS и в качестве веб-компонента. Опытные пользователи включают Slack и Envato.

12. Lottie от AirBnB

Lottie — это облегченный формат анимированной графики, в котором высококачественная графика сочетается со стоимостью ее рендеринга. Рабочий процесс в Lottie позволяет моушн-дизайнерам работать в AfterEffects, а затем экспортировать свою работу в промежуточный формат json и в папку ресурсов приложения. Его можно использовать для Интернета, Android, iOS и Интернета вещей без необходимости в дополнительном программном обеспечении.

Lottie может работать в любом браузере, поддерживающем JavaScript. Анимации хранятся в виде обычного текста и удобочитаемы для человека. Поскольку текстовые данные хранятся в формате JSON, они легко адаптируются к любой среде JavaScript. Это делает его популярным форматом анимированной графики для улучшения мобильных интерфейсов. Одна только версия для Android имеет более 33 тысяч звезд на GitHub.

No related posts.