5 SVG-animatsiooni teie veebikujunduse elavdamiseks

Animatsioonid võivad muuta veebisaidi libedaks ja sujuvaks, kuid kuidas saate seda funktsiooni oma töösse kaasata? Liituge meiega ja õppige, kuidas nende loominguliste SVG animatsiooninäidetega oma veebikujundust elavdada.

Töötamine skaleeritava vektorgraafikaga

SVG on failivorming, mis kasutab piltide salvestamiseks ja kuvamiseks pikslite asemel jooni. Nagu nende nimigi ütleb, saab skaleeritav vektorgraafika skaleerida ilma kvaliteeti kaotamata.

Peale selle, et see sobib suurepäraselt suuruse muutmiseks, saate HTML-is kasutada ka SVG-koodi ja see toimib nagu iga teine ​​element. See tähendab, et saate kasutada CSS-i reeglid, JavaScripti koodja, mis kõige tähtsam, animatsioonid teie veebisaidi SVG-dega.

Saate luua SVG-sid, kasutades tarkvara (nt Adobe Illustrator) ja veebisaite (nt SVGator), kuid saate neid luua ka käsitsi. SVG-vorming on lihtteksti XML-keel ja sarnaneb veidi HTML-iga.

Selles näites on neli nuppu, millel on oma ikoonid ja plokivärvi taust. Kui valite nupu, muutub see ringist ümaraks ristkülikuks, muutes samal ajal ka lehe taustavärvi, et see vastaks nupule.

JS-i ja CSS-i segu annab need tulemused ja kõik algab tsüklist, mis lisab sündmuste kuulajaid igale nupule.

jaoks (var i = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klõpsa', nuppKlõpsa);
}

Kui nupul klõpsate, teeb funktsioon nimega buttonClick() mitu toimingut. See algab lehe taustavärvi muutmisega:

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

Pärast seda lisab see vajutatud nupule CSS-klassi, käivitades animatsiooni ja muutes nupu taustavärvi.

menuItemActive.classList.remove('menüü__üksus -- aktiivne');
this.classList.add('menüü__üksus -- aktiivne');
menuItemActive.classList.add('menüü__üksus — animeerida');
this.classList.add('menüü__üksus — animeerida');
menuItemActive = see;

Kuigi see SVG-animatsiooni näide on lihtne, pakub see ainulaadset viisi veebisaidi köitvamaks muutmiseks. Seda tüüpi kujundusfunktsioon sobib suurepäraselt mobiiliveebisaitidele ja HTML-põhistele rakendustele.

Saate SVG-teele lisada nii palju sõlme, kui soovite, muutes need ideaalseks teksti loomiseks. See lihtne jooneanimatsioon demonstreerib seda tehnikat suurepäraselt, kusjuures tekst kuvatakse vasakult paremale, nagu oleks see kirjutatud.

Animatsioonil ei ole võtmekaadreid, see lihtsalt rakendab CSS-i ülemineku atribuudi kõrval uue joone laiuse. See paneb iga joone joonistama ennast üle ekraani ilma keerulise animatsioonita.

.path-1 {
 insult-dasharray: 1850 2000;
 insult-dashoffset: 1851;
 üleminek: 5s lineaarne;
}

JS-funktsioon lisab igale tekstiosale ainulaadse CSS-klassi, kasutades ühte CSS-i põhiklassi, et koodi tihedust veelgi vähendada.

