Pomocou SVG. Prehľad softvéru na prácu s grafikou SVG

Zistili sme, aké typy obrázkov sú a aké súbory, a dozvedeli sme sa, že pre nakreslené video bol vytvorený špeciálny súbor svg.

Je ťažké ho nájsť na internete, pretože je vytvorený v určitých programoch a je nimi otvorený a vyzerá takto:

Tento súbor, ako som povedal v predchádzajúcom článku, bol vytvorený pre programy na kreslenie videa. Vďaka tomu je ručne kreslené video ešte atraktívnejšie.

Súbor umožňuje kresliť s kontúrami aj kresliť bez kontúr.

Napríklad kreslenie súboru PNG v programe a kreslenie bez obrysov pomocou súboru SVG:

A v tomto príklade uvidíte, ako súbor vyzerá a je nakreslený pomocou súboru SVG s obrysmi vytvorenými pomocou vektorovej rasterizácie v programe Inscrabe,

Nesúďte prísne, keďže išlo o súdny proces. V tomto programe môžete robiť lepšiu grafiku. Toto bol môj prvý pokus, ale chcem, aby ste pochopili, že rastrový obrázok je vždy jasnejší a farebnejší.

Funguje dobre na rastrovanie obrázkov s ostrejším obrysom do vektorovej grafiky.

Na vytváranie týchto súborov existuje veľa programov, grafických editorov, platených aj bezplatných. Existujú prenosné, ktoré nevyžadujú sťahovanie na pevný disk, ale existujú aj online stránky.

Stránka, ktorá pomôže s prevodom na akýkoľvek súbor, ale funguje iba čiernobielo:

Sťahovanie sa spustí automaticky, ale váš antivírus vám môže povedať, že tento druh súboru je pre váš počítač nebezpečný. Môj antivírus nadáva na všetky vzácne súbory.

Druhá online stránka, ktorú som našiel na internete

Táto stránka je trochu zložitejšia a zobrazuje súbory farebne. Navyše si môžete sami zvoliť počet farieb. A na tejto stránke môžete urobiť rovnaký svg na vytvorenie obrázka bez obrysov. Odporúčam vám nahrať stránku na Google a urobiť preklad, keďže je to angličtina, ale môžete na to prísť.

Pri online stránkach je myslím všetko jasné, poďme sa pozrieť, čo z programov nájdeme.

Adobe Illustrator je jedným z najrozšírenejších a najznámejších editorov. Je platený, ale nič sa nedá, dá sa nájsť aj zadarmo a aj v ruštine. A tiež o práci s ním existuje nespočetné množstvo lekcií, kurzov, bezplatných aj platených.

Súbory v ňom vyrobené sú kvalitné a perfektne spolupracujú s programom Explaindio

Z celého zoznamu je len Inscape bezplatný grafický editor. Nie je to zlý analóg takého programu ako Adobe Illustrator.

Poviem vám pravdu v Coreli, neskúšal som pracovať.

Vo vektorovej mágii môžete previesť akýkoľvek obrázok na iné súbory, je to skôr konvertor ako editor. Ale nie dosť zlé.

Tu sme s vami a zoznámili sme sa so súborom SVG. Nový súbor, ktorý sa objavil až začiatkom roku 2000, ale s istotou začína zaujímať svoje miesto medzi webovými vývojármi a dizajnérmi.

Čakám ťa u mňa. Dobudúcna.

S úctou, Valentina Dudničenko.

Príprava SVG na použitie na webe je veľmi jednoduchý proces, ktorý nie je komplikovanejší ako export JPEG alebo PNG. Použite akýkoľvek grafický editor, ktorý poznáte (Illustrator, Sketch, Inkscape [zadarmo] a podobne [alebo dokonca Photoshop, ak používate vrstvy s tvarmi]) s veľkosťou obrázka, ktorú plánujete použiť. Zvyčajne pracujem v Illustratore, takže vysvetlím niektoré spôsoby prípravy súborov v tomto programe, ale vo všeobecnosti sú použiteľné v akomkoľvek inom programe. Možno budete chcieť previesť text na krivky, pretože písmo sa s najväčšou pravdepodobnosťou zobrazí nesprávne, pokiaľ samozrejme neplánujete upraviť ho podľa webového písma použitého na stránke (čo je možné!). Tiež by ste nemali meniť všetky objekty do jedného tvaru, najmä ak máte ťah, ktorý bude potrebné kontrolovať na stránke, najmä preto, že transformácia objektov často nezníži veľkosť súboru. Akékoľvek názvy priradené skupinám alebo vrstvám sa pridajú do SVG ako ID prvku. To je celkom praktické pri úprave štýlu, ale mierne zväčší celkovú veľkosť súboru.

