SVG-animaation luominen CSS n avulla

SVG: n animointi voidaan tehdä esimerkiksi alkuperäisten elementtien avulla ja . Mutta niille, jotka tuntevat paremmin CSS-animaatiota, ei hätää, voimme käyttää myös CSS-animaatio-ominaisuuksia animoituihin SVG-tiedostoihin.

CSS-animaatio voisi olla myös vaihtoehtoinen tapa käyttää JavaScript-kirjastoa kuten SnapSVG. Tässä viestissä näemme, mitä voimme mahdollisesti toimittaa CSS-animaatiossa SVG: ssä.

1. Muotojen luominen

Ensinnäkin meidän täytyy piirtää muodot ja esineet, jotka haluamme animoida. Voit käyttää sellaisia ​​sovelluksia Luonnos, Adobe Illustrator, tai Inkscape luoda se.

Tässä esimerkissä olen piirtänyt pilvinen taivas taustana, ja rakettilaiva, joka ampui ylöspäin, sisälsi:

Kun piirustus on tehty, meidän on vietävä jokainen luomamme esine SVG: hen.

Aion käyttää Sketchia esimerkkinä tästä vaiheesta. Valitse kohde, jonka haluat muuttaa SVG-muotoon. Napsauta ikkunan oikeassa alakulmassa Tee vienti. Valitse SVG-muoto ja valitse sitten Vie objektin nimi. Sinun täytyy tehdä tämä yksi kohde kerrallaan.

2. Aseta SVG HTML-muotoon

Kun avaat SVG-tiedoston koodieditorissa, SVG-koodit ovat melko sotkuisia. Siksi ennen SVG-tiedoston käyttöönottoa siivotaan koodi ja optimoidaan se tämän komentorivityökalun SVGO avulla.

Tuoda markkinoille terminaali tai Komentokehote, ja asenna SVGO tähän komentoriviin:

 [sudo] npm asenna -g svgo 

Viritä komento, svgo, SVG-tiedostossa --nätti tuottaa luettava SVG-koodi:

 svgo rocket.svg --pretty 

Jos hakemistossa on useita SVG-tiedostoja, voit optimoida ne yhteen yhdessä. Olettaen, että hakemisto on nimetty / kuvat, sitten vanhemmasta hakemistosta käytä tätä komentoa:

 svgo -f kuvat --pretty 

Katsotaanpa ero ennen SVGO: n käyttöä ja sen jälkeen.

Kopioi koodi SVG-tiedostoon ja liitä HTML-tiedostoon. Työskentelemme 800px: n työtilassa 600px leveällä, joten älä unohda määritellä leveys SVG-elementissä.

SVG on asetettu HTML-tiedostoon. Meidän on määriteltävä tunniste jokaiselle kohteelle, jotta voimme valita ne CSS: ssä myöhemmin.

Tässä opetusohjelmassa on määritettävä raketin ja liekkien tunnus ja jotkut pilvet. Jotta kohteet voivat käsitellä animaatiovaihetta myöhemmin, meidän on lisättävä id - voit myös käyttää luokka - jokaiseen kohteeseen. Tässä vaiheessa koodi näyttää tältä:

3. Animoi CSS: n käyttö

Nyt on hauskaa. Suunnitelmana on rakettien lisääminen avaruuteen. Raketti on jaettu kahteen ryhmään; raketti itse ja liekki.

Ensinnäkin sijoitamme raketin työtilan keskelle seuraavasti:

 #rocket muuntaa: kääntää (260px, 200px); 

Näet näin:

Nyt raketin näyttäminen näyttää nousevan ylöspäin, meidän täytyy luoda illuusio pilvistä. CSS, jota käytämme tähän, on:

 # cloud1 animaatio: syksy 1s lineaarinen ääretön;  @keyframes fall from transform: translateY (-100px);  to transform: translateY (1000px) 

Jotta se näyttää vieläkin realistisemmalta, olkaamme animoitu neljä pilviä ja tee ne “pudota” eri nopeuksilla. Asettamme ne myös eri tavalla X-akselista.

Toisessa pilvessä on koodi:

 # cloud2 animaatio: syksy-2 2s lineaarinen ääretön;  @keyframes fall-2 from transform: kääntää (200px, -100px);  to transform: kääntää (200px, 1000px) 

Huomaa, että olemme siirtäneet pilven # 2 hieman oikealle 200px kanssa Kääntää. Tässä vaiheessa tuloksen pitäisi näyttää tältä.

Seuraavaksi tehdään raketti elämään. Annamme animaatioavaimen kehyksen seuraavasti:

 #rocket animaatio: ponnahdusikkunat 1 helpottavat ääretöntä;  @keyframes popup 0% muuntaa: kääntää (260px, 200px);  50% muuntaa: kääntää (260px, 240px);  100% muuntaa: kääntää (260px, 200px);  

Lisää myös animaatiota myös raketin liekkiin:

 #flame animation: ravista .2s lineaarinen ääretön;  @keyframes shake 0% transform: kääntää (55px, 135px) kiertää (7deg);  20% muuntaa: kääntää (55px, 135px) kiertää (0deg);  40% muuntaa: kääntää (55px, 135px) kiertää (-7deg);  60% muuntaa: kääntää (55px, 135px) kiertää (0deg);  100% muuntaa: kääntää (55px, 135px) kiertää (0deg);  

Oikein! Nyt kun kaikki koodit on asetettu, animaation pitäisi toimia SVG: llä.

Katsokaa rakettisi räjäytystä avaruuteen.

Lopullinen ajatus

Animaatio ei ole helpoin ominaisuus CSS: ssä. Mutta toivottavasti löydät tämän opetusohjelman hyvänä lähtökohtana CSS Animation SVG: n tutkimiseksi edelleen; olisit yllättynyt tietää, mitä CSS-animaatiolla on käsillä.

Jos haluat aloittaa hyvin perusasioista, voit aloittaa täällä tämän viestin kanssa: Katso: skaalautuva vektorigrafiikka (SVG) animaatio tai seuraa muita SVG-sarjoja.

• Näytä demo
• Lataa lähde