Share
Tis sesongen, så i denne opplæringen vil jeg gå gjennom å lage noen CSS animerte, ferie-tema, SVG ikoner. Det er noen flotte ikoner på Iconmelon, et nettsted som er vert for mange gratis vektorikonsett for å synke tennene dine inn i. Ikonene jeg bruker, er courtesy of designer Sam Jones. Så ta en kopp eggnog, ta den bærbare datamaskinen opp til yule-loggen, og la oss komme i gang!
Hvis du er interessert i å bruke SVG på nettet, er ikoner et flott sted å starte. SVGer er fleksible, oppløsningsavhengige og lette, slik at ikoner naturlig gir seg til vektorformatet. Pluss, akkurat som HTML, kan SVGs enkelt styles med CSS, som inkluderer CSS3-animasjon. Å legge til et dash av interaktivitet med animasjon til ikonene dine, kan bidra til å skape en herlig opplevelse for brukerne, og legge til sammenheng om hva et ikon representerer.
For en introduksjon på SVG og på nettet, ta en titt på SVG-filer: Fra Illustrator til Internett.
Merk: Følgende demoer bruker banebrytende teknologier som ikke er støttet i noen nettlesere, for eksempel i Internet Explorer. Hvis du følger med opplæringen, er det best å bruke Chrome eller Safari. Mozilla-støtte er perfekt mulig med de riktige egenskaps prefiksene. Du kan sikkert forvente støtte for disse teknologiene for å forbedre seg i fremtiden.
I tillegg: I denne artikkelen har jeg utelatt noen nødvendige nettleserprefikser fra noen CSS-egenskaper for konsisjon og lesbarhet. Sjekk ut prefiksfree-biblioteket av Lea Verou hvis du ønsker å skrive prefiksfri CSS enkelt. Du kan også prøve å lage demoer på Codepen, som lett kan konfigureres til å bruke prefixfree.
En av de største bankene på SVG er at koden er vanskelig å håndtere. SVG-koden som eksporteres av Illustrator, min vektorgrafikredigering av valg, er ganske ulastelig ved første øyekast. Inkscape faktisk gjør en bedre jobb med eksport av SVG i denne forbindelse, men jeg har funnet ut at forenkling og formatering av koden kan gå langt for å gjøre koden lettere å lese og jobbe med.
Her er SVG-koden for det første animasjonseksemplet jeg skal demonstrere, et blinkende julelys.
Denne koden ble eksportert fra vektorredigeringsverktøyet, Adobe Illustrator. Det er nesten ulastelig ved første øyekast. Her er den samme oppsummeringen forenklet:
Jeg har vesentlig forenklet denne xml ved å fjerne mye ekstra merking som programmet utdataer som standard. Mitt grunnleggende SVG-element inneholder følgende:
Accentsconagua
svg-lys. Jeg har brukt svg- prefiks for enkelt målelementer inne i en bestemt SVG.visningsboksen eiendom. Verdien av visningsboksen Egenskapen definerer aspektforholdet til dokumentet og tilsvarer størrelsen på tavlen i Illustrator.xmnls eiendom. Denne egenskapen definerer XML-navneområdet til SVG og hjelper noen brukeragenter å forstå merkingen.Til elementene nestet inne i SVG som definerer former som utgjør bildet, for eksempel baner, sirkler og rects, Jeg har brukt klasser inline med åpningstegnet. Alle elementets inlineegenskaper, som deres koordinater, har jeg brutt til nye linjer. I tillegg har jeg innrykket alle indre elementer under SVG-basen.
Alt dette arbeidet er av en grunn. Først av alt gjør koden mye lettere å lese. For det andre, i min valgte kodeditor, Sublime Text 3, kan jeg enkelt brette individuelle SVG-elementer eller hele SVG mens klassenavnene fortsatt bidrar til å beholde sammenheng om hva disse elementene er.
OK, la oss komme inn i ferieånden og animere et blinkende julelys! Her er hva vi vil se for å oppnå:
Se pennlyset av Noah Blon (@noahblon) på CodePen
Det jeg vil gjøre er å animere stielementet som jeg har gitt en klasse av pære i SVG.
Med CSS, gir jeg pæren en fyllfarge og definerer animasjonsegenskapene.
.svg-light .bulb fill: hsl (204, 70%, 23%); animasjonsnavn: lyseblå; animasjon-varighet: 1s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: lett-i-ut; animasjonsretning: alternativ;
De fylle Egenskapen tillater oss å angi et SVG-elements farge. Når det er mulig, liker jeg å bruke HSL (fargetone, metning, lyshet) for å definere fargeverdier fordi det er veldig intuitivt å jobbe med. Her har jeg valgt en blå farge (fargetone 204), og holdt lysverdien lav, 23%, noe som betyr at vi får en mørkblå farge.
Jeg har satt pæren for å bli animert av en keyframe-animasjon som heter glow-blå. Varigheten av animasjonen er 1 sekund. Animasjonen iterates uendelig, noe som betyr at den vil løpe for alltid. Tidspunktet for animasjonen blir lettet i begynnelsen og slutten av keyframes, noe som skaper en jevnere lette overgang ved start og sluttpunkt av animasjonen. Endelig er animasjonen satt til alternativ, noe som betyr at den vil gå frem og tilbake fra begynnelse til slutt og tilbake igjen.
Tips: Det kan hende du vet at det finnes en kortfattet syntaks for CSS-animasjonsregler, men jeg foretrekker vanligvis å dele reglene ut for å gjøre dem lettere å forstå, endre og dele hvis de knytter flere animasjoner.
Nå skal jeg definere glow-blå keyframe animasjon:
@keyframes glow-blue 0% fill: hsl (204, 80%, 23%); 100% fill: hsl (204, 80%, 63%);
Her har jeg satt start- og sluttfargene til elementet som denne animasjonen brukes på. Den eneste verdien som endrer seg er fargens lyshet ("l" -biten i hsl), noe som betyr at lyset vil animere fra en mørkere til lettere versjon av samme fargetone. Det er den intuitive syntaksen som HSL gir.
Fordi jeg har definert animasjonen for å alternere uendelig, vil lyset skifte fra mørkt til lys og aldri stoppe. Det ser derfor ut til å blinke.
OK, la oss nå kanalisere vår indre Clark W. Griswold og animere en hel masse julelys. Dette er hva jeg skal skape:
Se pennen 540257e4a8b727e435c8e4033602ebb0 av Noah Blon (@noahblon) på CodePen
Jeg har laget fem annerledes fargete lys. Hvert lys er innpakket i en div med en bredde på 20%. Disse divsene blir så floated igjen slik at de ser ut i tråd med hverandre. Siden jeg ikke har satt SVG til å ha en bestemt høyde eller bredde og beholdt egenskapen for visningslokale, er SVG væsken til størrelsen på overordnet uten å miste aspektforholdet eller kvaliteten. Bare en av SVGs store styrker.
For hver SVG har jeg utvidet basen svg-lys-klassen med et fargevaksikat (for eksempel svg-lys-rødt). Her er et utdrag av reglene jeg har brukt til å animere de mange lysene:
.svg-light .bulb animasjon-varighet: 1s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: lett-i-ut; animasjonsretning: alternativ; .svg-lys - rød .bulb fill: hsl (6, 63%, 16%); animasjonsnavn: lysrødt; animasjonsforsinkelse: .5s; animasjon-varighet: 1.25s; @keyframes glødrød 0% fill: hsl (6, 63%, 16%); 100% fill: hsl (6, 63%, 56%);
De grunnleggende animasjonsegenskapene brukes fortsatt til baseklassen til svg-lys slik at de kan deles mellom alle lysene. For hver fargevariasjon har jeg opprettet en annen keyframe-animasjon, for eksempel glow-rød eller glow-blå og gitt dem forskjellige animasjonsforsinkelser og varigheter. På denne måten blinker lysene med riktig farge, og alle blinker ikke samtidig.
Jeg bruker de samme konseptene jeg har beskrevet ovenfor for å animere Rudolphs mest berømte rendyr. Her er sluttresultatet:
Se pennen SVG Rudolph Icon Animert med CSS av Noah Blon (@noahblon) på CodePen
Først vil jeg animere hans glødende røde nese:
.svg-rudolph .nose animasjon-navn: glow; animasjon-varighet: 6s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: lett-i-ut; animasjonsretning: alternativ; @keyframes glød 0% fill: hsl (6, 93%, 16%); 50% fyll: hsl (6, 93%, 56%); 100% fill: hsl (6, 93%, 56%);
Dette ser ganske lik vår julelyst. I keyframe-animasjonen animerer jeg til 50% og deretter til 100%. Da animasjonsvarigheten er seks sekunder, betyr det at nesen i tre sekunder vil bli lysere rød og forbli den fargen i ytterligere tre sekunder til animasjonens slutt. Også, fordi jeg har satt animasjonen til alternerende, vil den nå løpe fra ende til begynnelse. Derfor forblir nesen fullstendig rød i ytterligere tre sekunder før den blir mørkere i løpet av de siste tre sekunder. Forstå samspillet mellom keyframe-prosentene og animasjonsdefinisjonene, for eksempel varigheten, er nøkkelen til å skape effektive CSS-animasjoner.
Jeg har også brukt en overgang til høydepunktet på Rudys nese:
.svg-rudolph. nose-highlight fill-opacity: 0; animasjonsnavn: highlight-fade; animasjon-varighet: 6s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: lett-i-ut; animasjonsretning: alternativ; @keyframes highlight-fade 0% fill-opacity: 0; 25% fill-opacity: 0; 100% fill-opacity: 1;
Her animerer jeg en annen SVG-egenskap, den fylle-opacity. Denne eiendommen tar en verdi mellom 0 og 1; 0 er helt gjennomsiktig, 1 er helt ugjennomsiktig. Til slutt vil jeg gi litt mer liv til Rudy ved å få øynene hans til å blinke:
.svg-rudolph .eye animasjon-navn: blink; animasjon-varighet: 8s; animasjon-iterasjon-telling: uendelig; transformasjons-opprinnelse: 50%; @keyframes blink 0% transform: scaleX (1) scaleY (1); 1% transform: skalaX (1,3) skalaY (0,1); 2% transform: skalaX (1) skalaY (1); 60% transform: skalaX (1) skalaY (1); 61% transform: skalaX (1.3) skalaY (0,1); 62% transform: skalaX (1) skalaY (1); 100% transform: skalaX (1) skalaY (1);
Jeg har opprettet en animasjon som heter blinke. Denne animasjonen går i åtte sekunder og stopper aldri. Jeg skifter ikke animasjonen denne gangen, i stedet vil animasjonen løpe til slutten og deretter starte på nytt fra begynnelsen.
I keyframes er den blinkende animasjonen opprettet ved å manipulere øyneskalaen på X- og Y-aksene. For eksempel, med 1% -merket, er øynene skalert til 1,3 sin størrelse på X-aksen og .1 ganger deres normale størrelse på Y-aksen. Med andre ord blir de litt bredere og mye kortere. En prosent av animasjonens varighet senere, kommer øyneskalaen tilbake til normal. Skalaendringen skjer derfor ekstremt raskt; 8 sekunder / 100 = 8 hundre sekunder av et sekund.
En nøkkelkomponent i bruk av transformasjon for å animere SVG-elementer er å sette elementene forvandle-opprinnelse. I de fleste tilfeller, for at en transformasjon skal brukes riktig i en SVG, må vi definere opprinnelsen til transformasjonskoordinatoren som sentrum av elementet. I motsetning til det for et HTML-element, er transformasjonsopprinnelsen til et SVG-element som standard sitt øverste venstre hjørne, (0,0) koordinaten. Ved å sette transformasjons-opprinnelse til (50%, 50%), vil opprinnelsen til transformasjonen X og Y-aksen være i midten av elementet, og transformasjoner vil da bli lagt til riktig.
Merk: Firefox har problemer når det gjelder å forandre opprinnelse. Dessverre nullstiller transformasjonsopprinnelsen til 50% faktisk X / Y-koordinatene til elementet. Et arbeid er å forvandle elementet tilbake til sin opprinnelige posisjon.
For denne demoen vil jeg animere en bjelle som ringer slik:
Se pennen 63cdc3e8e785028deb35132d889b6090 av Noah Blon (@noahblon) på CodePen
La oss ta en titt på et utdrag av SVG-oppslaget:
Jeg har pakket belloversikten og fyller med a Dette CSS skal være kjent nå, men det skjer et par nye ting. Først i keyframe-animasjonen blir klokken forvandlet, men i stedet for transformasjonsskala transformerer jeg rotasjonsverdien til elementet. Denne animasjonen gjør klokken oscillere mellom 27 og -27 grader. Den andre nye tingen jeg har gjort er å bruke en negativ verdi for Jeg har brukt en lignende animasjon til gruppen som inneholder klokkeens strekerelementer. Denne gangen oversetter jeg imidlertid eller flytter elementene langs X-aksen i stedet for å rotere, slik at angriperen svinger til venstre og høyre. For denne animasjonen vil jeg animere snø som faller inn i en snøklot. Se pennen 2addb5f98c757d61cec87bdcacb5870d av Noah Blon (@noahblon) på CodePen Jeg har laget en haug med sirkelelementer for å representere snø, og jeg har plassert disse elementene rundt snøkløverens omkrets, pakket dem inn i en Snøen er ikke synlig utenfor snøfløyen fordi jeg har brukt en utklippsbane til gruppen som inneholder snøen. En utklippsbane er en form som kan brukes på SVG-elementer, maskerer andre i den. I vårt eksempel på kloden har jeg laget en sirkulær utklippsbane som dekker det indre av kloden. De Jeg har pakket ut banen i en For å søke utklippsstien refererer vi URL-adressen sin, i dette tilfellet sin ID foran et hash-symbol, i egenskapen for inline-klipping av et SVG-element: Snøen er nå bare synlig inne i den sirkulære utklippsbanen. Snøen er animert med de samme teknikkene jeg har beskrevet tidligere; oversatt langs Y-aksen og fyll-opacity nærmer seg null når animasjonen avsluttes. Ja, CSS3-selgere jobber med SVG-elementer! Her har jeg gitt hvert snøelement en annen forsinkelse, slik at de ikke alle faller på en gang. Til slutt vil jeg animere noe SVG-basert tekst for å oppnå et slikt resultat: Se pennmeldingen av Noah Blon (@noahblon) på CodePen SVG gir oss muligheten til å bruke streker til SVG-elementer med CSS. For min siste animasjon, viser jeg deg hvordan du gradvis trekker et elements slag. For å oppnå denne animasjonen har jeg brukt følgende slagegenskaper: Sette opp strekkteksten krever noe arbeid i en grafikkredigerer. Arbeidsflyten min er som følger: Her er min CSS for å sette opp animasjonen: Jeg har definert Hvis du vil lære mer om denne teknikken, sjekk ut Jake Archibalds innlegg Animert linjetegning i SVG. Jeg har også satt teksten til å falme inn etter at linjetegningen har fullført, ved hjelp av fylle-opacity-egenskapen som ligner på det jeg tidligere gjorde med snowglobe-animasjonen. I denne opplæringen har jeg vist at med CSS og SVG kan du lage noen ganske effektive animasjoner. Hvis du vil bli sittende fast med hele koden, så vel som noen ekstra animasjoner, kan du laste ned eksemplene fra Github eller kassen min samling på Codepen. Hvis du vil bli mer avansert, kan du utforske kontrollerende CSS-animasjoner med JavaScript eller supplere CSS-animasjonene dine med mer komplisert JavaScript-animasjon, som det støttes av det fantastiske SVG JS-biblioteket Snap SVG. Takk for at du følger med denne opplæringen, jeg kan ikke vente på å se kreasjonene du kommer med! .svg-bell .group-bell animasjon-navn: bell-ring; animasjon-varighet: 3s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: lett-i-ut; animasjonsforsinkelse: -1.5s; animasjonsretning: alternativ; transformasjons-opprinnelse: 50%; @keyframes bell-ring 0% transform: roter (27deg); 100% transform: roter (-27deg);
animasjon-forsinkelse. En negativ verdi får animasjonen til å starte den tiden i animasjonen. I dette tilfellet, i stedet for animasjonen som starter etter en 1,5 sekunders forsinkelse, vil animasjonen faktisk starte 1,5 sekunder inn i animasjonen. Ved å gjøre dette starter klokken i nøytral posisjon, som det er på 1,5 sekunder inn i animasjonen, i stedet for ved den roterte posisjonen, som det er på 0 sekunder inn i animasjonen. .svg-bell .striker animasjon-navn: striker-move; animasjon-varighet: 3s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: lineær; animasjonsforsinkelse: 1,5s; animasjonsretning: alternativ; transformasjons-opprinnelse: 50%; @keyframes angriper-flytte 0% transform: translateX (3px); 100% transform: translateX (-3px);
La det snø! La det snø! La det snø!
defs stikkord. SVG lar oss lage elementer som vi kan gjenbruke senere, for eksempel klipper, filtre eller former som vi kan stemple ut. Det er best praksis å pakke inn definisjoner som klipper i en defs-tag, slik at SVG kan leses lettere.
.svg-snowglobe .snow animasjon-navn: snøfall; animasjon-varighet: 10s; animasjon-iterasjon-telling: uendelig; animasjon-timing-funksjon: brukervennlighet; .svg-snowglobe .snow: nth-child (1) animasjon-forsinkelse: 2s; .svg-snowglobe .snow: nth-child (2) animasjon-forsinkelse: 4s; .svg-snowglobe .snow: nth-child (3) animasjon-forsinkelse: 6s; .svg-snowglobe .snow: nth-child (4) animasjon-forsinkelse: 8s; .svg-snowglobe .snow: nth-child (5) animasjon-forsinkelse: 10s; .svg-snowglobe .snow: nth-child (6) animasjon-forsinkelse: 12s; .svg-snowglobe .snow: nth-child (7) animasjon-forsinkelse: 14s; .svg-snowglobe .snow: nth-child (8) animasjon-forsinkelse: 16s; .svg-snowglobe .snow: nth-child (9) animasjon-forsinkelse: 18s; .svg-snowglobe .snow: nth-child (10) animasjon-forsinkelse: 20s;
Sesongens hilsener
slag-bredde: slagets bredde. Dette er i forhold til størrelsen på SVG og derfor lydhør.hjerneslag: slagets farge.slag-dasharray: Definerer et strekket slag. En rekke alternerende verdier definerer lengden på de trukket delene av strekklinjen og det tomme mellomrommet mellom bindestreker.slag-dashoffset: Definerer hvor strekningen starter i forhold til lengden på stien.
.svg-message .text slagbredde: 1px; slag: hsl (6, 63%, 36%); strekk-dasharray: 1865.753px 1865.753px; strekk-dashoffset: 1865.753px; fyll-opacity: 0; fyll: hsl (6, 63%, 36%); animasjonsnavn: slag, fyll; animasjon-varighet: 1s; animasjonsforsinkelse: 0, 1s; animasjon-iterasjon-telling: 1; animasjon-timing-funksjon: lett-i-ut; animasjons-fyll-modus: fremover; @keyframes fadeIn 0% fill-opacity: 0; 100% fill-opacity: 1; @keyframes drawStroke 100% stroke-dashoffset: 0
slag-dasharray Egenskapen skal være lengden på den totale banen (du kan finne denne verdien i Illustrator under Dokumentinfo Palette ved hjelp av Objekt-alternativet). Da har jeg gitt slag-dashoffset en verdi av den totale lengden på banen, som skyver hele slaget ut av synlighet. Deretter, ved keyframe animerer slag-dashoffset eiendom, vil streken gradvis trekke på skjermen.
Går videre med SVG og CSS
