book-open 1 test
Принципы анимации

Пошаговое создание анимации в интерфейсе с помощью JavaScript и Bounce.js

Вдохнем жизнь в пользовательский интерфейс посредством Bounce.js и принципов классической анимации.
Иллюстрация Anna Warda: https://dribbble.com/shots/15933225-Mental-health-mobile-apps

Вы читаете перевод статьи "Giving Animations Life". Над переводом работали: Анастасия Свеженцева и Nancy Pong. При поддержке iSpring.

Я люблю анимацию. Именно поэтому я создал Bounce.js — инструмент и JavaScript библиотеку для создания прекрасных ключевых анимаций на CSS3. В этой статье я хочу показать, как использовать Bounce.js и некоторые принципы классической анимации, чтобы добавить анимации в ваши веб приложения.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

Первая итерация — Дефолтное “смягчение”

View MP4

Первая версия — это обычная, вручную написанная CSS3 анимация с двумя ключевыми кадрами:

.form {
   animation: form-fly-up 0.35s ease;
}
@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   100% { transform: translateY(0); }
}

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

Вторая итерация — Отпрыгивание

View MP4

Чтобы немного “принарядить” нашу анимацию, добавим еще один ключевой кадр, чтобы форма регистрации немного отпрыгивала, прежде чем окончательно встрать на свое место:

.form {
   animation: form-fly-up 0.45s ease;
}
@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   50% { transform: translateY(-50px); }
   100% { transform: translateY(0); }
}

Да, по ощущениям форма стала более “пружинистой”, но все равно выглядит немного странно. Можно было бы повозиться с величинами или даже добавить несколько отскакиваний туда-сюда, но не проще ли будет попросить компьютер просчитать для нас ключевые кадры на основе реальной физической модели? Именно этим и занимается Bounce.js!

Третья итерация — Физика отпрыгивания

View MP4

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

.form {
   animation: form-fly-up 1s linear;
}
/* Generated with Bounce.js. Edit at http://goo.gl/AUAzKV */ 
@keyframes form-fly-up {
   …
}

Для смягчения я использую дефолтную функцию bounce, которая основана на упрощенной модели пружинной амортизационной системы. Большое спасибо Сарушу Ханлу за статью, в которой он описывает эту модель и рассказывает о своей iOS библиотеке SKBounceAnimation. Эти ресурсы здорово помогли мне в создании функций смягчения для Bounce.js.

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

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

Четвертая итерация — Сквозное движение и захлест

View MP4 (+ Slow Motion)

Сквозное движение и захлест — это две родственные техники, которые позволяют создать ощущение, что мультипликационные персонажи и объекты подчиняются законам физики. По сути, они показывают, что отдельные части объекта по-разному перемещаются во время движения или продолжают перемещаться, когда движение основного объекта уже прекратилось.

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

.form {
   animation: form-fly-up 1s linear;
}
.button {
   animation: button-bounce 1s 0.12s linear;
}
/* Generated with Bounce.js. Edit at http://goo.gl/TvjpS6 */
@keyframes form-fly-up {
   …
}
/* Generated with Bounce.js. Edit at http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}

Заметьте, что я сделал вылет формы (form-fly-up) жестче, чтобы усилить ощущения от движения кнопки.

Пятая итерация — Смазывание анимации

View MP4 (+ Slow Motion)

В следующей итерации я растяну форму, пока она движется (смотрите на видео в замедленном действии), чтобы создать ощущение размытости. Это называется смазыванием анимации. Этот эффект не входит в 12 принципов Диснея, но тем не менее его часто используют в ручной анимации, чтобы сократить количество кадров для создания эффекта движения. В этом блоге на tumblr автор собирает и выкладывает стоп-кадры смазанных анимаций: можно только поражаться как мастерски создаются подобные эффекты.

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

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1s linear;
}
.button {
   animation: button-bounce 1s 0.12s linear;
}
/* Generated with Bounce.js. Edit at http://goo.gl/dvi8wI */
@keyframes form-fly-up {
   …
}
/* Generated with Bounce.js. Edit at http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}

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

Пятая итерация — Сжатие и растяжение

View MP4 (+ Slow Motion)

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

Изображение от Autodesk

Чтобы добиться желаемого эффекта нашей формы регистрации, важно попытаться сохранить ее общий объем, когда она сжимается под собственным весом.

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1.29s linear;
}
.button {
   animation: button-bounce 1s 0.12s linear;
}
/* Generated with Bounce.js. Edit at http://goo.gl/G1h7Qa */
@keyframes form-fly-up {
   …
}
/* Generated with Bounce.js. Edit at http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}

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

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

Еще раз большое спасибо Сарушу Ханлу за его чудесную работу над SKBounceAnimation. Спасибо также Паскалю ДаСильва (@pasql), что показал мне, как можно улучшить некоторые анимации. Обязательно прочитайте (если еще не читали) его статью Transitional Interfaces (по-русски Переходные интерфейсы — прим.перев).

Принципы анимации