Тонкости создания органичных анимаций

Создание анимаций — это ваяние временем, тайминг здесь очень важен. Если вы не учитываете тайминг анимации, значит вы не создаете анимацию.

Анимация это визуальная музыка. Профессионалы задействуют ритм, тайминг, темп, композицию, текстуру и динамику.

В 2018 году инструменты для дизайна интерфейсов наконец-то учитывают анимацию, но многие пропускают важное. Они простодушно прикручивают анимации, вместо того, чтобы дать юзерам инструменты для управления их таймингом.

Неудивительно, что уже существует целый арсенал программных средств, продвигающих избитую анимацию.

Классическая анимация содержит непочатый край знаний — не нужно заново изобретать колесо.

Активированные движением

Представьте: вы впервые присаживаетесь в кресло в зале кинотеатра перед сеансом, и, вероятно, вам в глаза бросаются знаки «выход», границы экрана, головы других зрителей. Если кино не дурацкое, с его началом всё недвижное исчезнет из поля зрения, и вы почувствуете себя погружённым в фильм. Это происходит вплоть до того момента, как сбоку от вас какой-нибудь осёл не начнет проверять свой инстаграм — и вот тут вас резко вернёт назад в реальность.

Обычно мы замечаем вещи, когда они двигаются, и перестаём их замечать, когда они находятся в покое.

Движение притягивает наше внимание, поэтому стоит задуматься, как и куда мы его направляем.

Оптические мытарства

Просто знать о том, что существует «12 принципов анимации Disney», — недостаточно. Это примерно то же самое, как дизайнеру узнать, что design is how it works™️ («дизайн — это то, как предмет работает», — Стив Джобс), и остановиться на этом.

Текст на картинке: [Какой-то парень: «Изумительная анимация! Такая плавная!» (около 3 часов назад)]

Классический коммент на dribbble

Неопытные интерфейс-аниматоры склонны анимировать всё, иногда чересчур

Это связано с желанием вызвать «восторг». Аниматоры оберегают ценность тех ключевых кадров, которые расположили в анимации, забывая о том, что от такого количества движений может устать глаз. Наверное, они верят в миф о том, что люди сидят и разглядывают результат тяжелого труда аниматора, затаив дыхание. Этот миф усиливается сообществами типа Dribbble, где юзеры пачкают штаны от восхищения при виде анимаций, как будто никогда их прежде не видели. А по-моему, лучшая анимация воспринимается как невидимая.

Вот классический пример, который мы видим в интерфейсе сегодня: Неуклюжее применение эффекта пружины.

Текст на анимации: [Вы уверены, что хотите удалить себя? Звучит неплохо/Закрыть]

Избито

Качающиеся элементы интерфейса бессмысленно привлекают наше внимание — они провоцируют наши глаза фокусироваться, потому что движение в таких анимациях очень медленно сходит на нет. У пользователя появляется состояние напряженного ожидания — мы с нетерпением ждем, когда движущийся элемент наконец займет своё финальное положение.

Текст на анимации: [Вы уверены, что хотите удалить себя? Звучит неплохо/Закрыть]

Уже получше, с откалиброванным таймингом эффекта пружины.

Этого можно добиться, используя эффект пружины, параметрические ключевые кадры или ручной тайминг. В конце концов, наибольшее значение имеет то, как анимация ощущается.

Давайте поговорим о метаморфозах

Кнопка воспроизведения превращается в гамбургер, затем в кнопку закрытия, а затем — в утку.

да ладно...

Еще одно безвкусное клише интерфейса... Смотрите! Навязчивое меню «гамбургер». Даже если вы не добавляли в него эффект пружины, оно все равно кричащее. Нам не нужен буквальный, притягивающий внимание переход, чтобы понять, что происходит изменение состояния. Не обязательно трансформировать всё подряд во всё подряд.

Избитая иконка-«гамбургер» в контексте

Давайте посмотрим на неё в контексте. Обратите внимание на то, куда смотрят ваши глаза. Вы заметили иконку, болтающуюся после окончания основного перехода? Большее изменение состояния, приведенное в действие кнопкой — вот что важно. Чересчур анимированный нонсенс в «гамбургерной» иконке совершенно отвлекает внимание от этого.

Более дельный подход к делу — вообще не трансформировать иконку. Вместо этого лучше сфокусироваться на использовании мягких возможностей анимации для передачи интеракции. Это не про привлечение внимания, это о том, как его направлять.

Данная кнопка показывает «углубление» и мгновенный скачок обратно к начальному состоянию, с сильно заглушенным изингом, усиливающим чувство нажатия кнопки.

В контексте. Просим прощения у Medium за сжатие их гифки

Будьте бдительны! Оптические мытарства могут поджидать за углом!

Будет полезным подумать о том, как вы ведете взгляд по экрану. Подумайте о том, как ваши глазные яблоки вращаются в глазницах, шныряя, разгоняясь и замедляясь. Вы ведете глаз пользователя, создавая анимацию. Куда вы ставите акценты? Где глазу следует останавливаться? Больший трекинг требует большего целенаправленного физического и мысленного подхода. Стоит ли причудливая анимация усталости глаз пользователя? В достижении баланса есть секрет: будьте жадны на движения.

Формула VS чувства

Их вам надо определить самим — но не начинайте с них. Я имею ввиду прописанные, заскорузлые и банальные вещи, такие как формулы IBM и Google. Разбудите в себе скептика.

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

Принимайте во внимание мотивацию и намерение каждого встраивого вами элемента. Буквально — не всегда значит «лучше». Анимация — это среда, где невозможное — это подходящее. Правильно — это когда ощущается правильным.