Pred exportom musíte skontrolovať, či sú všetky obrázky v celočíselnej pixelovej mriežke (teda napríklad nie 23,3px × 86,8px). V opačnom prípade bude obrázok s najväčšou pravdepodobnosťou nečistý a časť obrázka bude orezaná. V Illustratore to môžete urobiť takto: Objekt> Umelecké plátna> Prispôsobiť hraniciam umeleckého diela. Potom stlačte Uložiť ako a vyberte SVG a ponechajte predvolené nastavenia. Môžete tu urobiť malú optimalizáciu, ale naozaj to nestojí za to, keďže rôzne triky na vylepšenie použijeme neskôr, takže na tieto nastavenia zatiaľ nestrácame čas.

Techniky na zníženie veľkosti súborov.

(Pozri o optimalizácii)

Na dosiahnutie najmenšej veľkosti SVG by bolo logické odstrániť z neho všetky nepotrebné. Najznámejší a najužitočnejší program (aspoň si to myslím) na prácu so SVG je SVGO. Odstráni všetok nepotrebný kód. Ale! Pri používaní tohto programu buďte opatrní, ak plánujete manipulovať so SVG pomocou CSS / JS, pretože môže príliš vyčistiť kód a sťažiť ďalšie zmeny. Výhodou SVGO je aj to, že ho možno zahrnúť do procesu automatického zostavovania projektu, ale môžete ho aj použiť GUI Ak chceš.

Pochopenie podrobnejšie so správnym odstránením všetkých nepotrebných, môžeme urobiť niečo iné v grafickom editore. Najprv sa musíte uistiť, že používate čo najmenej ciest/tvarov, ako aj bodov na týchto cestách. Všetko, čo sa dá zjednodušiť, sa dá kombinovať a zjednodušovať a prípadné zbytočné bodky sa dajú odstrániť. Illustrator má zásuvný modul VectorScribe s nástrojom Smart Remove Brush Tool, ktorý vám pomôže odstrániť body, pričom celkový tvar zostane rovnaký.

Predoptimalizácia

Nástroj Smart Remove Brush Tool odstránil body

Ďalej obrázok zväčšíme. V Illustratore je praktické zapnúť Zobraziť> Náhľad v pixeloch a skontrolovať, ako sú cesty umiestnené. Umiestnenie ciest na mriežku zaberie trochu času, ale toto úsilie sa vyplatí a umožní vám dosiahnuť ostrejšie vykreslenie (je lepšie venovať tomu pozornosť vopred).

Body mimo mriežky

Zarovnať na mriežku

Ak existujú dva alebo viac objektov na zarovnanie, potom stojí za to odstrániť všetky zbytočné prekrytia. Niekedy, aj keď sú obrysy starostlivo zarovnané, môže byť viditeľná tenká biela čiara. Aby ste tomu zabránili, môžete predmety trochu prekrývať cez seba. Dôležité: v SVG má z-index určité poradie, ktoré závisí od objektu umiestneného v spodnej časti, preto sa oplatí umiestniť horný objekt na spodok súboru v kóde.

A nakoniec, v neposlednom rade, niečo, na čo sa zvyčajne zabúda, je povoliť gzip kompresiu SVG na vašom webe v súbore .htaccess.

AddType image / svg + xml svg svgz AddOutputFilterByType DEFLATE "image / svg + xml" \ "text / css" \ "text / html" \ "text / javascript" ... atď

Ako príklad efektívnosti tejto techniky použijem pôvodné logo Breaking Borders a optimalizujem ho takto: zväčšiť veľkosť na to, čo by malo byť; dám do poriadku kontúry; vymazať čo najviac bodov; posunúť bod o celé číslo pixelov; Presuniem všetky prekrývajúce sa oblasti a pošlem to všetko do SVGO.

Originál: 1 413b

Po optimalizácii: 409b

V dôsledku toho sa veľkosť súboru zmenšila ~ o 71 % (a ~ 83 % s kompresiou)

Pri vytváraní ručne nakresleného videa v Sparkol VideoScribe vyvstáva otázka: kde môžem získať alebo ako vytvoriť obrázky SVG sám a v akom programe?

