От автора: раньше было так: дизайнеры занимались дизайном, кодеры занимались кодом. Все просто. Но когда появились переходы и анимация CSS , эти границы начали немного размываться. Дизайнеры больше не могут просто заниматься дизайном, а кодеры писать код – теперь в целях эффективности сотрудничества первые должны немного разбираться в коде, а вторые – в дизайне.
Допустим, дизайнер просит разработчика сделать блок, который подпрыгивает. И все – никаких инструкций больше не дает. Без каких-либо смежных знаний и понимания терминологии у обоих сторон, коммуникация не удастся: разработчику не хватит информации, чтобы полностью понять видение дизайнера, а тот, в свою очередь, не будет знать о существующих вариантах и как их оценить. Имея только базовые представления, можно получить что-то типа этого:
Не впечатляет. Хотя, если честно, этот пример удовлетворяет всем исходным критериям. Впрочем, мы можем сделать и лучше.
Первая вещь, которую следует принять во внимание, это функция управления временем. В вышеуказанном примере мы используем линейную функцию управления временем, то есть блок движется с одинаковой скоростью. В некоторых случаях такое подходит, но в реальном мире все происходит по-другому.
Давайте сделаем движение немного более плавным. Таким образом начало и конец анимации будет осуществляться немного медленнее, чем средняя часть, так анимация будет выглядеть более естественно. Давайте теперь посмотрим на блок:
Уже немного лучше, но работы еще много. Блок все еще выглядит как-то неестественно и неуклюже, повторяясь с одним и тем же интервалом снова и снова. Если мы добавим небольшую задержку между прыжками, то получим некий визуальный контраст, и это придаст анимации больше естественности:
Tеперь видно, что блок прыгает, а не просто двигается вверх и вниз. Прыжок вверх более пружинистый, а возвращение вниз мягкое, как бы и делало живое существо. Даже несмотря на то, что мы никогда не видели прыгающих блоков, мы имеем представление того, как выглядят прыгающие существа. Анимация выглядит естественнее, когда мы имитируем естественные вещи. Но можно пойти еще дальше и сделать прыжок вверх более «тяжелым».
Если вы смотрите мультики, то заметили, что естественные движения там часто преувеличенные, немного пародирующие настоящую жизнь. Если это сделано качественно, то мы воспринимаем такую анимацию как что-то вполне обычное, реальное, но при том и с добавлением шарма и особенностей характера персонажей.
На этом этапе необходимо сотрудничество дизайнера и разработчика, но многие дизайнеры даже не подозревают, что такие варианты существуют. Очень часто именно разработчик решает предложить их дизайнеру. Благодаря легкому искривлению размеров анимации, она преображается на наших глазах:
Теперь блок ожил. Можно подправить еще много чего, но, в любом случае, мы уже зашли намного дальше изначальных инструкций – в лучшую сторону! Предлагаю пойти еще дальше и сделать так, чтобы блок немного отпружинивал в конце прыжка:
Благодаря второму подпрыгиванию, анимация стала еще живее, но чего-то все-таки не хватает. Прыжок выглядит скованно. Нужно добавить еще один вид искривления, похожий на то, как мы тянемся вверх при прыжке:
Это небольшое искривление в конце делает отпружинивание более реалистичным. В общем, разница этого примера с самым вариантом первым впечатляет. Скорее всего, последняя анимация – это как раз то, что нам нужно, но существует еще один прием, он называется кривая Безье:
Добиться такого уровня анимации невозможно, если ни дизайнер, ни разработчик не разбираются в основных принципах и методах управления анимацией. В этой статье затронута только верхушку айсберга. Если вы являетесь веб-дизайнером или веб-разработчиком, я настоятельно рекомендую изучать обе области знаний.
Что касается принципов анимации, я советую прочитать книгу Иллюзия жизни: Анимация Диснея, написанную Олли Джонсоном и Фрэнком Томасом, она поможет вам создавать более реалистичную анимацию. Благодаря тому, что она написана простым языком, это облегчает коммуникацию и сотрудничество между дизайнером и разработчиком.
Если говорить о техническом управлении и вариантах CSS анимаций, тут возможностям нет предела. Такие вещи как задержка и управление временем очень легко адаптируются. Если вам не нравится стандартная функция плавности, вы легко можете создать новую при помощи cubic-bezier(). Кроме этого, можно изменить уровень искривления анимации. Очень важно чтобы как дизайнер, так и разработчик задумывались о таких возможностях, а не слепо принимали все без адаптации. Если делиться знаниями и работать сообща, любую простую анимацию можно превратить в шедевр.
Автор: Brandon Gregory
Источник: https://css-tricks.com/
Редакция: Команда webformyself.