Tarkasteltavissa olevan vektorigrafiikan (SVG) animaatio

Tänään jatkamme keskustelua Skaalautuva vektorigrafiikka (SVG), ja tällä kertaa aiomme työskennellä SVG-animaatio. Älä pelkää kuitenkaan, SVG-animaatio on suhteellisen helppoa ja oikeastaan ​​tässä postissa aloitamme perusasioista.

Perusrakentaminen

SVG: n animaatio voidaan tehdä läpi elementti;

Kuten edellä olevasta koodinpätkästä näet, lisäät sisällä elementti, jota aiotaan vaikuttaa. Tämä sisältää joitakin seuraavista määritteistä;

ominaisuuden nimi: Tämä määrite määrittää, mikä elementin määrite vaikuttaa animaatioon.

alkaen: Tämä ominaisuus on valinnainen, voimme määrittää tarkan arvon tai jättää sen sallimaan sen aloittaa siitä, missä se oli.

että: Tämä määrite määrittää animaation suunnan. Riippuen määritetystä arvosta ominaisuuden nimi, tulokset voivat vaihdella. Mutta tässä esimerkissä se laajentaa korkeus.

dur: Tämä määrite määrittää animaation keston. Tämän määritteen arvo ilmaistaan ​​kellon arvon syntaksiin. Esimerkiksi, 02:33 on 2 minuuttia ja 33 sekuntia 3h on 3 tuntia, mutta emme tarvitse sitä kauan, joten määrittelimme oikeuden keston 3s tai 3 sekuntia;

Sama pätee elementti, mutta tällä kertaa kohdistamme ympyrän säteen määritteen (R).

• Perusrakenteen esittely

Liikkuva elementti

SVG-elementtejä siirrettäessä on vain kohdennettava elementin koordinaatti x ja y;

Yllä olevassa esimerkissä siirrämme suorakulmion 0 että 200 3 sekunnissa suorakulmio näkyy vaakasuunnassa vasemmalta oikealle. Lisäksi, jos tarkastelet huolellisesti, lisäsimme myös toisen ominaisuuden elementti, nimittäin täyttää.

täyttää Tässä ei ole mitään tekemistä taustavärin kanssa, kuten muissa SVG-elementeissä. Tämä määrite määrittää, miten animaatio toimii keston päättymisen jälkeen. Tässä esimerkissä me jäädyttää kyseinen elementti, niin että se pysyy missä animaatio päättyy.

Se toimii samalla tavalla kuin elementti, voimme käyttää CX tai CY, niin kuin:

• Liikkuvan elementin esittely

Animoi useita ominaisuuksia

Toistaiseksi kohdennamme vain yhden attribuutin animoitavaksi, mutta on myös mahdollista animoida useampi kuin yksi attribuutti kerralla. Alla oleva esimerkki näyttää, miten se tehdään:

Kuten näette, se toimii samalla tavalla, vain nyt meillä on kaksi elementtien sisällä kohdistaa säde ja iskun leveys vaikuttaa.

• Useita määritteitä demo

Polun jälkeen

Edellisessä postissa Tekstin käsitteleminen SVG: ssä, olemme osoittaneet teille, miten voit siirtää tekstiä polulle. Samoin on mahdollista tehdä myös SVG-animaatio, voimme animoida elementin seuraamaan polkua. Tässä on esimerkki.

Polku määritellään paremmin a elementti, kuten edellä on esitetty. Jotta elementti seuraa polkua, meidän on määritettävä animaatio ja linkitä polku id kanssa elementti;

Se on nyt, nyt katsotaanpa sitä toiminnassa;

• Polun esittelyn jälkeen

muunnokset

Voimme käyttää myös muunnosta asteikko, Kääntää ja kiertää animaatiota varten ja tehdä niin käytämme ;

SVG: n muunnokset jakavat samanlaiset periaatteet CSS3: n kanssa, ja olemme käsitelleet sen melko kattavasti edellisessä postissa CSS3 2D Transformationista.

• Transformation demo

Lopulliset ajatukset

SVG-animaatiosi mukaan voit luoda jotain tällaista.

SVG-animaation käyttäminen Flash-animaation yli on se, että se ei luota kolmansien osapuolten laajennuksiin toimiakseen ja se on myös huomattavasti nopeampi kuin Flash. Kun Adobe on lopettanut Flash-tuen Androidissa, kannattaa ehkä kokeilla tätä lähestymistapaa animaation tarjoamiseen seuraavalla verkkosivustolla.

Lisää viitteitä

• SVG Animate Documentation
• Edistyneet SVG-animaatiotekniikat

• Näytä demo
• Lataa lähde