20.10.2023 в 21:59

Методы веб-анимации — CSS против JavaScript

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

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

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

CSS-анимации

CSS (каскадные таблицы стилей) обычно используется для стилизации веб-страниц. Но он также предоставляет мощный и простой способ создания анимации.

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

Пример CSS-перехода

Сначала давайте посмотрим на пример простого CSS-перехода:

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #3498db;
}

В приведенном выше примере цвет фона кнопки плавно переходит в новый цвет, когда пользователь наводит на нее курсор. Это достигается с помощью свойства перехода.

Давайте узнаем немного больше о том, как работает свойство перехода:

Background-color: это анимируемое свойство CSS. В данном случае это цвет фона кнопки.
0,3 с: это продолжительность анимации. Он определяет, сколько времени потребуется для завершения перехода (в данном примере 0,3 секунды).
Easy-in-out: это функция синхронизации, которая управляет кривой скорости анимации. Он начинается медленно, ускоряется в середине и замедляется в конце.
0 с: это задержка перед началом анимации (в данном случае задержки нет).

Пример Keyframes

Keyframes — это еще один тип CSS-анимации, который можно использовать для стилизации элементов. Вот пример одного в действии:

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        .element {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: pulse 2s ease-in-out infinite;
        }

Мы определяем правило @keyframes с именем pulse, которое определяет три ключевых кадра с длительностью 0%, 50% и 100% продолжительности анимации. Он использует свойство transform для масштабирования элемента.
Класс CSS .element задает исходный цвет фона и применяет «импульсную» анимацию с длительностью 2 секунды, функцией синхронизации «замедления» и «бесконечным» значением, что означает, что анимация будет зацикливаться бесконечно.
Внутри <body> есть элемент <div> с классом element, который будет подвергаться «импульсной» анимации при загрузке страницы.

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

Другие методы CSS-анимации:

Существуют и другие методы CSS-анимации, в том числе:

Transformation CSS можно использовать для выполнения 2D- и 3D-преобразований, таких как масштабирование, вращение и перемещение элементов.
Keyframes Как показано в приведенном выше примере, ключевые кадры позволяют создавать более сложные анимации путем указания нескольких шагов или ключевых кадров в последовательности анимации.
Другие типы переходов CSS. Помимо переходов на основе свойств, вы также можете использовать переходы для нескольких свойств, что позволяет создавать более сложные анимации.

Преимущества CSS-анимации

Простота в использовании: CSS-анимацию относительно просто реализовать, особенно для таких базовых анимаций, как переходы и затухания.
Производительность: они имеют аппаратное ускорение и в целом работают хорошо, обеспечивая удобство работы с пользователем.
Адаптивный дизайн. CSS-анимация по своей сути адаптивна и адаптируется к различным размерам экрана и устройствам.
Низкие накладные расходы на JavaScript. Использование CSS для анимации может снизить нагрузку на JavaScript, делая ваше веб-приложение более эффективным.
Совместимость с браузером. CSS-анимация широко поддерживается в современных браузерах. Но важно отметить, что могут возникнуть проблемы совместимости со старыми версиями Internet Explorer (IE) и некоторыми мобильными браузерами. В таких случаях может возникнуть необходимость обеспечить плавную деградацию или альтернативный дизайн для пользователей старых браузеров.

JavaScript-анимации

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

JS-анимации с использованием requestAnimationFrameметода

     const box = document.getElementById('animated-box');
        let isAnimating = false;

        box.addEventListener('click', () => {
            if (!isAnimating) {
                isAnimating = true;
                box.style.transform = 'translateX(200px)';
                
                setTimeout(() => {
                    isAnimating = false;
                    box.style.transform = 'translateX(0)';
                }, 1000);
            }
        });

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

В этом примере

Мы используем document.getElementById('animated-box')для выбора HTML-элемент с идентификатором «animated-box» и присваиваем его переменной box.
Мы также объявляем логическую переменную isAnimating, чтобы отслеживать, выполняется ли в данный момент анимация.
Мы добавляем прослушиватель событий к boxэлементу, который прослушивает событие щелчка.
При нажатии на поле прослушиватель событий запускает анонимную функцию, которая проверяет, выполняется ли уже анимация ( isAnimating). Если нет, то устанавливается isAnimatingзначение true.
Затем он меняет transformсвойство поля на translateX(200px). Это сдвинет поле на 200 пикселей вправо, создав эффект горизонтальной анимации.
После задержки в 1 секунду (указанной setTimeout) он isAnimatingвозвращается в исходное состояние falseи сбрасывает transformсвойство в исходное состояние ( translateX(0)), перемещая поле обратно в исходное положение.

Этот код создает простую анимацию, в которой щелчок по полю перемещает его горизонтально вправо, а затем обратно в исходное положение, и все это в течение 1 секунды. Свойство CSS transitionгарантирует, что движение будет плавным и визуально привлекательным.

Другие распространенные методы анимации JavaScript

jQuery: jQuery — это популярная библиотека JavaScript, которая упрощает задачи анимации, упрощая создание анимации с меньшим количеством кода.
GreenSock Animation Platform (GSAP): GSAP — это надежная библиотека анимации для JavaScript, которая предоставляет расширенные возможности анимации и точный контроль над анимацией.
Анимация холста: холст HTML5 можно использовать для создания пользовательских анимаций, особенно для игр и визуализаций.
API веб-анимации: этот собственный API браузера предоставляет интерфейс JavaScript для управления анимацией на веб-страницах, что обеспечивает больший контроль над анимацией по сравнению с CSS.
Анимации SVG. Вы можете создавать сложные анимации в масштабируемой векторной графике (SVG), используя JavaScript для управления элементами SVG.

Преимущества анимации JavaScript

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

Когда использовать CSS или JavaScript для анимации

Когда использовать CSS для анимации:

CSS часто является лучшим выбором для базовой анимации, такой как эффекты наведения, переходы и небольшие неинтерактивные анимации.

CSS-анимация, как правило, более плавная и эффективная, что делает ее идеальной для сценариев, где производительность критична.

А когда вы разрабатываете адаптивные веб-сайты, CSS-анимация легко адаптируется к экранам разных размеров.

Когда использовать JavaScript для анимации:

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

Кроме того, если ваша анимация должна реагировать на действия пользователя, вам следует использовать анимацию JavaScript.

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

И, наконец, когда вам требуются обновления в реальном времени или синхронизированная анимация, JavaScript — лучший выбор для динамического контента.

Как объединить CSS и JavaScript-анимацию

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

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

Посмотрите следующий Codepen для примера:

Заключение

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

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

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

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

Источник:

Pulse Animation

#JavaScript #CSS

184

Войти на сайт