Как делать анимацию в медиа: советы и примеры

Иллюстратор и фронтенд-разработчик — о том, зачем «оживлять» статичные данные и иллюстрации

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


Арина Шабанова

Иллюстратор и аниматор

Работала с Google, MTV, WeTransfer, Bloomberg Businessweek, Paramount Comedy, Esquire Russia и «Яндексом»


Отталкивайтесь от темы и аудитории

Нужно вдумчиво выбирать анимационные приемы согласно теме, содержанию и ритму текста. Например, анимационная инфографика поможет объяснить сложные термины или процессы из финансовой сферы, а анимационная история — увлечь ребенка повествованием.

Не мешайте чтению

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

Помогайте усвоить материал

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

Определитесь, что важнее: текст или дизайн

Иногда использование «спецэффектов» скорее отвлекает, чем помогает в чтении. Но бывают и случаи, когда основой материала является анимационная история, а текст работает как титры к фильму. Показательный пример — сказка для детей Oat the goat.

Удачные примеры анимации:

The Russia Left Behind

Ненавязчивая иллюстрация маршрута, отделенная от основного повествования в левой колонке.

Bezos’s empire

Эффектный пример интерактивной анимации, которая усиливает инфографику.

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): задайте необходимый угол наклона, который будет использоваться как начальное положение элемента.