Niedawno natknąłem się na artykuł o tym, jak autor bloga ” Kolejny blog PHP „Zrobiłem animowane logo. Chcę cię ostrzec z wyprzedzeniem, że nie będę przechwalać się lepszym rozwiązaniem, ale wyjaśnić, że nie powinieneś robić tego, co zrobił ten programista. Kiedy natknąłem się na ten artykuł, zobaczyłem animację GIF i już zamierzałem powiedzieć wszystkim jakkolwiek użył Svg i to jest dobre.
Ponieważ nie warto robić logo w formacie rastrowym (JPG, PNG, GIF), lepiej jest w SVG (czas, aby przejść do zastąpienia grafiki wektorowej rastrowej). Jeśli chcesz przekonwertować logo na format rastrowy, nikt Cię nie trzyma, tylko grafiki wektorowe są wyświetlane lepiej i ważą mniej
Autor wyjaśnia proces tworzenia logo i sposób, w jaki osiągnął minimalny rozmiar. Przyjrzałem się zasadzie animacji i zdałem sobie sprawę, że nie można tego zrobić. Oczywiście dobrze, że zrobił logo w SVG, ale nie jest dobrze tworzyć animowane logo w formie ikonki (w tym przypadku).
link do logo
Według autora, przeniósł SVG do SVGZ i ścisnął duszek, uzyskując w ten sposób od 67 kb w 67 kb .. A potem nie kłamał, to bardzo dobra praktyka. Plik naprawdę waży 67 kb.
Cóż, to wszystko - prace przygotowawcze są zakończone, a teraz przystępujemy do animacji logo.
Nie, to dopiero początek. Teraz pokażę, jak wykonać tę samą animację za pomocą jednego obrazu SVG.
Po lewej stronie logo, które zrobiłem po prawej stronie logo autora. Szczerze mówiąc, kiedy zobaczyłem ten artykuł, nie oglądałem pełnej wersji i skopiowałem to logo z obrazami GIF w Adobe Illustrator + Sketch. Projektant mnie z pewnością nie jest taki gorący, zrobił to, co mógł.
Używam tylko jednego SVG, dla każdego koła zębatego używam mojego identyfikatora. Używając JS, wykonałem obrót obiektu. Oczywiście są inne opcje, ale CSS zakrzywił te koła krzywo i zrobiłem tę opcję.
Jeśli skompresujesz ten SVG, tak jak autor ściśnie, da to jeszcze lepszy efekt + kompres z pewną użytecznością.
Jeśli w przybliżeniu określimy procent kompresji: 180/67 100 = 37% 12 37/100 = 4,44 kb
Myślę, że artykuł był dla ciebie interesujący i zrozumiałeś, jak pracować z animacją dla logo. Jak pisałem na początku, nie zamierzałem pokazać, że autor tego bloga zrobił źle. Zrobił wszystko dobrze, ale wykonywanie tego rodzaju animacji jest nieprawidłowe.
