Útmutató kezdőknek az SVG-animációhoz CSS-sel

A Scalable Vector Graphics (SVG) több, mint egyszerű képfájlok. XML-alkalmazásként az SVG-k olyan jelöléseket tartalmaznak, amelyek a HTML-hez hasonlóan néznek ki és működnek. Használhatja őket CSS- és JavaScript-kóddal együtt is. Ez lehetővé teszi az SVG-fájlok animálását, és olyan összetett képek létrehozását, amelyek jól működnek a webdesignban és más dinamikus környezetekben.

De hogyan lehet SVG animációt készíteni? Kezdje egy SVG alakzattal, animálja azt CSS segítségével, és építsen ezekre az elvekre az animáció használatához saját munkájában.

SVG-k animálása HTML és CSS segítségével

Bár használhatja a JavaScriptet az SVG-k programozott animálására, a CSS most már jól támogatja az animációkat is. Az összes mintakódot megtalálja a oldalon a CodePen ehhez a projekthez.

SVG-kép készítése a HTML-ben

Ennek a folyamatnak az első lépése az SVG kép elkészítése, amellyel dolgozni fog. Az SVG jelölést a CodePen HTML paneljén találhatja meg.

SVG szerkezet

Míg az SVG-k formátuma hasonló a HTML-hez, a létrehozásukhoz használt címkék eltérőek. Az SVG-nek nyitó és záró címkéi vannak (), amelyek sokféle tulajdonságot tartalmazhatnak. A mi esetünkben használjuk

id és viewBox tulajdonságait. Az id tulajdonság bármely más HTML-azonosítóhoz hasonlóan működik, egyedi azonosítót biztosítva a CSS/JS-ben. A viewBox tulajdonság beállítja az SVG méretét.

<!-- SVG reszponzív mérettel -->
<svg id="MUOSVGAanimáció" viewBox="0 0 800 600">
<!-- SVG tartalom -->
</svg>

Ehelyett használhatja a szélesség és magasság tulajdonságokat, amint azt a következő példa mutatja. A viewBox azonban létrehoz egy reszponzív SVG-t, amely illeszkedik a nézetablak méretéhez anélkül, hogy megsértené a képarányát.

 SVG statikus mérettel 
<svg id="MUOSVGAanimáció" szélesség="800" magasság="600">
<!-- SVG tartalom -->
</svg>

SVG alakzatok

Az SVG-k segítségével részletes képeket hozhat létre, különféle alakzati eszközökkel az Ön rendelkezésére. Ez az SVG-példa a rendelkezésre álló formák közül hármat használ, de sok más is létezik. A példában szereplő alakzatok mindegyikének egyedi azonosítója van, amelyet a CSS-animációk később használhatnak.

• SVG ellipszis: Ez egy kör/ovális eszköz. Megadja az y/x tengely sugarának (rx/ry), a kitöltési színnek és a körvonalszélességnek a tulajdonságait. Fontos megjegyezni, hogy az ezzel az eszközzel választott sugár az alakzat átmérőjének fele lesz.

<ellipszis id="kör" rx="100" ry="100" fill="#ffed00" löketszélesség="0"/>

• SVG Rect: Az SVG rect eszköz négyzetet vagy téglalapot hoz létre. Ez rendelkezik a szélesség/magasság, az átalakítás, a kitöltés színe és a körvonalszélesség tulajdonságaival.

<rect id="négyzet" szélesség="200" magasság="200" transzformáció="lefordítani (300 200)" fill="#05f"
 löketszélesség="0"/>

• SVG-sokszög: SVG-sokszög segítségével meghatározott számú pontot állíthat be, és tetszőleges, különböző méretű alakzatokat hozhat létre. A példában szereplő sokszög háromoldalú, így egy háromszög, és az egyes pontok helyzetét a tulajdonságaikban ábrázolva láthatja. Ezzel együtt a háromszög helyzetére, kitöltési színére és körvonalszélességére vonatkozó tulajdonságokkal rendelkezünk.

<sokszög id="háromszög" pontok="15,-97 115,102 -84,102 15,-97"
 transzformáció="lefordítani (0,0)" fill="#f00" löketszélesség="0"/>

Miután az animáció a helyére került, az alakzatok egymás mellett sorakoznak.

Ez a három SVG-forma a leggyakoribb, de több közül is választhat. A következő alakzatokat használhatja, amikor SVG animációval dolgozik:

• SVG kör: Ez az alakzat hasonlít egy ellipszishez, de mindig egyenlő X és Y sugarakkal.
• SVG-vonal: Az SVG-vonal egyetlen szakasz két ponttal, mindkét végén egy-egy ponttal.
• SVG vonallánc: A vonalláncok olyanok, mint az alapvonalak, csak kettőnél több pontjuk lehet.
• SVG-sokszög: Az SVG-sokszögek olyanok, mint a téglalapok, csak négynél több pontjuk lehet, így összetett alakzatokat lehet létrehozni.
• SVG elérési út: Az SVG elérési utak az Adobe Photoshop toll eszközéhez hasonlóan működnek. A vonalak vonalláncként/sokszögként kapcsolódhatnak, de lehet rájuk görbék is.

SVG-k animálása CSS-sel

Most, hogy van néhány alakzat az SVG-ben, ideje továbblépni a CSS-animációra. Mindegyik alakzathoz más-más animáció tartozik, amely bemutatja a rendelkezésre álló lehetőségeket, de rengeteg további lehetőség van felfedezni a saját terveiddel. A kör mozog a képernyőn, a négyzet sarkai kerekek lesznek, és a háromszög forog. Mindezek használata CSS-kulcskockák a sima animációk létrehozásához.

A kör mozgatása az átalakítás és a fordítás segítségével

Az SVG-példában a kör az animációs ciklus alatt a képernyő aljáról a tetejére mozog. Animációt kell hozzárendelnie a körhöz, mielőtt az elmozdulhatna egy CSS-tulajdonon keresztül:

#kör {
 animáció: circle_anim 2000ms lineáris végtelen normál előre
}

Az első szó az értékben, circle_anim, az animáció neve. Két másodpercig fut (2000 ms). Van egy lineáris görbe, amely egyenletesen tartja a sebességét, és úgy van beállítva, hogy egy végtelen hányszor a előre irány. Kulcskockák segítségével meghatározhatja az animáció egyes fázisait:

@keyframes circle_anim {
 0% { átalakítani: fordít(155 képpont, 305 képpont) }
 45% { átalakítani: fordít(155 képpont, -123 képpont) }
 50% { átalakítani: fordít(-123 képpont, -123 képpont) }
 55% { átalakítani: fordít(-123 képpont, 728 képpont) }
 60% { átalakítani: fordít(155 képpont, 728 képpont) }
 100% { átalakítani: fordít(155 képpont, 305 képpont) }
}

Ebben az animációban hat kulcsképkocka található, így a kör minden ciklusban hat különböző helyre kerül. Az átalakítani: fordítani tulajdonság beállítja a kör helyzetét minden szakaszban. 0%-nál a kör a képernyő közepén van, és 45%-kal elmozdul felfelé és kifelé. 50%-kal balra mozdult el a képernyőtől, mielőtt 55%-kal lefelé mozdult volna el a nézetablak alá. A kör 60%-kal visszakerül vízszintes helyzetébe, és az animáció 100%-ban befejeződik, a kör visszakerül a képernyő közepére.

Animálja a tér határsugár tulajdonságát

A példában szereplő négyzet jó hivatkozást kínál az általános tulajdonság-animációkhoz. Mindaddig, amíg ismeri a megfelelő szintaxist, bármilyen CSS-tulajdonságot animálhat. A határsugár tulajdonság jól mutatja ezt. A négyzet éles sarkai vannak, amelyek lekerekített sarkokká alakulnak, majd ismét négyszögletes sarkokká alakulnak.

#négyzet { élénkség: square_anim 2000 ms könnyű be-ki végtelen normál előre }

A négyzet alakú animáció neve square_anim, és két másodperces futási idővel rendelkezik. Az könnyedség be-ki görbe lelassítja az animációt az elején és végén, így egyenletes hatást kelt.

@keyframes square_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40 képpont; ry: 40 képpont }
 55% { rx: 40 képpont; ry: 40 képpont }
 100% { rx: 0px; ry: 0px }
}

Amint látja, ennek az animációnak négy kulcskockája van. Az X és Y határsugár 0 képpontról 40 képpontra változik 0% és 45% között, 40 képpontnál szünetelve 55%-ig. Ezután minden sugárnál visszamegy 0 képpontra, mire az animáció eléri a 100%-ot.

Forgassa el az SVG-háromszöget a transzformációval

A példa utolsó SVG-animációja a legegyszerűbb, a háromszög a középpontja körül forog. Az alakzat két másodpercenként teljesít egy teljes fordulatot, és a végtelenségig fut tovább. Kiegyenlítő görbéje van, ami az animáció lelassulását eredményezi a végén. Az animáció neve triangle_anim.

#háromszög { élénkség: háromszög_anim 2000 ms végtelen normál előrehaladás }

Ennek az animációnak két kulcskockája van, az egyik 0%-os, a másik 100%-os. A Transform rotate tulajdonság 0%-ról 0%-ról 360°-ra 100%-ra fordítja a háromszöget, teljes pörgetést hozva létre.

@keyframes triangle_anim {
 0% { átalakítani: fordít(644 képpont, 297 képpont) forog(0 fok) }
 100% { átalakítani: fordít(644 képpont, 297 képpont) forog(360 fok) }
}

Más tulajdonságok animálása

A fent tárgyalt három animáció jó kiindulópont, ha SVG-kkel dolgozik, de valószínűleg tovább akarja ezt terjeszteni. A CSS animációs szabály segítségével szinte minden tulajdonságértéket módosíthat, amelyet az SVG-hez rendelhet. Ez magában foglalja az alapvető értékeket, például a méretezést és az elhelyezést, valamint a fejlettebb értékeket, például a szegélyeket, az árnyékokat és a keverési módokat.

Ritka esetekben, amikor a CSS nem tudja elvégezni a munkát, JavaScript kóddal animálhatja az SVG-képeket. Rengeteg útmutatót találhat, amelyek segítenek ebben, ha úgy érzi, készen áll a következő lépés megtételére az SVG-kkel.

Saját SVG animációk készítése

Legyen Ön webtervező, szoftverfejlesztő vagy egyszerűen kreatív ember, az SVG-animációk készítése szórakoztató és kielégítő lehet. Rengeteg olyan forrást találhat az interneten, amelyek segíthetnek a webalapú animációban, ha már megszokta az alapokat.

10 CSS-háttérminta, amelyet a webhelyén használhat

Olvassa el a következőt