Практический online-курс

Создание анимационной ячейки в SVG графике

Что если бы я сказал вам, что существует формат изображения подобный GIF, но работает он с векторами? Что если бы я сказал, что можно изменить направление его анимации? Что если бы вы могли взять один основной образ и сделать анимацию различных его частей по отдельности, на разных скоростях? И вот, такой формат изображения уже существует – это SVG. Ему просто нужна небольшая поддержка.

 

В этой статье, я буду рассказывать вперемешку о старом и о новом, о несколько первобытном искусстве и постараюсь вдохнуть новую жизнь в него. С помощью Sass я буду упорядочивать необходимый рабочий процесс и с надеждой демонстрировать, что автоматика может иногда быть «другом» творчества.

Анимация. Стиль старой школы

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

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

Непреходящий шарм

«Делайте все руками, даже если используете компьютер.» – Хаяо Миядзаки

Studio Ghibli Хаяо Миядзаки, которая выпустила множество замечательных функций в анимацию, включая Унесенные призраками, Ходячий замок Завывания и Принцесса Мононоке, верны традиционной технике анимации ручного рисования отдельных анимационных ячеек. В отличие от CGI или ключевых кадров анимации, которые мы привыкли использовать в CSS, эти анимации по сути занимают много времени. Миядзаки известен приготовлением чанов японской лапши под названием «рамен» для своих аниматоров, так как они работают до поздней ночи, бесчисленное количество ночей подряд.


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

05-03-2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".