Сравните эти примеры. На анимациях происходит одно и то же, но с разным таймингом.

Пример слева слишком буквальный. Изображение не должно появляться на экране с 0% и вырастать в движении до 100%, чтобы показать свой рост в пространстве.

У вас может получиться вариант пооригинальнее, если вы покажете результат и временные отрезки чуть заранее. Всё, что нужно делать — вести взгляд. Справа мы начинаем с масштаба 90%, весьма быстро достигая 100%. Мы ощущаем масштабирование, при этом не нужно сидеть и просматривать каждое значение от 0 до 100. Ни у кого нет времени на эту ерунду)

Режиссируем путь, который будет проходит взгляд, следуя за быстрым действием. — Тревожный чемоданчик аниматора, автор — Ричард Уилльямс.

Давайте попробуем с более абстрактным примером. Подвигаем некую форму по экрану:

Линейный, роботообразный переход. Безжизненно как-то, правда?

Текст на левой картинке снизу вверх, слева направо: [начальная позиция; время; мы едва начали и уже прошли половину пути; прогресс движения; уже близко к заключительной точке, треть пути анимации; финальное положение]

Теперь будем достигать конечной точки, пролетая сквозь всё действие быстрее, но с использованием сильного смягчения (изинга) для приятного восприятия возвращения.

Смазанно

Текст на картинке слева направо: [проскок, остановка]

Создание кривой

Что, если мы пойдем вперёд? Давайте построим кривую дальше. Ease-in и ease-out. Сильное ускорение, использование большего количества кадров. Если действие слишком быстрое, мы можем вести взгляд пользователя, используя растянутый «размазанный» кадр. Возможно, добавим немного проскока, для шлифовки.

Невозможные размазанные кадры ведут взгляд сквозь быстрое движение. От John Kricfalusi

Просмотр времени через графики

Закаленные аниматоры воспринимают время с тонкостями. Глаз нужно натренировать, чтобы видеть и ощущать тайминг. Развитие этой способности может занять годы, но благодаря компьютерам мы можем анализировать тайминг уже сейчас. СЛАВА КОМПЬЮТЕРАМ!

http://www.navone.org/HTML/Tutorial_Splines2_2.htm

Интерполированная компьютерная анимация часто представляет собой концепцию графического редактора, что позволяет вам моделировать время. В то время, как кривые, напоминающие крысиные норы, поначалу могут пугать вас, на самом деле все просто. Графики всего-навсего описывают величины, меняющиеся со временем. Величина привязывается к атрибутам (например, масштабу, позиции, вращению, цвету, способности гнуться, блеску, жесткости).

Motionscope

Управляешь формой этих графиков — создаешь время. Давайте воспользуемся MotionScope (нашим корпоративным инструментом в Thinko) и взглянем, как тайминг и расстановка интервалов (спейсинг) соотносятся с графиками. Похоже на пульт инженера или гистограмму фотографа.

Ступенчато/блокировано
https://framer.cloud/aAdpl/

Easing In
https://framer.cloud/vKGrR

Ease In и Ease Out https://framer.cloud/tfOhN

Симулированный прыжок https://framer.cloud/deNRR

Круговое движение может быть описано через функции синуса и косинуса в соответствии с измерениями https://framer.cloud/cTAKX

Пользовательская/настраиваемая кубическая кривая Безье https://framer.cloud/lWHuB

Множественные, расслоенные измерения https://framer.cloud/jBPYO

Мы можем уменьшить сложное движение в пользу более управляемых измерений, если будем работать с анимационными «слоями».

Преимущество использования такого прибора для наблюдения движения состоит в возможности рассмотреть движение в черновых конфигурациях. Можно отлаживать проблемы в анимациях, каждый раз фокусируясь на одном «слое» анимации.

КУЧА РЕСУРСОВ!!!

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

Удержание движения

Метод: как уменьшить «тяжесть» анимированного объекта и поддерживать формы оживленными

Гримасы

Контрастное завершение перед первым движением.

7 Принцип Анимации от Disney — Подготовка/упреждение

Внедрение Подготовки и Проскоков:

Дуги

Дуги: 12 базовых принципов анимации.

Сплайн-гигиена

Виктор Навон из студии Пиксар рассказывает о распутывании Кривых Функции.

Туториал: Сплайнофилия часть 2.

Переходные и пространственные интерфейсы

Эти я написал!

Переходные интерфейсы

Пространственные интерфейсы

Искусство интерполяции

Отличная лекция моего друга по имени Marcus Eckert.

Ощущение игры

Вот несколько идей для развития понимания тактильных ощущений.

Аварийный комплект аниматора

Это Библия для аниматоров — просто мастхэв.

Как лерпать как профессионал

*Lerp — линейно интерполировать между двумя векторами

Внедрение интерполяции

Практика

Чтение теории это одно дело, а внедрение этих идей — совсем другое. Будет полезным поскетчить с кодом и без него.

LightBox можно пользоваться БЕСПЛАТНО!

Чтобы экспериментировать без использования кода, практикуйте анимацию вручную — для получения представления о тайминге. Заанимируйте мяч, скачущий по экрану, не используя компьютер в промежутках. Нарисуйте каждый кадр самостоятельно. Это не сложно. Просто возьмите инструмент кисть, сделайте ее размером с мяч и экспериментируйте с таймингом и спэйсингом! Как только вы научитесь чувствовать тайминг, уровень вашего мастерства существенно улучшится!

Как бы то ни было, на сегодня это всё.

Если вам интересно почитать перевод какой-то из статей раздела «ресурсы» (или любой другой статье о дизайне на английском) — маякуйте здесь в комментариях или на почту [email protected]