Я люблю анимацию. Именно поэтому была создана библиотека Bounce.js ^[1], инструмент для создания красивых анимаций. В этой статье я покажу примеры использования Bounce.js, а также некоторых классических способов анимации. Начнем со скучной формы авторизации Tictail ^[2].

1. Простота

Первый пример — простая CSS3 анимация ^[3] с двумя ключами:

.form {
   animation: form-fly-up 0.35s ease;
}

@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   100% { transform: translateY(0); }
}

Здесь я использую функцию, замедляющую появление формы в конце ее движения. Наверное, данный пример является самым простым, который можно создать, да и не очень красивой. Движения формы выглядят неестественными и ненатуральными (что, по сути, одно и то же :) ).

2. Отскок назад

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

.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 ^[1]!

3.  Физика движений

Здесь я использовал анимацию ^[4], которую сгенерировал Bounce.js. Возможно, это покажется легким, но оно всяко лучше и приятнее в визуальном представлении!

.form {
   animation: form-fly-up 1s linear;
}

/* Сделано с Bounce.js. Просмотрите тут: http://goo.gl/AUAzKV */ 
@keyframes form-fly-up {
   …
}

IЯ использую стандартный скачок, который основан на упрощенной модели вибрации ^[5].

---

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

Двенадцать принципов анимации Disney ^[6] — это набор принципов создания более реалистичных движений в анимации, основанный лучшими аниматорами Disney в золотую эпоху кино ^[7]. Эти принципы были описаны в Иллюзии жизни: Анимация Disney что является основой современной анимации. Давайте попробуем освоить некоторые принципы и применить их на прктике.

4.  Завершение и повтор

Завершение и повтор ^[8] — две связанные техники, позволяющие создать ощущение соблюдения законов физики. Они показывают, что разные части объекта могут двигаться с разной скоростью и замедляться по-разному.

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

.form {
   animation: form-fly-up 1s linear;
}

.button {
   animation: button-bounce 1s 0.12s linear;
}

/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/TvjpS6 */
@keyframes form-fly-up {
   …
}

/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}

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

5. Анимация капли

В данном примере мы создадим эффект размытости. Данный принцип не является диснеевским, но он активно применялся в анимации рисованых мультфильмов. Этот блог в Tumblr ^[9] посвящен примерам данного эффекта.

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1s linear;
}

.button {
   animation: button-bounce 1s 0.12s linear;
}

/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/dvi8wI */
@keyframes form-fly-up {
   …
}

/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}

Итог. Растяжение

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

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1.29s linear;
}

.button {
   animation: button-bounce 1s 0.12s linear;
}

/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/G1h7Qa */
@keyframes form-fly-up {
   …
}

/* Сделано в Bounce.js. Смотрите здесь: http://goo.gl/sNmGrx */
@keyframes button-bounce {
   …
}

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

Автор: alexandfox

Источник ^[11]