Zistite, kde si môžete zadarmo stiahnuť obrázky SVG. Získajte informácie o grafických programoch, ktoré môžete použiť na vytváranie obrázkov SVG sami.

G

Tu sú dve z najlepších služieb, kde si môžete zadarmo stiahnuť obrázky SVG. Prvý: pixabay.com - má podporu pre ruský jazyk. Registrácia bude potrebná (rýchla), ale je najpohodlnejšia a najlepšia z hľadiska výberu obrázkov.

Obrázky sú vhodne rozdelené podľa tém: ľudia, obchod, medicína, technika atď. čo treba urobiť? Vyberte formát "Vektory" a priehľadné pozadie, môžete si vybrať aj čiernobielu farbu obrázkov:

Je to jednoduché. Ďalšou službou, kde si môžete zadarmo stiahnuť SVG obrázky, je openclipart.org. Netreba sa tam ani registrovať.

Ale čo ak chcete originálne obrázky SVG? Môžete si ich vyrobiť sami, aj keď neviete, ako kresliť.

Ako vytvoriť obrázky SVG sami

Po prvé, stojí za zmienku, že formát SVG je vektorová grafika. Tí, čo vedia kresliť, používajú grafické tablety – digitizéry. Najznámejším výrobcom je Wacom. Majú obrazovku a pero, ktorým kreslia počítačovú grafiku.

Ale čo tí, ktorí nemajú zručnosti kreslenia? A kresliť sa nedá ani myšou.

Existuje niekoľko grafických programov, ktoré môžete použiť na vykreslenie obrázkov SVG sami. Ide o editory vektorovej grafiky, napríklad: CorelDraw, Adobe Illustrator, Sketsa SVG Editor a niektoré ďalšie. My sa však pozrieme na vytvorenie SVG obrázku v bezplatnom vektorovom editore Inkscape (inkscape.org) – ktorý funguje pre akýkoľvek OS.

Inkscape je navrhnutý špeciálne pre prácu s grafickým formátom SVG. Podporuje konverziu SVG na PNG a naopak: umožňuje previesť niektoré grafické formáty do SVG. Ale! Takéto obrázky SVG nebudú vykreslené vo VideoScribe. Ale existuje cesta von!

Nebudem popisovať všetky výhody editora Inkscape. Pozastavím sa však pri vyrezávaní uzlov – unikátnej funkcii Inkscape, ktorá nás zaujíma. Zjednodušene to znamená: môžeme opakovať akúkoľvek kontúru obrazu, bez ohľadu na to, ako zakrivené sú čiary tejto kontúry.

V praxi to znamená: pomocou ďalšej priesvitnej vrstvy ľahko prekreslíme akýkoľvek obrázok – ako cez pauzovací papier! A ak je to potrebné, namaľte - vyplňte uzavreté obrysy obrázka akoukoľvek farbou.

Na to potrebujeme akýkoľvek vektorový obrázok, najlepšie s jasnými obrysmi. Otvoríme ho v programe, upravíme veľkosť tak, aby sa s ním pohodlne pracovalo:

Obr. Pracovné okno a nástroje Inkscape:
1 - Výber (F1);
2 - Úprava uzlov obrysu alebo pák uzlov (F2);
3 - Mierka (F4);
4 - Kreslenie Bézierových kriviek a priamych čiar (Shift + F6).

Vytvorte ďalšiu vrstvu: Shift + Ctrl + N ("Vrstva - Nová vrstva"). Otvorením panelu - Shift + Ctrl + L ("Vrstva - Vrstvy") upravte nepriehľadnosť prvej vrstvy tak, aby dobre presvitala pod druhou vrstvou:

Znova vyberte druhú vrstvu, čím sa stane pracovnou vrstvou, a vyberte nástroj na kreslenie kriviek a rovných čiar (obr. 1-4). S jej pomocou však zopakujeme obrysovú čiaru na druhej vrstve:

Dvojité kliknutie preruší kreslenie čiary na presnom mieste.

Pomocou nástroja (obr. 1-2) jednoducho potiahneme páčky (priamky segment) k obrysu obrázku:

Tu prichádza na scénu veľká sila Inkscape. Miernym pohybom kurzora doľava alebo doprava rýchlo dosiahneme presné zopakovanie zadaného obrysu. Ohyb môže byť akýkoľvek vydutie. V prípade potreby je možné použiť rovnaký nástroj (obr. 1-2) na posunutie uzlov - pre presnejšie nastavenie ich polohy.

Teraz zostáva zopakovať túto operáciu požadovaný počet krát. Ak chcete nakresliť malé detaily, jednoducho zväčšite mierku (obr. 1-3) obrázka presunutím požadovanej oblasti do stredu pracovného okna.

Stále je potrebné niečo objasniť. Ak chcete nastaviť hrúbku alebo farbu čiary, použite: Shift + Ctrl + F ("Objekt - Výplň a ťah"):

Pri otvorení nového obrázka program zobrazí obdĺžnikový rám, ktorý sa nie vždy zhoduje so samotným obrázkom. Dá sa odstrániť takto - prejdite na Shift + Ctrl + D ("Súbor - Vlastnosti dokumentu") - potom zrušte začiarknutie políčka "Zobraziť okraj plátna":

Všetko. Odstráňte prvú, už nepotrebnú vrstvu, a uložte obrázok: Shift + Ctrl + S ("Súbor - Uložiť ako"), pričom vyberte typ súboru: .svg.

Ešte jeden malý detail. Prieskumník Windows nezobrazuje miniatúry (ukážky) grafických súborov SVG. Pre pohodlie je rozumné urobiť to, čo urobili vývojári Sparkol VideoScribe. Vytvorte malú veľkosť, asi 100 px na šírku alebo výšku (samotné obrázky SVG nemajú veľkosť), kópie nových obrázkov a exportujte ich vo formáte PNG. To sa robí v Inkscape: "Súbor - Export do PNG". Uložte ich do rovnakého priečinka pod rovnakým názvom ako ich „kópie SVG“.

Ale ak máte Windows 7, potom máte šťastie. Vyhľadajte na internete bezplatné rozšírenie pre Windows Explorer, tu je jeho presný názov: „SVG Viewer Extension for Windows Explorer“. Umožňuje vám zobraziť súbory SVG ako miniatúry. Nevhodné pre Windows XP.

Dnes si povieme niečo o SVG, aký je to formát, čím sa žerie a či sa ho oplatí používať. Aj keď tento formát nie je príliš nový, svoju popularitu si získal vďaka svojmu zavedeniu. Podporu pre tento formát už dostali všetky najnovšie verzie prehliadačov.

Prečo je taký populárny? A čím sa vlastne líši od ostatných? Dnes odpovieme na tieto otázky a tiež vám povieme, čo potrebujete vedieť, aby ste mohli začať s týmito typmi súborov.

čo je SVG?

SVG je skratka pre Scalable Vector Graphics - vektorový formát pre webových vývojárov. Tento typ formátu sa stal tak populárnym, pretože jeho obrázky je možné zobraziť vo vysokom rozlíšení bez straty kvality, pretože SVG je vektorový formát.

Impulz pre vývoj tohto jazykového označenia ako prvý dalo World Wide Web Consortium, ktoré bolo v roku 1999 známejšie ako W3C. W3C dalo koncept SVG, jazykového označenia na vytváranie 2D grafických rozhraní a obrázkov.

Praktické využitie

Čo robí SVG tak populárnym a prečo ho začína používať čoraz viac dizajnérov? Je to veľmi jednoduché, funguje to tak, ako má.

SVG je v porovnaní s inými formátmi ľahký. Tento formát má neuveriteľné možnosti. Vlajky, symboly, prvky rozhrania. A toto je len malý zoznam toho, ako ho môžete použiť. Najväčšie plus jeho použitia je, že ide o vektorový formát, čiže ho možno použiť na akomkoľvek displeji – bez ohľadu na ich rozlíšenie, všade sa zobrazí rovnako.

Súbory SVG sa pomerne ľahko spravujú, pretože ich súbory sa ukladajú ako statický obrázok. Svoju webovú stránku môžete pridať k interaktivite vytvorením veľmi jednoduchých, ale krásnych animácií pomocou SVG.

Niekoľko príkladov, kde sa dá použiť:

• Logá
• Obrázok na pozadí
• Použite ako tlačidlá
• karty
• Diagramy alebo obrázky

SVG sa spravidla najčastejšie používa pri tvorbe responzívnych webov, animácií a iných dynamických efektov.

Výhody používania SVG

Prečo sa teda vzdať obvyklého formátu JPG alebo GIF v prospech SVG? Existuje mnoho dôvodov, prečo by ste ho mali stále používať vo svojom projekte.

