Автор: Анимация — секретное оружие хорошего веб-дизайнера. Анимировать — значит оживить, и несколько маленьких анимированных штрихов могут оживить даже самое скучное содержание.
Создание сайта или страницы с анимацией не обязательно означает создание всего этого в каком-то большом и сложном анимационном приложении или фреймворке. Даже такая простая вещь, как анимация эффекта наведения ссылки с помощью 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 делает почти то, что заявлено — элементы анимируются, когда они появляются или покидают область просмотра. Это популярный эффект, который может порадовать пользователя, будучи незаметным.
Одним из потенциальных недостатков является то, что вы должны загрузить его в заголовок документа, чтобы избежать «мерцания» содержимого. Это описано в его документации.
АОS
AOS означает «анимация при прокрутке», и он предназначен (да, как вы уже догадались) для анимации целевых элементов при прокрутке пользователем. Этот популярный эффект может иметь практическую функцию и добавлять визуальный интерес.
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, но документация проста и всеобъемлюща, а поддержка хороша.
Anime.js
Еще одна очень популярная библиотека анимации — Anime.js . Он может быть нацелен на свойства CSS, SVG, атрибуты DOM и объекты JavaScript. Он имеет встроенную систему ошеломления, позволяющую легко накладывать анимации, и отличный контроль времени.
Опять же, это может показаться несколько сложным, но документация сделана очень хорошо, с понятными демонстрациями рядом с каждым рассматриваемым элементом.
Popmotion
Popmotion написан на Typescript, но его можно переносить в любую среду JavaScript. Это мощный инструмент с поддержкой ключевых кадров и пружинной анимации для чисел, цветов и сложных строк. В то же время он крошечный, и все его функции можно импортировать по отдельности, поэтому нет ненужного кода.
mo.js
Mo.js имеет декларативный API, упрощающий создание пользовательской анимированной графики. Он модульный, со встроенными компонентами, которые можно использовать в качестве отправной точки. Модуль Burst особенно хорош.
Как анимировать веб-страницы
Веб-анимация, как правило, делится на две основные категории:
- Случайный: анимация воспроизводится независимо от того, что делает пользователь. Случайная анимация не обязательно является просто украшением; это могут быть слайд-шоу или демонстрации.
- Интерактивные: вызваны такими событиями, как наведение курсора, прокрутка и нажатие. Их можно использовать, чтобы направлять пользователей и побуждать их выполнять действия.
Когда анимация является неотъемлемой частью пользовательского интерфейса и активируется событиями взаимодействия с пользователем, она может улучшить взаимодействие с пользователем, поскольку пользователь чувствует, что контролирует то, что происходит на экране.
Используйте их, чтобы усилить дизайн, воодушевить и успокоить пользователей, а также, когда это необходимо, доставить им удовольствие.
При правильном использовании анимация добавляет дизайну дополнительное измерение, но не следует использовать ее для компенсации плохого дизайна пользовательского интерфейса. Если вы полностью полагаетесь на анимацию, чтобы дизайн работал, вам нужно переосмыслить дизайн.
Анимация должна быть только улучшением, как эстетически, так и функционально. Вы должны убедиться, что ваш сайт продолжает работать, если анимация не работает. Если по какой-либо причине ваш JavaScript не загружается или не запускается, пользователь все равно сможет видеть контент и выполнять любые действия.
В подавляющем большинстве случаев меньше значит больше. Бомбардировка пользователя слишком большим количеством движений раздражает. Вы также должны поддерживать единообразие и эстетическую целостность анимации.
С технической стороны производительность имеет первостепенное значение, как с точки зрения самой анимации, так и страницы в целом. Вы хотите, чтобы вещи были как можно более легкими. Если вы делаете что-то простое, вы можете написать это на стандартном JavaScript (без каких-либо зависимостей), поскольку это будет самый легкий вариант. С другой стороны, если вы не знаете JavaScript, то, что вы сэкономите в размере файла, не стоит того, что вы сэкономите во времени и энергии, используя микробиблиотеку.
Есть несколько вещей, которые стоит учитывать, когда речь идет о файлах JavaScript и проблемах с размером. Они применимы к JavaScript в целом, а не только к анимации или библиотекам.
Микробиблиотеки, как правило, имеют размер от 5 до 7 КБ в сжатом виде Gzip, но даже более обширные библиотеки, которые мы рассмотрели здесь, имеют размер в сжатом виде Gzip менее 30 КБ. Если сравнить это с размером файлов изображений, то это весьма незначительно. Даже по сравнению с файлами CSS он не такой уж и большой.
JavaScript обычно загружается как постепенное улучшение внизу документа. Это означает, что он загружается последним и не блокирует остальную загрузку страницы, в отличие от CSS, который загружается в заголовке.
Мы уже говорили об этом, но стоит сказать еще раз: загружайте как можно меньше внешних файлов. Если вы используете более одной микробиблиотеки, объедините их. Чем меньше обращений к серверу, тем быстрее время загрузки.
Одна из самых крупных библиотек, которые мы здесь рассмотрели, GreenSock, содержит дополнительный код, обеспечивающий плавность анимации. Таким образом, несколько дополнительных миллисекунд при начальной загрузке окупаются тем, что пользователи не отвлекаются на плохую производительность самой страницы.
Если у вас возникли проблемы со временем загрузки, сначала посмотрите файлы изображений: оптимизация изображений, скорее всего, сэкономит вам гораздо больше, чем сокращение некоторого количества JavaScript. Кроме того, убедитесь, что ваши CSS-файлы максимально легкие. Используйте кэш браузера максимально эффективно. После загрузки файла он будет доступен на всем вашем сайте. И сведите обращения к серверу к минимуму. Для максимальной скорости загрузки используйте CDN для внешних ресурсов.
Размер — это не то же самое, что раздувание — раздувание — это то, что вам не нужно.
Размер имеет значение, но устранение избыточного кода, возможно, имеет еще большее значение.
Вы всегда должны использовать самую маленькую библиотеку, чтобы исключить неиспользуемый код, не в последнюю очередь потому, что Google принимает к сведению неиспользуемый код. Это может сыграть против вас. Многие из этих библиотек являются модульными и позволяют загружать только то, что вам действительно нужно.
Эти инструменты предназначены не только для непрограммистов. Они также отлично экономят время для фронтенд-разработчиков.
Если вы хотите регулярно использовать анимацию в своих проектах, вам необходимо освоить JavaScript. Вам не нужно быть экспертом, но вы должны понимать, как это работает. Кроме того, базовое представление о том, что происходит под капотом, не повредит.
