5 SVG-animáció a webdizájn élénkítéséhez

Az animációk simává és simává tehetik a webhelyet, de hogyan építheti be ezt a funkciót saját munkájába? Csatlakozzon hozzánk, és tanulja meg, hogyan élénkítse fel webdizájnját ezekkel a kreatív SVG animációs példákkal.

Skálázható vektorgrafika használata

Az SVG egy olyan fájlformátum, amely képpontok helyett vonalakat használ a képek tárolására és megjelenítésére. Ahogy a nevük is sugallja, a méretezhető vektorgrafika minőségromlás nélkül is méretezhető.

Amellett, hogy remekül használható az átméretezéshez, SVG-kódot is használhat a HTML-ben, és úgy fog működni, mint bármely más elem. Ez azt jelenti, hogy használhatja CSS szabályok, JavaScript kód, és ami a legfontosabb, animációkat a webhely SVG-jeivel.

Létrehozhat SVG-ket olyan szoftverek segítségével, mint az Adobe Illustrator, és olyan webhelyekkel, mint az SVGator, de létrehozhatja őket kézzel is. Az SVG formátum egy egyszerű szöveges XML nyelv, és kicsit úgy néz ki, mint a HTML.

Ez a példa négy gombot tartalmaz saját ikonokkal és blokkszínű háttérrel. Ha kiválaszt egy gombot, az körből lekerekített téglalappá változik, miközben az oldal háttérszínét is a gombhoz igazítja.

A JS és CSS keveréke hozza létre ezeket az eredményeket, és minden egy ciklussal kezdődik hozzáteszi az eseményfigyelőket minden gombhoz.

számára (var i = 0; i < menüElemek.hossza; i++) {
 menuItems[i].addEventListener('kattintson', gombKattintson);
}

Ha egy gombra kattint, a buttonClick() nevű függvény számos műveletet hajt végre. Az oldal háttérszínének megváltoztatásával kezdődik:

dokumentum.body.style.backgroundColor = `#${ez.getAttribute('data-background')}`;

Ezt követően hozzáad egy CSS-osztályt a megnyomott gombhoz, elindítva egy animációt és megváltoztatva a gomb háttérszínét.

menuItemActive.classList.remove('menü__elem -- aktív');
this.classList.add('menü__elem -- aktív');
menuItemActive.classList.add('menü__elem -- animálni');
this.classList.add('menü__elem -- animálni');
menuItemActive = ez;

Bár egyszerű, ez az SVG-animációs példa egyedülálló módot kínál webhelye vonzóbbá tételére. Ez a fajta tervezési funkció tökéletes mobilwebhelyekhez és HTML-alapú alkalmazásokhoz.

Tetszőleges számú csomópontot adhat hozzá egy SVG-útvonalhoz, így ideálisak szöveg létrehozásához. Ez az egyszerű körvonal-animáció tökéletesen bemutatja a technikát, a szöveg balról jobbra haladva úgy jelenik meg, mintha írnák.

Az animációnak nincsenek kulcskockái, egyszerűen új körvonal-szélességet alkalmaz a CSS átmeneti tulajdonsága mellett. Így minden vonal bonyolult animáció nélkül rajzolja meg magát a képernyőn.

.útvonal-1 {
 stroke-dasharray: 1850 2000;
 stroke-dashoffset: 1851;
 átmenet: 5s lineáris;
}

A JS függvény egy egyedi CSS-osztályt ad a szöveg minden szakaszához egyetlen szülő CSS-osztály használatával, hogy tovább csökkentse a kód sűrűségét.

$(funkció() {
funkcióanimációStart() {
 $('#tartály').addClass('uszony');
 }
setTimeout (animationStart, 250);
});

Csak CSS-es példaként ez az SVG-animáció nagyszerű azoknak, akik nem akarják belemártani a lábujjaikat a JavaScript-kódba. Az ötlet egyszerű: a gomb aláhúzással kezdődik, amely teljes szegélyré formálódik, ha fölé viszi az egérmutatót.

