SVG animáció létrehozása a CSS használatával
Az SVG animálása natív elemekkel, például:
A CSS animáció alternatív módja lehet a JavaScript könyvtárnak, mint a SnapSVG. Ebben a bejegyzésben látni fogjuk, hogy mi lehet a CSS Animation SVG-ben.
1. Az alakzatok létrehozása
Először is meg kell rajzolnunk azokat a formákat és tárgyakat, amelyeket animálni akarunk. Használhat olyan alkalmazásokat is, mint a Vázlat, Adobe Illustrator, vagy Inkscape létrehozni.
Ebben a példában felhős égbolt rajzoltam hátrafelé, és egy felfelé forgó rakétahajó is:
Miután elvégeztük a rajzot, exportálnunk kell minden SVG-be létrehozott objektumot.
Erre a lépésre példaként fogom használni a vázlatot. Jelölje ki az SVG-formátumú objektumot. Az ablak jobb alsó részén kattintson a gombra Legyen exportálható. Válassza ki az SVG formátumot, majd kattintson az Exportálás objektumnév elemre. Ezt egyszerre meg kell csinálni.
2. Helyezze be az SVG-t HTML-be
Amikor megnyitja az SVG-fájlt egy kódszerkesztőben, az SVG-kódok meglehetősen rendetlenek. Ezért, mielőtt az SVG fájlt telepítenénk, tisztítsuk meg a kódot, és optimalizáljuk azt az SVGO nevű parancssori eszközzel.
Dob Terminál vagy Parancssor, és telepítse az SVGO-t ezzel a parancssorral:
[sudo] npm install -g svgo
Tun a parancsot, svgo, az SVG fájlban --szép olvasható SVG-kód létrehozása:
svgo rocket.svg --pretty
Ha több SVG-je van egy könyvtárban, akkor egyszerre optimalizálhatja őket. Feltételezve, hogy a könyvtár nevet kap / images, majd a szülőkönyvtárból használja ezt a parancsot:
svgo -f képek --pretty
Nézzük meg a különbséget az SVGO használata előtt és után.
Másolja a kódot az SVG fájlba, és illessze be egy HTML fájlba. 800px munkaterületen 600px szélesre fogunk dolgozni, ezért ne felejtsük el meghatározni a szélesség az SVG elemen.
Az SVG a HTML fájlban van beállítva. Meg kell adnunk egy azonosítót minden egyes objektumhoz, így később választhatjuk ki őket a CSS-ben.
Ehhez a bemutatóhoz meg kell határoznunk a rakéta és a lángok, valamint néhány felhő azonosítóját. Annak érdekében, hogy az objektumok később kezelhessék az animációs színpadot, hozzá kell adnunk id - akkor is használhatja osztály - minden objektumhoz. Ebben a szakaszban a kód így néz ki:
3. A CSS használata
Most szórakozzunk. A terv az, hogy növelje a rakétát az űrbe. A rakéta két csoportra oszlik; maga a rakéta és a láng.
Először is, a rakétát a munkaterület közepére helyezzük, az alábbiak szerint:
#rocket transzformálás: fordítás (260px, 200px);
Látod ezt:
Most, hogy a rakéta úgy néz ki, mintha felfelé haladna, létre kell hoznunk a felhők illúzióját. Az ehhez használt CSS a következő:
# cloud1 animáció: esik 1s lineáris végtelen; @keyframes fall from transform: translateY (-100px); a transzformálás: translateY (1000px)
Annak érdekében, hogy még reálisabb legyen, animáljunk négy felhőt, és tegyük őket “esik” különböző sebességgel. Az X-tengelytől eltérő helyzetben helyezzük el őket.
A második felhő ilyen kóddal rendelkezik:
# cloud2 animáció: esik-2 2s lineáris végtelen; @keyframes fall-2 a transzformációból: lefordít (200px, -100px); a transzformálás: fordítás (200px, 1000px)
Ne feledje, hogy a # 2 felhőt egy kicsit jobbra mozgattuk 200px val vel fordít. Ebben a szakaszban az eredménynek ilyennek kell lennie.
Ezután tegyük életre a rakétát. Az alábbi animációs kulcskeretet rendeljük hozzá:
#rocket animáció: a felugró ablakok végtelenek; @keyframes felugró 0% átalakítás: lefordít (260px, 200px); 50% transzformálás: fordítás (260px, 240px); 100% transzformálás: fordítás (260px, 200px);
És add hozzá animációt a rakéta lánghoz is:
#flame animáció: rázza .2s lineáris végtelen; @keyframes shake 0% transform: fordítsa (55px, 135px) forgatás (7deg); 20% transzformálás: fordítson (55px, 135px) (0deg); 40% transzformálás: fordítson (55px, 135px) (-7deg); 60% transzformálás: fordítson (55px, 135px) (0deg); 100% transzformálás: fordítson (55px, 135px) (0deg);
Jobb! Most, hogy a kódjaink mindegyike be van állítva, az animációnak SVG-jén kell dolgoznia.
Vessen egy pillantást a rakéta robbantására az űrbe.
Végső gondolat
Az animáció nem a legegyszerűbb funkció a CSS-ben. De remélhetőleg ez a bemutató jó kiindulópont a CSS Animation SVG-n való feltárásához; meglepődne, hogy tudja, mit lehet elérni a CSS animációval.
Ha el akarja kezdeni az alapokat, elkezdheted itt ezt a bejegyzést: A Look Into: Scalable Vector Graphics (SVG) animáció vagy kövesse az SVG sorozat többi részét.
- Demó megtekintése
- Letöltés forrása
