Создание сайта или страницы с анимацией не обязательно означает создание всего этого в каком-то большом, сложном анимационном приложении или фреймворке. Даже такая простая вещь, как анимация эффекта наведения на ссылку с помощью CSS, добавляет немного визуальной искры.
Переходы и трансформации в CSS можно комбинировать для создания фантастических эффектов, включая стирание экрана в стиле Звездных войн. Но вам, возможно, придется рассмотреть возможность использования JavaScript для большей гибкости.
Дизайнеру, особенно тому, кто мало занимается кодированием, эта идея может показаться немного отталкивающей. Однако, к счастью, существует ряд библиотек JavaScript, специально разработанных для создания анимационных эффектов. Вам нужно будет немного разобраться в коде, но смысл этих библиотек в том, что кто-то уже сделал большую часть тяжелой работы за вас. Если вы можете следовать простым инструкциям, вы можете использовать библиотеки JavaScript для улучшения своих дизайнов.
Прежде чем начать поиск библиотеки, полезно четко представлять, что вы ищете. Подумайте о том, какие анимационные эффекты вы хотите, затем разбейте их на составные части. Вся простая анимация разбивается на затухание, скольжение, масштабирование или вращение, управляемые таймерами, которые управляют задержками, ослаблением и порядком воспроизведения, а также триггерами (событиями) — такими как прокрутка, нажатие или загрузка страницы, — которые запускают и останавливают выполнение анимации. Чем больше этих функций вы объединяете, тем сложнее становится анимация.
Теперь, когда с этим покончено, давайте рассмотрим некоторые библиотеки, начиная с самых простых и переходя к более сложным (но все еще управляемым) предложениям.
AniJS
Если вы новичок в анимации или JavaScript, AniJS – отличное место для начала. Это библиотека взаимодействия с пользовательским интерфейсом, которая позволяет использовать JavaScript для управления анимациями CSS без написания какого-либо JavaScript. Это превращает JavaScript в “простой’ язык — if: event, do: action, to: element. Поскольку это также имитирует базовый синтаксис JavaScript, это может помочь не-программисту освоиться с JS. Кроме того, вы можете продвинуться в нем, если захотите.
Существует множество демонстраций и примеров, а также страница ресурсов — AniCollection, — на которой есть масса готовых анимаций, которые вы можете скачать и использовать.
Если вы хотите воспользоваться преимуществами JavaScript, но не чувствуете себя готовым углубляться в приведенные ниже ресурсы, AniJS для вас.
Микро-библиотеки
Еще один способ начать работу с анимацией – попробовать библиотеку, которая концентрируется на чем-то одном. Преимущество этих микро-библиотек в том, что они небольшие, а поскольку их функциональность ограничена, их обычно легко внедрить. Вот несколько советов, которые вы можете попробовать:
ScrollReveal
ScrollReveal делает в значительной степени то, что написано на tin — элементы анимируются по мере их появления или выхода из области просмотра. Это популярный эффект, который может порадовать пользователя своей утонченностью.
Одним из потенциальных недостатков является то, что вы должны загружать его в начало документа, чтобы избежать “мерцания” содержимого. Это рассматривается в документации.
AOS
AOS расшифровывается как animate on scroll и предназначен — да, вы уже догадались — для анимации целевых элементов при прокрутке пользователем. Этот популярный эффект может выполнять практическую функцию и добавлять визуальный интерес.
Granim.js
Granim.js позволяет анимировать цветовые градиенты. Вы можете управлять цветами, направлением и режимами наложения и использовать это с масками изображений. Изначально эта библиотека кажется чисто декоративной, но вы можете применить ее к пользовательским взаимодействиям, таким как события мыши.
TypeIt
TypeIt создает анимацию с эффектом пишущей машинки. Это эффект, который мы довольно часто видим на сайтах портфолио. Это помогает привлечь пользователя и может помочь с иерархией контента, привлекая внимание к анимированному тексту.
Vivus
Vivus анимирует SVG-файлы, делая их похожими на нарисованные. С этим может быть немного сложнее разобраться, но результаты довольно превосходные.
Rough Notation
Rough Notation добавляет анимированные текстовые примечания и украшения. Вы можете добавлять нарисованные от руки скобки, зачеркивания, подчеркивания, выделения, эффекты перечеркивания и круги. Вы также можете комбинировать различные эффекты.
barba.js
barba.js анимирует переходы между страницами, создавая впечатление одностраничного приложения. Имейте в виду, что документация предполагает знакомство с синтаксисом JS и рекомендует вам убедиться, что вам с ним удобно, прежде чем пытаться его использовать.
TweenJS
TweenJS – это библиотека для настройки, которая поддерживает настройку как числовых свойств объекта, так и свойств стиля CSS. Команды могут быть объединены в цепочку для создания сложных твинов.
Вполне возможно использовать две или более микро-библиотек одновременно. Они должны иметь пространство имен, чтобы не конфликтовать друг с другом. Если вы хотите использовать две или более библиотек на одной веб-странице, вам следует объединить весь JavaScript, то есть поместить как можно больше кода в один файл, чтобы это был только один запрос сервера.
Большие библиотеки
Если вы обнаружите, что вам нужно использовать более 4 или 5 микро-библиотек одновременно, возможно, пришло время обратить внимание на немного более обширную библиотеку или даже целый фреймворк, который может обрабатывать все, что вы хотите сделать сам.
Будьте готовы к тому, что сейчас все немного усложнится, но эти библиотеки анимации, как правило, имеют хорошую документацию и поддержку сообщества.
GSAP
GSAP, также известная как GreenSock, является одной из самых популярных библиотек JavaScript для анимации. Она может анимировать практически все, к чему доступен JavaScript, включая свойства и переменные CSS, свойства пользовательских объектов, SVG, сложные строки и компоненты React.
Она модульная, с использованием плагинов для добавления дополнительной функциональности в ядро. Это означает, что вы добавляете только то, что вам действительно нужно, без использования какого-либо постороннего кода. Это очень быстрый, надежный и легкий, учитывая его мощь.
Это может показаться немного пугающим для любого, кто не знаком с JavaScript, но документация проста и всеобъемлюща, а поддержка хорошая.
Animé.js
Еще одна очень популярная библиотека анимации – это Animé.js. Она может быть нацелена на свойства CSS, атрибуты SVG, DOM и объекты JavaScript. Он имеет встроенную пошаговую систему, позволяющую легко накладывать анимации друг на друга, и отличное управление таймингом.
Опять же, это может показаться несколько сложным, но документация выполнена очень хорошо, с четкими демонстрациями рядом с каждым рассмотренным пунктом.
Popmotion
Popmotion написан на Typescript, но переносим в любую среду JavaScript. Он мощный, с поддержкой ключевых кадров и весенней анимации для чисел, цветов и сложных строк. В то же время он крошечный, и все его функции можно импортировать по отдельности, поэтому в нем нет ненужного кода.
mo.js
Mo.js имеет декларативный API, упрощающий создание пользовательской графики движения. Он модульный, со встроенными компонентами, которые вы можете использовать в качестве отправной точки. Модуль Burst особенно восхитителен.
Как анимировать веб-страницы
Веб-анимации, как правило, делятся на две основные категории:
- Случайные: где анимации воспроизводятся независимо от того, что делает пользователь. Случайные анимации не обязательно являются просто украшениями; они могут быть слайд-шоу или демонстрационными версиями.
- Интерактивные: которые вызываются такими событиями, как наведение курсора мыши, прокрутка и касание. Они могут использоваться для руководства пользователями и поощрения их к выполнению действий.
Когда анимации являются неотъемлемой частью пользовательского интерфейса, запускаемого событиями взаимодействия с пользователем, они могут повысить вовлеченность пользователя, поскольку пользователь чувствует, что контролирует происходящее на экране.
Используйте их, чтобы усилить дизайн, поощрить и успокоить пользователей и, когда это необходимо, порадовать их.
При правильном использовании анимация добавляет дизайну дополнительное измерение, но вы не должны использовать ее для компенсации плохого дизайна пользовательского интерфейса. Если вы полностью полагаетесь на анимацию при создании дизайна, вам нужно переосмыслить дизайн.
Анимация всегда должна быть только улучшением, как эстетическим, так и функциональным. Вы должны убедиться, что ваш сайт все еще функционирует, если анимация не работает. Если по какой-либо причине ваш JavaScript не загружается или не запускается, пользователь все равно должен иметь возможность просматривать содержимое и выполнять любые действия.
В подавляющем большинстве случаев чем меньше, тем определенно больше. Бомбардировка пользователя излишним количеством движений раздражает. Вы также должны поддерживать согласованность и эстетическую связность своих анимаций.
С технической стороны производительность имеет первостепенное значение, как с точки зрения самой анимации, так и страницы в целом. Вы хотите, чтобы все было как можно проще. Если вы делаете что-то простое, вы могли бы рассмотреть возможность написания этого на ванильном JavaScript (без каких-либо зависимостей), поскольку это будет самый легкий вариант. С другой стороны, если вы не знаете JavaScript, то то, что вы экономите в размере файла, не стоит того, что вы сэкономили бы себе во времени и энергии, используя микро-библиотеку.
Есть несколько вещей, которые стоит учитывать, когда речь заходит о файлах JavaScript и проблемах с размером. Они применимы к JavaScript в целом, а не только к анимации или библиотекам.
Объем микро-библиотек, как правило, составляет от 5 до 7кб, но даже более обширные библиотеки, которые мы рассмотрели здесь, имеют размер менее 30 кб. Если сравнить это с размером файлов изображений, то он довольно незначителен. Даже по сравнению с файлами CSS он не совсем огромен.
JavaScript обычно загружается в качестве прогрессивного улучшения в нижней части документа. Это означает, что он загружается последним и не блокирует остальную часть загрузки страницы, в отличие от CSS, который загружается в head.
Мы уже упоминали об этом, но стоит сказать еще раз: загружайте как можно меньше внешних файлов. Если вы используете более одной микро-библиотеки, объедините их. Чем меньше обращений к серверу, тем быстрее время загрузки.
Одна из больших библиотек, которую мы рассмотрели здесь, GreenSock, содержит дополнительный код для обеспечения бесперебойной работы анимации. Таким образом, несколько дополнительных миллисекунд при начальной загрузке окупаются за то, что пользователи не отвлекаются на низкую производительность самой страницы.
Если у вас возникли проблемы со временем загрузки, сначала посмотрите на свои файлы изображений: оптимизация изображений, скорее всего, сэкономит вам намного больше, чем сокращение части JavaScript. Кроме того, убедитесь, что ваши CSS-файлы как можно более легкие. Максимально используйте кэш браузера. Как только файл будет загружен, он станет доступен на всем вашем сайте. И сведите к минимуму вызовы на сервер. Для максимальной скорости загрузки используйте CDN для своих внешних ресурсов.
Размер — это не то же самое, что раздувание. Раздувание – это то, что вам не нужно.
Размер имеет значение, но устранение избыточного кода, возможно, имеет еще большее значение.
Вы всегда должны использовать как можно меньшую библиотеку, чтобы исключить неиспользуемый код, не в последнюю очередь потому, что Google принимает к сведению неиспользуемый код. Это может быть учтено против вас. Многие из этих библиотек являются модульными и позволяют загружать только то, что вам действительно нужно.
Эти инструменты предназначены не только для не-программистов. Они также отлично экономят время интерфейсных разработчиков.
Если вы хотите регулярно использовать анимацию в своих проектах, вы должны освоиться с JavaScript. Вам не нужно быть экспертом, но вы должны уметь понимать, как это работает. Кроме того, базовое представление о том, что происходит под капотом, не повредит.