$(funktsiooni() {
funktsioonianimatsiooni algus() {
 $('#konteiner').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Ainult CSS-i näitena on see SVG-animatsioon suurepärane kõigile, kes ei soovi oma varbaid JavaScripti koodi kasta. Idee on lihtne: nupp algab allajooniga, mis muutub täisääriseks, kui hõljutate selle kohal.

CSS-võtmekaadrid loovad nupule kaks olekut. Esimesel olekul on jämedam joon ja see katab ainult SVG-kujulise nupu alaosa, alates 0%. Teine olek on täielik nupp 100% peenema käiguga.

@keyframes joonista {
 0% {
 insult-dasharray: 140 540;
 löök-kriipsu nihe: -474;
 joone laius: 8 pikslit;
 }
100% {
 insult-dasharray: 760;
 tõmme-kriipsu nihe: 0;
 joone laius: 2 pikslit;
 }
}

Neid võtmekaadreid rakendatakse SVG-kujulise nupu kontuurile ainult siis, kui kasutaja liigutab kursori nupu kohal. See kasutab :hover CSS-i pseudoklass selle saavutamiseks käivitab reegli, mis lisab nupule animatsiooni võtmekaadrid.

.svg-wrapper:hõljuma.kuju {
-veebikomplekt-animatsioon: 0.5sjoonistadalineaarneedasi;
animatsioon: 0.5sjoonistadalineaarneedasi;
}

See näitab, kuidas saate luua ilusaid animatsioone ilma keerulist koodi kasutamata. Saate kasutada neid põhialuseid ja oma loovust, et luua oma veebisaidi jaoks keerukamaid interaktiivseid elemente.

Kuna kapoti all on nii palju huvitavaid tehnikaid, on seda SVG-kella näidet vaadates raske otsustada, mida arutada.

Alustuseks kasutab see praeguse kuupäeva ja kellaaja kogumiseks funktsiooni Date(). Seda väärtust kasutades jagavad funktsioonid getHours(), getMinutes() ja getSeconds() andmed asjakohasteks osadeks. Seejärel arvutab kood välja iga osuti asukoha kellal.

var kuupäev = uusKuupäev();
var tundiNurk = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minutinurk = 360 * date.getMinutes() / 60;
var sekundinurk = 360 * date.getSeconds() / 60;

Kui salvestate kõik käed massiivi, saab nende asukohti iga kord koodi käivitamisel väga lihtsalt määrata.

hands[0].setAttribute('alates', käiguvahetus (secAngle));
hands[0].setAttribute('juurde', käiguvaheti (secAngle + 360));
hands[1].setAttribute('alates', käiguvahetus (minuteAngle));
hands[1].setAttribute('juurde', käiguvaheti (minutinurk + 360));
hands[2].setAttribute('alates', käiguvahetus (hoursAngle));
hands[2].setAttribute('juurde', käiguvaheti (tunnidAngle + 360));

Ajal on veebidisaini valdkonnas piiratud rakendusi, kuid see on kasulik taimerite, kellade ja ajatemplite salvestamiseks. See näide annab ülevaate ka muutujatega dünaamiliste SVG-animatsioonide loomisest.

See CSS-i juhitud SVG-animatsioon pakub kena viisi mis tahes vormi uskumatuks muutmiseks.

Kui midagi pole valitud, on vormil iga välja all hallid read. Kui väli on valitud, kuvatakse joon, mis libiseb sujuva animatsiooniga vasakult sisse. Kui kasutaja valib mõne muu välja, libiseb joon sujuva liikumisega uude asukohta.

Lõpuks, kui kasutaja vajutab nuppu Logi sisse nuppu, muutub joon ringiks, mis lehe laadimisel pulseerib.

See SVG näide on eriti muljetavaldav, kuna see tugineb nii keeruka tulemuse saamiseks ainult CSS-ile. See kasutab andmete salvestamiseks CSS-i muutujaid, mis muudab elementide (nt põhirakenduse) juhtimise lihtsamaks.

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#app {
 laius: $app-width;
 kõrgus: $app-height;
 polsterdus: $app-padding;
 taust: valge;
 kasti vari: 002rem rgba(must, 0.1);
}

Saate seda näidet kasutada peaaegu igas veebivormis ja kaasata oma kasutajaid rohkem kui kunagi varem.

Oma SVG-animatsioonide loomine HTML-i, JS-i ja CSS-iga

SVG-animatsiooni loomine nullist võib esmakordsel alustamisel olla keeruline protsess. Need näited annavad teile edumaa, mida vajate SVG-animatsioonide loomiseks, mis panevad teie veebisaidi särama.

9 täiustatud meediumipäringu CSS-i nippi, mida peaksite teadma

Loe edasi

Autori kohta