Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. Создание анимационной ячейки в SVG графике

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

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

 

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

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

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

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

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

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

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


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

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний