От автора: анимация быстро становится важным инструментом в дизайне и все чаще используется для того, чтобы помочь пользователю понять что-либо, а также для взаимодействия с нашей работой. За последние годы анимация стала намного лучше работать в браузерах и на мобильных устройствах. По факту все современные десктопные браузеры идут со встроенной поддержкой CSS анимации. CSS дает нам и другие замечательные инструменты, еще никогда не было более подходящего времени, чтобы придать нашему дизайну движения. Но почему анимация так важна? И с чего начать?
Почему CSS анимация важна в наших дизайнах?
Движение – большая составляющая того, как мы взаимодействуем с миром и понимаем его. Это врожденный инстинкт.
Эволюция постаралась, чтобы мы хорошо распознавали движение. Движение защищает нас и помогает замечать изменения в окружении. Оно добавляет дополнительный уровень коммуникации помимо слов. Наблюдение за движением и визуальные подсказки позволяют нам невербально понимать сложные действия и идеи.
Анимацию в вебе можно использовать для достижения того же эффекта, а также чтобы добавить глубины и значения диалогу между нашими пользователями и интерфейсом.
Например, можно анимировать элементы так, чтобы они уходили за экран при удалении, а при добавлении выезжали обратно. Такое простое движение помогает нам понять, откуда берутся эти элементы. Такая анимация дополняет нашу умственную модель, с которой мы работаем, и делает взаимодействие богаче и более значимым.
С помощью анимации можно привлекать внимание к определенным элементам интерфейса, а также рассказывать истории и вести пользователей шаг за шагом.
Анимация и плавные переходы вместе с микровзаимодействием на сайте или в приложении помогают привлечь пользователей, удивить их и обрадовать. Это также мощный способ дать пользователю отклик на его действия: наведение мыши, клики по кнопкам и заполнение форм. Все это дополняет диалог и помогает персонализировать интерфейс.
А что с JavaScript?
CSS – не единственный способ добавить анимацию в дизайн, но самый простой. С появлением jQuery нам открылась возможность анимировать и двигать элементы на странице с помощью JS.
А совсем недавно мощные пакеты типа GreenSock GSAP добавили в браузеры продвинутую анимацию, даже в браузеры без поддержки CSS анимации. Они обеспечили детальный контроль над анимацией, хорошую обратную совместимость и множество полезных функций.
Но у всего есть своя цена. Дополнительные JS зависимости делают наш проект тяжелее, что выливается в долгую загрузку и обработку страниц. На быстрых соединениях это не так заметно, но большая часть мира использует медленные соединения и мобильные устройства. Поэтому нужно помнить о производительности.
Дополнительную сложность несут JS фреймворки, они усложняют обслуживание кода и являются потенциальными источниками ошибок.
И все же, JS анимация проделала долгий путь, это мощный и полезный инструмент для создания продвинутой и сложной анимации.
С CSS можно сделать много чего, не прибегая к плагинам: это самый быстрый и простой способ начать создавать анимацию.
Анимация на CSS
Браузеры поддерживают CSS по умолчанию (в разной степени).
Так же, как мы использовали свойства font-size, background в стилях для создания визуального дизайна, можно использовать свойства transition, animation и keyframes для создания движения.
Свойство transition можно использовать для сглаживания изменений в стилях при наведении курсора. С помощью keyframes можно задавать циклы из нескольких состояний, а также создавать сложные эффекты. С помощью встроенных CSS свойств можно контролировать длительность анимации и направление. После недолгого изучения все будет казаться таким знакомым даже тем, у кого скудные знания в CSS.
Знание возможностей CSS помогает при выборе между keyframes и JS.
Почему не начать прямо сейчас?
Чем хороша CSS анимация – вас ничего не останавливает, вы можете начать прямо сейчас. Вам нужен лишь браузер и текстовый редактор, или же можно воспользоваться сервисом типа CodePen.
Восторгаться анимацией в браузерах можно по множеству причин. Есть множество замечательных примеров, когда анимация улучшала не только внешний вид сайта, но и взаимодействие, а также избавляла от путаницы. Однако анимация не только практичный инструмент, работать с ней весело, она оживляет интернет.
Недавно я вместе с SitePoint создал новый курс по анимации с помощью CSS. Я очень волнуюсь по этому поводу. Мне кажется, жизненно важно научить людей, как делать что-то новое в интернете, чтобы сеть становилась все лучше. Это расширение моей работы на CSSAnimation.rocks, еще один замечательный ресурс для изучения CSS анимации.
Что вы узнаете из курса:
Анимация в браузере. Установка сцены для курса, изучение преимуществ и принципов анимации.
Переходы – от А к Б. Научитесь добавлять плавные переходы в стили для двух состояний.
Keyframe анимация. Научитесь создавать более сложные движения с помощью @keyframes и свойства animation. Сперва теория, потом практические примеры.
Функции анимации и тайминга. Узнаете, как добавить характер и контролировать тайминг анимации с помощью функций анимации и кубических функций Безье.
Собираем все вместе. Переходим на следующий уровень. Комбинируем эффекты и создаем несколько переходов и анимаций.
Вопросы по браузерам. Обсудим поддержку в браузерах, вендорные префиксы и производительность. Убедимся, что ваша анимация будет работать на максимальном количестве устройств.
Доступность и анимация. Решим проблемы с доступностью, а также убедимся, чтобы наша анимация не отвлекала и не укачивала.
Помимо теории и практических примеров из курса вдохновение можно почерпнуть во множестве мест. Я люблю смотреть концепты анимации на Dribbble. На сайте Use Your Interface можно найти множество вдохновляющих материалов по интерфейсам. Для iOS есть сайт Capptivate. Нужно что-то для кинематографа, добавьте в закладки Art of the Title.
Анимация может много чего дать дизайну. Она помогает общаться, рассказывать истории, она может быть забавной и творческой. Научиться создавать анимацию легко, а дальше все зависит только от вашей фантазии. Так почему бы не начать. Попробуйте что-то новое и убедитесь, как движение оживит ваш дизайн!
Автор: Donovan Hutchinson, Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