• SVG je vektorový formát, a preto sa ho oplatí použiť na responzívne stránky, kde veľkosť obrázka závisí od rozlíšenia displeja používateľa a SVG dokonale sedí.
• Obrázky SVG používajú XML na definovanie svojich vlastností, a preto majú schopnosť ešte viac komprimovať.
• S obrázkami SVG sa veľmi ľahko manipuluje a to otvára ešte viac možností pre dizajnérov, ktorí môžu meniť farby, pridávať tiene, filtre, rozmazávať a mnoho ďalších efektov.
• SVG je celkom ľahké pochopiť
• SVG pracuje s otvorenými webovými štandardmi
• Na vytvorenie SVG môžete použiť bežný editor textového kódu. To vám dáva určitú slobodu konania, všetko závisí od vašich potrieb a úrovne odborných znalostí v tejto oblasti.

Nevýhody používania SVG

Pravdepodobne ste prekvapení, koľko výhod má SVG. A možno si mysleli, že nemá žiadne nevýhody. Ale nie, určite ich je pár a tu sú niektoré z nich:

• Žiadna podpora pre staršie prehliadače, ako je Explorer 8 a nižšie.
• SVG nie je možné použiť na fotografiách, keďže ide o vektorový formát a používa sa na vytváranie rôznych tvarov a čiar.

Čo bude ďalej?

Budúcnosť SVG sa práve začína. Ako akceptovaný obrazový formát (a štandard) pre mobilné zariadenia bude SVG naďalej získavať na popularite.

Tvorba a programovanie komplexných SVG animácií pre webové stránky, mobilné aplikácie a interaktívne projekty. Ako zlepšiť použiteľnosť rozhraní a vytvoriť úžasný efekt.

Čo je SVG

SVG je dvojrozmerná vektorová grafika, doslova „škálovateľná vektorová grafika“, a predsa je to textový formát, ktorý možno ľahko upravovať v poznámkovom bloku alebo jednoducho kresliť vo vektorových editoroch: Adobe Illustrator, CorelDRAW, Adobe Fireworks, Incscape, SVG-Edit Online , ConceptDraw PRO a ďalšie.

Skutočný vývoj SVG začal s verziou 1.1, ktorú vydala W3C v roku 2011. Vylepšená verzia 2.0, lepšia ako Flash, má byť oznámená v roku 2017. Vďaka značkovaciemu jazyku XML ho možno jednoducho vložiť do dokumentu HTML.

Objekty SVG sa nelíšia od štandardných v grafických editoroch.

Abstrahujme od hudobných metafor a prejdime si niekoľko základných kompozičných tipov. Uistite sa, že:

Čiary a prerušované čiary

Polygóny

Kruhy a elipsy

Bezierove krivky

Komplexné kontúry

SVG, ako každý formát založený na XML, umožňuje použiť na jeho spracovanie transformačné tabuľky (XSLT). Transformáciou údajov XML na SVG pomocou jednoduchého XSL môžete získať grafické znázornenie textových údajov, napríklad vizualizovať grafy, koláčové grafy, stĺpcové grafy

SVG pre desktop

SVG nestráca kvalitu pri škálovaní a nezávisí od rozlíšenia obrazovky

Vzhľadom na skutočnosť, že informácie o objekte sú uložené v popisnej forme, môžete pri výstupe do grafického zariadenia nekonečne zvyšovať grafické primitíva

Množstvo údajov, ktoré zaberá popisná časť, nezávisí od skutočnej veľkosti objektu, čo umožňuje s použitím minimálneho množstva informácií opísať ľubovoľne veľký objekt súborom minimálnej veľkosti. Napríklad na opísanie kruhu s ľubovoľným polomerom sú potrebné iba 3 čísla, nepočítajúc atribúty.

Prítomnosť priehľadného pozadia

SVG pre mobil

SVG vyzerá dobre bez straty kvality na mobile a tablete

SVG často vážia oveľa menej ako bitmapy

CSS3 a JavaScript možno použiť na zmenu štýlov a atribútov prvkov SVG

SVG je ideálny pre vizuálnu komunikáciu a interakcie mikroužívateľov na mobilnom zariadení

Animácia založená na SVG

Prítomnosť priehľadného pozadia

Jednoduché vytváranie a úprava

Prispôsobiteľné kompresii a optimalizácii gzip bez straty kvality

Maximálne využitie SVG

