A Scalable Vector Graphics (SVG) animáció

Ma folytatjuk a vitát Méretezhető vektorgrafika (SVG), és ezúttal együtt fogunk dolgozni SVG animáció. Ne félj azonban, hogy az SVG Animáció viszonylag egyszerű, és ebben a hozzászólásban az alapoktól indulunk.

Alapvető megvalósítás

Az SVG-ben történő animáció elvégezhető elem;

Mint látható a fenti kódrészletből, hozzáadjuk a belül az elem, amelyre hatással lesz. Ez tartalmaz néhány alábbi attribútumot:

attributeName: Ez az attribútum meghatározza, hogy melyik elem attribútumát érinti az animáció.

tól től: Ez az attribútum választható, pontos értéket adhatunk meg, vagy hagyhatjuk, hogy elinduljon attól, ahol volt.

nak nek: Ez az attribútum meghatározza az animációs irányt. A megadott értéktől függően attributeName, az eredmények változhatnak. De ebben a példában a magasság.

dur: Ez az attribútum meghatározza az animáció időtartamát. Ennek az attribútumnak az értéke a Clock Value Syntax-ban van megadva. Például, 02:33 2 perc és 33 másodperc 3h 3 óra, de nem kell ilyen sokáig, így meghatároztuk az igazság időtartamát 3s vagy 3 másodperc;

Ugyanez megy elem, de ezúttal a kör sugár attribútumát (r).

• Alapvető megvalósítási demó

Mozgó elem

Az SVG elemek mozgatásakor csak az elem koordinátáját kell céloznunk x és y;

A fenti példában a téglalapot mozgatjuk 0 nak nek 200 3 másodperc múlva a téglalap vízszintesen, balról jobbra jelenik meg. Továbbá, ha gondosan megnézzük, egy másik attribútumot is hozzáadtunk a elem, nevezetesen tölt.

tölt Az attribútum itt semmi köze a többi SVG elemhez hasonló háttérszínhez. Ez az attribútum meghatározza, hogy az animáció hogyan fog működni az időtartam vége után. Ebben a példában mi fagy az érintett elem így marad, ahol az animáció véget ér.

Ugyanúgy működik, mint a elemet használhatunk cx vagy cy, így tetszik:

• Mozgó elem demó

Több attribútum animálása

Eddig csak egy attribútumot célozunk animálni, de egynél több attribútumot is animálhat egyszerre. Az alábbi példa megmutatja, hogyan csináljuk:

Amint láthatod, hasonló módon működik, csak most van kettőnk elemek belsejében célzni sugár és a stroke szélessége érinti.

• Több attribútum demó

Egy út követése

Az előző bejegyzésünkben Szöveg használata SVG-ben, megmutattuk, hogyan kell a Szöveget egy Útba vezetni. Ugyanez a dolog is lehetséges SVG animáció, egy elemet animálhatunk az Út követéséhez. Itt van egy példa.

A Path jobban definiálható a elem, mint fent látható. Annak érdekében, hogy az elem kövesse az utat, meg kell határoznunk az animációt és kapcsolja össze az utat id val vel elem, az alábbiak szerint;

Ez az, most nézzük meg a cselekvést;

• Útvonal demó követése

transzformációk

Használhatjuk az átalakítást is skála, fordít és forog az animációhoz, és ezt fogjuk használni ;

Az SVG-ben az átalakítások hasonló alapelveket tartalmaznak a CSS3-val, és a CSS3 2D-s átalakításáról szóló korábbi hozzászólásunkban meglehetősen átfogóan foglalkozunk vele.

• Átalakítási demó

Végső gondolatok

Az SVG Animáció szakértelmétől függően létrehozhat ilyet.

Az SVG animáció használatának egyik előnye a Flash Animáció felett az, hogy nem támaszkodik a harmadik felek beépülő moduljaira, és ez is jelentősen gyorsabb, mint a Flash. Miután az Adobe leállította a Flash-támogatását az Androidon, érdemes lehet elkezdeni próbálni ezt a megközelítést, hogy animációt szolgáltasson a következő weboldalon.

További hivatkozások

• SVG animációs dokumentáció
• Speciális SVG animációs technikák

• Demó megtekintése
• Letöltés forrása