Даем анимации жизнь

Original author: Joel Besada
  • Translation
  • Tutorial
Я люблю анимацию. Именно поэтому была создана библиотека Bounce.js, инструмент для создания красивых анимаций. В этой статье я покажу примеры использования Bounce.js, а также некоторых классических способов анимации. Начнем со скучной формы авторизации Tictail.

1. Простота




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

.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!

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




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

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

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


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


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

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

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




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

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

.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 посвящен примерам данного эффекта.

.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— растяжение. Данный метод используется для придания тяжести и плавности объекту. Классическим примером эффекта является падающий и отскакивающий от земли мяч:



.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 {
   …
}


Я считаю, что полученная нами форма может не представлять из себя то, что Вы ожидали. Учтите, что к данному примеру можно добавлять другие эффекты и принципы.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 26

    +31
    за такой прыжок формы я бы ударил дизайнера
      +2
      Зато выглядит живо. Я вот был бы благодарен дизайнеру, если бы он мне такие штуки подсовывал, вместо скучных статичных форм.
        +2
        Всему надо знать меру. Мне кажется, что такая анимация лучше подойдёт объявлениям о акциях или уведомлениях о сообщениях. Форма авторизации — основной элемент и всегда должна быть на виду, а не выскакивать откуда-то. Попробуйте такую «штуку» заполнить со смартфона.
          0
          Я про эффект в целом, а не про конкретно форму авторизации. Это же был просто пример реализации. Само собой, что где-то этот эффект подходит лучше, где-то — хуже.
          +1
          Один раз — это ещё туда-сюда. Но если эту форму приходится открывать часто, я подозреваю, пользователь начнёт ощущать небольшой дискомфорт — хотя бы потому, что это ненужная задержка.
        +6
        Мне самый первый вариант больше всего понравился.
          +5
          … а в результате одна простая форма заставляет браузер жрать память и процессор. А когда таких форм несколько…

          Мое мнение: за использование подобного надо руки отрывать.
            +4
            Грустно, что в 14 году люди так рьяно жалуются на отжирание памяти (???) и процессора от одной галимой анимации формочки в браузере. Я всё понимаю, сам люблю всё статичное, но просто это комично.
              –2
              Любое такое… дополнение… абсолютно не ведет к улучшению функциональности или внешнего вида сайта. Зато когда у меня в браузере открыто по Н вкладок, и на какой-то из них случайно затесалось подобное поделие, жрущее все, до чего дотянется, то поиск подобного регулярно превращается в квест. Особенно такие квесты любимы пользователями ноутбуков, у которых начинают взывать вентиляторы и люди с смартфонов, у которых вообще практически вся жизнь прекращается.

              Тупо отключить нельзя (нету к сожалению еще Adblock для css извращений, а выкусывать яваскрит не всегда удается)

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

                0
                Но она же не будет прыгать перед глазами постоянно. Допустим, что на одной из страниц есть такая анимация. Тогда после ее завершения нагрузка снизится, так как форма придет в покой.
                –2
                Вы уж извините, но у меня даже гифки в статье подвесили браузер.
                  0
                  Гифок несколько, и они повторяются постоянно. На странице же после выполнения действия форма останавливается.
                  –1
                  Не знаю за чем сидят два предыдущих комментатора, а я вас поддержу.
                  У нас даже в телефонах уже по 4Гб памяти, а некоторые все еще боятся анимаций. Грустно и глупо.
                    0
                    На простое отжирание ресурсов никто не жалуется. Проблема в том, что это самое отжирание уже превысило все разумные пределы, и продолжает расти экспоненциально.
                    И не на пустом месте возникла байка про то, что Tianhe-2 изначально пытались запустить под управлением ОС Android, но столкнулись с серьёзными подтормаживаниями пользовательского интерфейса.
                    Да, на десктопах о памяти и процессорных мощностях можно особо не беспокоиться. Проблема лишь в том, что десктопы стремительно вымирают, а использование всевозможных портативных устройств превращается в настоящую пытку, когда девайс сперва скачивает ресурс с десятой попытки по «супер быстрому» 3G, на фоне которого даже Dial-up 90-х кажется недосягаемой мечтой; потом, скачав, внезапно раскаляется в руках так, что хочется сбегать за асбестовыми перчатками, и одновременно начинает дико лагать. А минут через пять оказывается, что сожрано 80% заряда батареи…
                    А потом мы узнаём, что оказывается всё это ради одной-единственной формочки, к которой разработчики прикрутили 20 фреймворков по 3Мб каждый, 3D в виде WebGL плюс трекерную музыку, которая синтезируется прямо на устройстве через WebAudio API. Ну и ещё socket.io задействован, просто чтоб уж был.
                      +1
                      С грустью смотрю на FF под W7 на компе с 4Гб оперативки, когда эта сволочь отжирает 1.8 гига… тормозит всё, даже ОС. А добавить проблемматично — криворукие инженеры acer не предусмотрели возможности добавления плашки без разбора корпуса… или так и планировалось?..
                        0
                        Грустно скорее что в 2014м году какая-то несчастная анимация формочки прилично так проседает процессор.
                          +1
                          Я думаю тут момент такой (по себе скажу): когда я был маленький и пользовал вин95, я не ставил на рабочий стол картинок даже в целях экономии памяти. Сейчас такие ньюансы, безусловно, смешны. Но. Раньше я открывал браузер, пользвоался им, а потом закрывал его (однозадачность). А сейчас с открытым браузером у меня бывает открыт и фотошоп и IDE и все остальное. И, если я открыл какой-то сайт в поисках чего-то, я не хочу чтобы оно жрало память, т.к. она и так нужна на более нужные вещи. И дело тут не в объеме памяти, а в многозадачности, которую этот самый 14й год мне предоставляет. Немного сумбурно, но, думаю, моя мысль ясна. Я лично на недостаток памяти (или на трафик) не жалусь, но всегда с пониманием отношусь к тем, для кого это важно. В этом нет ничего удивительного.
                        +1
                        И простите за еще один комментарий. Учите физику/биологию: мячик перед ударом так не деформируется. Подобное свойственно только животным/человеку.
                          +3
                          Анимация в понятиях Уолта Диснея и реализм — это не связанные между собой понятия. И мячик тут анимирован именно в диснеевских понятиях. И еще — если вы отскакивающий шарик снимете на видео, вы с удивлением обнаружите, что он деформируется перед ударом почти так же, как тут нарисовано, только это деформация не самого шара, а его размазывание от эффекта motion blur
                            +2
                            Для такого вывода нужны входные данные. Нужно знать плотность мяча, скорость его полета перед падением и т.д.
                            Вы же говорите так, словно это невозможно:
                            Мяч для игры в гольф
                            Шарики с водой
                            Футбольный мяч (о лицо, но суть ясна)
                            0
                            А мне нравится анимация и оригинал я читал пару дней назад, разбирался что да как. Мне ужасно не понравился размер сгенеренного css, все трансформации сделаны с помощью matrix3d. Откройте пример по сложнее (road runner например) и увдите пару сотен строк нагенеренного кода. Всю «красоту» испортил размер.
                                0
                                Хотя подобные эффекты сейчас действительно не в тренде,
                                Нужно признать что библиотека очень крута и удобна. Спасибо за информацию.

                                А вот нравится не нравится — это дело вкуса.

                                Особенно приятно то, как это все сделано на официальной странице bouncejs.com
                                  0
                                  Это все занятно, но важно не тыкать этим делом куда попало. Для себя отметил, что анимация должна не просто быть, а что-то доносить собой. Иногда можно увлечься, и тогда начинается разработка ради разработки. Каша. Плюс, она (анимация) должна быть короткой: более секунды — смерть.
                                    0
                                    Для тех, кто интересуется анимацией, рекомендую также посмотреть velocity js — довольно удобный плагин для jquery (кстати, собираются отказаться от jquery и добавить поддержку zepto)
                                      0
                                      Что интересно, если перейти на страницу логина на сайте указанном в статье ( tictail.com/user/signin ), то никакой анимации нет.

                                      Only users with full accounts can post comments. Log in, please.