Pozor

So zvyšujúcim sa počtom jemných detailov na obrázku rastie aj veľkosť súboru SVG. Jednoduchšie použitie jpeg alebo dokonca png. Napríklad obrázok trávy vo vektore môže vážiť 10 MB a rovnaký obrázok vo formáte jpg bude vážiť 200 Kb.

Ako pracovať s SVG. Čo potrebujete vedieť teoreticky?

Štruktúra dokumentu SVG v samostatnom súbore.

Pre úplnú animáciu použijeme iba vložené SVG vkladanie.

Minimálna sada na vloženie do html:

viewBox = "x y šírka výška" - definuje vlastný výrez

Môžete použiť analóg spritov, keď sú všetky ikony v jednom súbore a iba tá, ktorú potrebujete, je zobrazená s rozsahom.

Na úpravu pomeru strán obrázka je potrebné zarovnanie s parametrom protectAspectRatio

Os X vo výreze:

xMin - ľavý okraj výrezu

xMid - stred osi X

xMax - pravý okraj výrezu

Os Y vo výreze:

YMin - navrchu

YMid-centrovaný

YMax - v spodnej časti

spĺňať – označuje, že obrázok by si mal zachovať pomer strán a mal by byť plne viditeľný (analógová veľkosť pozadia CSS: obsahuje;)

výrez – označuje, že obrázok by si mal zachovať pomer strán a bude upravený podľa maximálnej hodnoty ohraničenia výrezu (analógová veľkosť pozadia CSS: obal;)

none – znamená, že vnútorný obrázok stratí pomer strán a použije pomer strán viewBoxu.

Základné primitívy SVG

Nebudem zachádzať do podrobností (téma na samostatný článok), ich popis nájdete v štandarde W3C https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#RectElement

A nás najviac zaujíma značka, pretože vám umožňuje ovládať akýkoľvek bod a bézierové krivky na ceste. O tom bude reč nižšie v praktickom bloku. Je dôležité vedieť, že existuje niekoľko modelov na vykresľovanie kriviek:

• hladká krivka (S, s)

  kvadratická Bezierova krivka (Q, q)

  hladká kvadratická Bezierova krivka (T, t)

  eliptický oblúk (A, a)

Mojou úlohou je podať materiál čo najjednoduchšie, preto ďakujem Petrovi Collingridgeovi za názorné príklady http://www.petercollingridge.co.uk/svg-tutorial/paths.

Podľa skúseností firmy poviem, že je jednoduchšie pracovať s absolútnymi súradnicami bodov.

Klonovanie objektov pomocou značiek a

Mali sme projekt, ktorý používal veľa rovnakých typov ikon s množstvom farebných odtieňov. Problém bol vyriešený vytvorením globálneho inline-SVG pre všetky stránky s mnohými premennými ... Použité stránky na správnych miestach ... CSS použil farbu use.green (vyplňte: # ADFF2F;).

Prechody

Ako pracovať s SVG. Čo potrebujete vedieť v praxi?

Var s = Snap ("# svg"); // zober si na stranku pripraveny svg alebo vytvor novy s = Snap (800, 600); // nakreslíme novú cestu var p = s.path ("M10-5-10,15M15,0,0,15M0-5-20,15"). attr ((fill: "none", tah: "# bada55" " , šírka zdvihu: 5));

Podstatou animácie je plynulý prechod z počiatočnej polohy do koncovej polohy. Tu je podrobný návod, ako vytvoriť animáciu SVG.

Možnosť vložiť SVG do HTML dáva výhodu manipulácie s prvkami SVG a ich atribútmi pomocou JS. Obrázky nižšie ukazujú, že sa dostaneme nielen k samotným bodom, ale aj k bézierovým krivkám.

Každý grafický editor schopný pracovať s vektorovou grafikou má panel cesty.

S jeho pomocou zvládneme body a bézierove krivky.

Našou úlohou je nakresliť počiatočnú a koncovú polohu kriviek. Popíšte animáciu na html stránke pomocou Javascriptu.

Vizuálne označte trajektóriu budúcej animácie

Ako vidíte, všetko je jednoduché! Matice afinnej transformácie neboli potrebné :)

Ako používať SVG na animáciu, interaktivitu a mikrointerakciu

Dôležitý bod: Prečo nepoužívame štandardné animácie SVG? SMIL (Synchronized Multimedia Integration Language) sa neberie do úvahy, pretože W3C už nebude podporovať SMIL.

