Нядаўна наткнуўся на артыкул пра тое, як аўтар блога " Чарговы 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 кб
Думаю артыкул вам была цікавай і вы зразумелі як трэба працаваць з анімацыяй для лога. Я як і пісаў у пачатку, не збіраўся паказаць, што аўтар дадзенага блога паступіў няправільна. Ён усё рабіў добра, але, рабіць такога роду анімацыю не ёсць правільна.
