Анимация в медиа помогает раскрыть и дополнить тему, привносит новые смыслы в текст или просто становится якорем для внимания читателя, а иногда — передышкой между чтением строк. Setka Blog попросил иллюстратора Арину Шабанову и фронтенд-разработчика Александра Аверина рассказать, каких принципов придерживаться при работе с анимацией и как именно настраивать эффекты, чтобы они приносили пользу, а не вредили.
Арина Шабанова
Иллюстратор и аниматор
Работала с Google, MTV, WeTransfer, Bloomberg Businessweek, Paramount Comedy, Esquire Russia и «Яндексом»
Отталкивайтесь от темы и аудитории
Нужно вдумчиво выбирать анимационные приемы согласно теме, содержанию и ритму текста. Например, анимационная инфографика поможет объяснить сложные термины или процессы из финансовой сферы, а анимационная история — увлечь ребенка повествованием.
Не мешайте чтению
Если пользователь хочет быстро пролистать текст или найти нужную ссылку, медленные анимационные переходы, какими бы красивыми они ни были, будут только раздражать. Поэтому, как и везде в дизайне, в анимации необходимы разумные пропорции и осмысленное применение.
Помогайте усвоить материал
Использование анимации не обусловлено только аттрактивной функцией. Если благодаря моушн-дизайну человек более эффективно усваивает материал, тогда его присутствие оправданно.
Определитесь, что важнее: текст или дизайн
Иногда использование «спецэффектов» скорее отвлекает, чем помогает в чтении. Но бывают и случаи, когда основой материала является анимационная история, а текст работает как титры к фильму. Показательный пример — сказка для детей Oat the goat.
Удачные примеры анимации:
Ненавязчивая иллюстрация маршрута, отделенная от основного повествования в левой колонке.
How an F student became America’s most prolific inventor
Простые и при этом выразительные анимации в статичных иллюстрациях (колеса машины крутятся, вода льется из стакана в колбу и т. д.).
Bauhaus. Vkhutemas: the history of two legendary schools
Выразительная анимация, примененная к кастомной типографике: она помогает объединить эстетику дизайн-школ, существовавших параллельно.
Александр Аверин
Фронтенд-разработчик Setka
Принимал участие в разработке сайтов Look at Me, The Village, Wonderzine, Fur Fur, Hopes&Fears
Правила работы с анимацией
С точки зрения разработки анимация в вебе бывает двух типов: CSS- и JS-анимация. CSS-анимация достаточно проста в исполнении, при ее создании вы работаете с несколькими ключевыми кадрами, например: начальное состояние элемента, его состояние через 25% времени, через 50% и 100%. При этом задаются правила трансформации: изменение цвета, фона или положения на странице.
С помощью JavaScript возможности расширяются: технология снимает ограничения того, какие трансформации и в каком порядке могут происходить. Основное преимущество JS — возможность сделать интерактивную, реагирующую на действия пользователей анимацию.
Один из способов анимировать элемент — по наведению курсора или по клику (например, как в совместном материале The New York Times и OppenheimerFunds). То есть, чтобы человек увидел задуманный эффект, он должен по собственной инициативе совершить действие. И в этом случае нужно дать читателю достаточную мотивацию, иначе анимация останется незамеченной.
Чтобы показать примеры работы с анимацией, мы выбрали три опубликованных материала Hopes&Fears и в каждом анимировали несколько элементов.
советы
В панели анимации Setka Editor можно задать несколько трансформаций элемента из начального положения: изменить масштаб или прозрачность, сделать сдвиг или поворот. Это дает вариативность в использовании акцентов и оживлении повествования внутри материала.
Создайте сетку, добавьте в нее фон-изображение и зафиксируйте (image scroll > fixed). Отдельно добавляем две гифки, для которых настраиваем анимацию с перемещением по скроллу.
Эффект многослойности: анимации плюс гифки и статичные изображения
В статье The woman who can feel every earthquake in the world изначально использовались только статичные фотографии и гифки. После того как мы анимировали часть изображений, получился пример интересного и достаточно сложного эффекта. Здесь мы работали с исходниками иллюстраций, которые разбили на слои: отделили элементы от фона. В итоге получили статичный фон, поверх которого вылетают или подтягиваются изображения и гифки.
Анимация как акцент
В статье I’m celebrity stylist мы решили «оживить» статичные иллюстрации: разделили их на слои и анимировали отдельно друг от друга. В центральной иллюстрации мы оставили статичный слой с красной ковровой дорожкой и силуэтами людей и анимировали автомобиль (здесь используется триггер по скроллу с задержкой). Для более сложного, интересного эффекта мы могли бы использовать больше статичных и анимированных слоев.
Главный совет в работе с акцентными элементами — настраивать анимацию «с задержкой»
Также по ходу материала появляются анимированные основной текст и выноски в правой колонке. В статье используется много фактоидов, цифр и акцентов — все они появляются на экране по скроллу. Задача анимации в данном случае — привлечь внимание к цифре или факту, которые важны для понимания основного текста.
Главный совет в работе с подобными элементами — настраивать появление анимации «с задержкой». То есть анимация должна срабатывать не сразу, как только пользователь прокручивает экран до места встречи с элементом. Если читатель скроллит быстро, то анимацию он попросту не заметит. Элемент, который появляется ближе к середине экрана, заметят с большей вероятностью.
Второе правило для акцентных анимаций: чем мельче элемент, тем меньше времени для трансформации ему требуется. Например, в нашей статье цифры в правой колонке появляются в пределах 0,5 секунды. Если «перебрать» с продолжительностью движения, то анимация будет скорее во вред — она будет не вовлекать, а раздражать.
советы
Для того, чтобы сделать задержку, используйте поле Delay в панели управления анимацией. Продолжительность анимации задайте в поле Duration.
Можно пойти от обратного и, наоборот, усилить эффект. Мы анимировали несколько небольших элементов — шарф и помаду, которые очень медленно спускаются вниз, почти что «паря» в правой колонке. Это создает особый эффект: трансформация происходит во то время, пока пользователь читает текст в главной колонке. Если читатель скроллит быстро и не замечает анимацию — ничего страшного.
Повороты как моушн-прием
Для материала Into the Future with yacht’s Claire Evans and Jona Bechtolt мы настроили повороты фоновых плашек, фотографий и видео. Получился довольно своеобразный дизайнерский прием. Здесь все детали работают в комплексе за счет использования углов: на фотографиях повернуто зеркало, фон расположен по диагонали и, наконец, анимация акцентирована на углах. Такой прием нужно использовать аккуратно и только при наличии осмысленной задумки дизайнера.
советы
Используйте настройку вращения (Rotation): задайте необходимый угол наклона, который будет использоваться как начальное положение элемента.