Vezmite napríklad dve krivky ako XML

Programovanie animácie (zmena súradníc X, Y bodov) bude vyzerať asi takto:

1. M 166,5 142.5 L 518 182.5 L 885,5 142.5
2. M 166,5 150 L 518 190 L 885,5 150
3. M 166,5 155 L 518 195 L 885,5 155
4. M 166,5 350 L 518 170 L 885,5 350
5. M 166,5 355 L 518 175 L 885,5 355
6. M 166,5 362.5 L 518 322.5 L 885,5 362.5

!!! Dôležité je, aby bol počet bodov rovnaký.

Pokračujme v príklade. Ak chceme urobiť konvexný štvorec. Musíte nakresliť štvorec s 8 bodmi.

Kód na animáciu takéhoto štvorca:

Var s = Snap ($ ("svg")); var cesta = s.cesta (začiatočná_cesta); // nastavenie počiatočnej pozície $ ("prehrať") kliknutie (funkcia () (cesta.zastavenie (). animácia (("cesta": koncová_cesta), 500, mina.easeout); // koncová poloha (funkcia () ( cesta.zastavenie (). animovať (("cesta": začiatočná_cesta), 500, mina.backout); // návrat do počiatočnej polohy)). oneskorenie (500);)); // kód prenáša len podstatu a nemusí fungovať

Knižnica Snap SVG „kreslí“ pohyb medzi cestami pomocou funkcií easing.

!!! Hlavná vec je, že získame 100% kvalitnú animáciu medzi prehliadačmi bez straty kvality.

Dotkli sme sa technickej stránky problému, no je tam vyššia úroveň ako programovanie animácií. Ide o koncept.

Animačný koncept

Pri pohľade cez rôzne koncepty animácií je vidieť nesprávnu animáciu, ktorú možno skôr nazvať prezentáciou a nemožno ju v projekte použiť. Zostavili sme výber zaujímavých, podľa nás riešení, kedy animácia užívateľovi skutočne pomáha a vytvára wow efekt.

Dobrá animácia musí byť správna z hľadiska dosiahnutia výsledku. Používateľovi by mal vysvetľovať prácu s rozhraním, mal by pomôcť orientovať sa v ňom – teraz, v časoch flat dizajnu, vidíme prvé pokusy urobiť flat dizajn živý a realistický.

Na základe našich praktických skúseností s rozhraniami pre rôzne stránky a mobilné aplikácie sme dokázali identifikovať niekoľko pravidiel a výhod animácie:

Zlepšenie použiteľnosti

Originalita

Jednoduchosť použitia

Vykonávanie niekoľkých paralelných úloh súčasne

Zrýchlite rozhranie

Zlepšenie spätnej väzby od používateľov

Ciele animácie

Pravidlá animácie

Animácia ako dodatočný indikátor správneho fungovania rozhrania

Animácia ako spôsob, ako ušetriť miesto

Animácia ako spôsob, ako pridať do rozhrania realizmus a vytvoriť úžasný efekt bez poškodenia používania

Animácia ako spôsob, ako skryť „chyby“ alebo odviesť pozornosť používateľa (načítače, sťahovanie paralaxy, indikátory pokroku)

Nemal by preťažovať stránku alebo obrazovku, čo by spôsobovalo dlhé a otravné načítavanie.

Animáciu si musíte dôkladne premyslieť s prihliadnutím na rôzne zariadenia a podmienky, s ktorými cieľový používateľ príde do kontaktu s produktom.

Animácia by nemala príliš odvádzať pozornosť od hlavných funkcií alebo obsahu na obrazovke alebo webovej stránke

Mal by byť v súlade s celkovým štylistickým konceptom aplikácie alebo webovej stránky, aby sa zachovala celková harmónia vo vnímaní produktu.

Úloha SVG v odolnom dizajne

Elastické predpätie

Hladký formulár spätnej väzby

Elastické menu

Úloha kvalitnej animácie v rozhraniach rastie. Rozhrania môžu byť živšie ako jednoduché ploché ikony a lineárne animácie. Takto sa zrodil koncept elastického dizajnu.

V prvom rade, elastický dizajn je dizajn, ktorý reaguje na vstup používateľa. Elastický dizajn neobmedzuje voľnosť pohybu. A pomáha používateľom vykonať požadovanú akciu. Elastický dizajn dokonale zapadá do smeru „jednookenných rozhraní“, ako aj do priestorových rozhraní.

