Нещодавно натрапив на статтю про те, як автор блогу " Черговий PHP блог "Робив анимированное лого. Хочу заздалегідь попередити, що я не збираюся хвалитися більш правильним рішенням, а пояснити, що не варто робити так, як робив даний програміст. Коли я натрапив на цю статтю, я побачив GIF анімацію і вже збирався наговорити всякого на автора , однак, він використовував SVG , А це добре.
Тому, що робити лого в растровому форматі (JPG, PNG, GIF) не варто, краще в SVG (бо, пора векторної графіки йти на заміну растрової). Якщо потрібно конвертувати лого в растровий формат, вас ніхто не тримає, просто векторна графіка відображається краще і важить меньшею
Автор пояснює процес розробки лого і як він домагався мінімального розміру. Я подивився на принцип роботи анімації і зрозумів, що так робити не можна. Звичайно добре те, що він зробив лого в SVG, але робити анімаційне лого у вигляді спрайту, не є добре (в даному випадку).
посилання на лого
Як стверджує автор, він перевів SVG в SVGZ і стиснув спрайт, тим самим отримавши з 180 кб в 67 кб .. І тут він не збрехав, це дуже хороша практика. Файл дійсно важить 67 кб.
Ну ось і все - підготовча робота завершена, і тепер приступимо до анімації логотипу.
Ні, це поки тільки початок. Зараз я покажу як зробити ту ж анімацію тільки одним SVG зображенням.
Зліва, лого яке робив я, праворуч лого автора. Чесно кажучи, коли я побачив цю статтю, я не став дивитися повну версію і змалював це лого з GIF зображення на Adobe Illustrator + Sketch. Дизайнер з мене звичайно не дуже, зробив як зміг.
Я просто використовую одну SVG, для кожного зубчастого колеса я використовую свій ідентифікатор. За допомогою JS, я зробив обертання об'єкта. Звичайно є ще інші варіанти, але CSS криво прокручував ці колеса і я зробив такий варіант.
Якщо ще і стиснути цю SVG, як стискає автор то це дасть ще кращий ефект + стиснути якою-небудь утилітою.
Якщо приблизно визначити відсоток стиснення: 180/67 100 = 37% 12 37/100 = 4,44 кб
Думаю стаття вам була цікавою і ви зрозуміли як треба працювати з анімацією для лого. Я як і писав на початку, не збирався показати, що автор даного блогу вчинив неправильно. Він все робив добре, але, робити такого роду анімацію не є правильно.
