Дарим анимациям жизнь

Вдохнем жизнь в пользовательский интерфейс посредством Bounce.js и принципов классической анимации.
96

Над переводом работали: Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.

Интересуетесь свежими статьями на эту тему? Вступайте в группу UxJournal на Facebook


Я люблю анимацию. Именно поэтому я создал Bounce.js — инструмент и JavaScript библиотеку для создания прекрасных ключевых анимаций на CSS3. В этой статье я хочу показать, как использовать Bounce.js и некоторые принципы классической анимации, чтобы добавить анимации в ваши веб приложения. Начнем с обычной скучной анимации вылета формы регистрации 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 (по-русски Переходные интерфейсы — прим.перев).



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Принципы анимации

Посты в категории Анимация

Полное руководство по правильному использованию анимации в UX

Ольга Жолудова

8 января 2019

Посты в категории Анимация

Анимация в интерфейсах: 12 принципов UX-анимации

Ринат Шайхутдинов

26 сентября 2018

Посты в категории Анимация

Как сделать хорошую UI-анимацию отличной

Ольга Жолудова

26 июля 2018