Ako povedal jeden z našich klientov: "Ako želé, chveje sa pri akomkoľvek dotyku."

Úloha SVG v odolnom dizajne spočíva v animácii, flexibilite, plynulosti, vzájomnej závislosti, hladkosti, vrstvení ... v podstate vytvára plochý živý.

Základy elastického dizajnu

Živly nežijú samy od seba. Každý prvok závisí na druhom, čím sa vytvára priestor pre jednotný systém prepojení.

Elastický dizajn sa prispôsobí akémukoľvek rozlíšeniu.

Každý prvok poskytuje spätnú väzbu o akciách používateľa. Používateľ by nemal mať žiadne pochybnosti o vykonaní tejto alebo tej akcie.

Odolný dizajn je primárne zameraný na užívateľskú prívetivosť rozhraní.

Vylepšenie animácie pomocou funkcií easing a filtrov svg

Opäť existujú dva hlavné typy animácií, na ktoré sme sa zamerali:

Elastická animácia

Animácia mikrointerakcií

V štandarde SVG je 19 filtrov:

feBlend - prekrývajúce vrstvy (overlay, screen, multiply a iné)

feColorMatrix - farebná matica umožňuje ovládať farbu obrázkov

feComponentTransfer - používa sa na zmenu farieb ako efekty Photoshopu - úprava jasu, úprava kontrastu, vyváženie farieb alebo prahovanie.

feComposite je kompozitný filter používaný na prekrytie alebo rezanie dvoch vrstiev.

feConvolveMatrix je analógom efektov skosenia, embosovania, zaostrenia a detekcie hrán.

feDiffuseLighting - smerové osvetlenie, trochu podobné mapovaniu nerovností

feDisplacementMap - posunie obrázok pomocou hodnôt súradníc pixelov druhého obrázka

feFlood - v podstate nakreslí nový štvorec

feGaussianBlur - rozostrenie

feImage – Konvertuje vektorovú grafiku na bitmapu

feMerge - Paralelné zlúčenie SVG filtrov

feMorphology – používa sa, keď je potrebné zoštíhliť alebo zahustiť okraje pôvodného obrázka

feOffset - posun obrazu pozdĺž súradníc x a y

feSpecularLighting - podsvietenie

feTile - mozaika a analógia vzorov

feTurbulencia – Vytvára fraktálny alebo nepravidelný šum

feDistantLight - filter podsvietenia

fePointLight - filter na zvýraznenie

feSpotLight - filter podsvietenia

Nie je to Photoshop? Môžeme použiť sekvenčné filtrovanie.

Poďme sa pozrieť na to, ako vytvoriť plynulosť v elastickom dizajne pomocou konzistentných SVG filtrov.

Vstupné rozostrenie preberá pôvodný obrázok a vytvára výsledok rozmazania.

Farebná matica preberá výsledok rozmazania a výstupného lesku. Tým sa zmení farba vstupného obrázka a vytvorí sa alfa kanál pre zložený filter.

Zložený filter aplikuje žiaru na pôvodný obrázok pomocou operátora navrchu (http://apike.ca/prog_svg_filter_feComposite.html)

Na výstupe dostaneme „tekutosť“ len medzi bodmi.

Príklad toho, ako fungujú funkcie hladkosti.

V knižnici Snap.SVG ich má na svedomí premenná „mina“ so skromnou sadou funkcií.

Úplný balík funkcií easingu možno nájsť na http://easings.net

Výsledok

Animácia odolného rozhrania je skvelý spôsob, ako udržať používateľov na stránke, pretože používanie interaktívnych prvkov robí riešenie problémov rýchlejšie a zaujímavejšie. A rozvoj technológie čoskoro umožní preniesť na web plnohodnotné nástroje Photoshopu s možnosťou animácie. Pred aplikáciou návrhu pohybu však musíte analyzovať jeho potenciál na zlepšenie použiteľnosti. Dobrá animácia vychádza zo štádia konceptu a má jasné ciele. Funkcie plynulosti oživujú pohyb. Čaká nás skutočne živý byt. Výhody a užitočnosť použitia animácie v procese „vizuálnej komunikácie“ sú zrejmé a prevažujú nad možnými nevýhodami.

, Alla Kudin.

Tento článok napísali oddelenia AFFINAGE DESIGN a AFFINAGE PRODUCTION spoločnosti AFFINAGE.