A CSS kulcskockák két állapotot hoznak létre a gomb számára. Az első állapot vastagabb körvonallal rendelkezik, és csak az SVG alakzat gomb alját fedi le, 0%-tól kezdve. A másik állapot a teljes gomb 100%-ban vékonyabb lökettel.

@keyframes húz {
 0% {
 stroke-dasharray: 140 540;
 stroke-dashoffset: -474;
 körvonal-szélesség: 8 képpont;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 körvonal-szélesség: 2px;
 }
}

Ezeket a kulcskockákat a rendszer csak az SVG alakzat gomb körvonalára alkalmazza, ha a felhasználó a kurzort a gomb fölé viszi. A :hover-t használja CSS pszeudoosztály ennek eléréséhez egy olyan szabály aktiválásával, amely hozzáadja az animációs kulcskockákat a gombhoz.

.svg-wrapper:lebeg.alak {
-webkit-animáció: 0.5shúzlineáriselőre;
élénkség: 0.5shúzlineáriselőre;
}

Ez megmutatja, hogyan készíthet gyönyörű animációkat bonyolult kód használata nélkül. Használhatja ezeket az alapokat és kreativitását, hogy kidolgozottabb interaktív elemeket készítsen saját webhelyéhez.

A motorháztető alatt rengeteg érdekes technikával nehéz eldönteni, miről is beszéljünk, ha ezt az SVG-órapéldát nézzük.

Kezdésként a Date() függvényt használja az aktuális dátum és idő összegyűjtésére. Ezzel az értékkel a getHours(), getMinutes() és getSeconds() függvények az adatokat a megfelelő részekre osztják fel. A kód ezután kiszámítja az egyes mutatók pozícióját az órán.

var dátum = újDátum();
var óraSzög = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var percSangle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

Az egyes kezek tömbben való tárolásával a pozíciójuk nagyon könnyen beállítható a kód minden egyes futtatásakor.

hands[0].setAttribute('tól től', váltó (secAngle));
hands[0].setAttribute('nak nek', váltó (secAngle + 360));
hands[1].setAttribute('tól től', váltó (minuteAngle));
hands[1].setAttribute('nak nek', váltó (percSangle + 360));
hands[2].setAttribute('tól től', váltókar (hoursAngle));
hands[2].setAttribute('nak nek', váltó (óraSangle + 360));

Az idő korlátozottan alkalmazható a webdizájn területén, de hasznos visszaszámlálókhoz, órákhoz és időbélyegek tárolásához. Ez a példa betekintést nyújt a változókat tartalmazó dinamikus SVG-animációk létrehozásába is.

Ez a CSS-vezérelt SVG-animáció ügyes módot kínál arra, hogy bármilyen formát hihetetlenül nézzen ki.

Ha nincs kiválasztva, az űrlapon minden mező alatt kiszürkült vonalak találhatók. Egy mező kijelölésekor egy vonal jelenik meg, amely balról csúszik be sima animációval. Ha a felhasználó másik mezőt választ ki, a vonal egyenletes mozgással az új pozícióba csúszik.

Végül, ha a felhasználó megnyomja a gombot Belépés gombot, a vonal körré változik, amely az oldal betöltésekor pulzál.

Ez az SVG-példa különösen lenyűgöző, mert csak a CSS-re támaszkodik egy ilyen összetett eredmény létrehozásához. CSS-változókat használ az adatok tárolására, megkönnyítve az olyan elemek vezérlését, mint a fő alkalmazás.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 szélesség: $app-width;
 magasság: $app-height;
 padding: $app-padding;
 háttér: fehér;
 box-shadow: 002rem rgba(fekete, 0.1);
}

Ezt a példát szinte bármilyen internetes űrlapon használhatja, és úgy vonzza le felhasználóit, mint még soha.

Saját SVG animációk készítése HTML, JS és CSS segítségével

Egy SVG-animáció létrehozása a semmiből nehéz folyamat lehet, amikor először kezdi. Ezek a példák megadják a kezdő lépést az SVG animációk elkészítéséhez, amelyek ragyogóvá teszik webhelyét.

9 Advanced Media Query CSS-trükkök, amelyeket tudnia kell

Olvassa el a következőt

A szerzőről