Animations on the internet are not new. They have been used to achieve many goals, including making something more interesting to watch or even more appealing. Sometimes that is what makes a website stand out among the competition!
Animations can make UI elements resemble the real world, making them smoothly change while giving the feeling of continuity, action and progress, instead of changing in a blink of an eye.
Even when applied to small elements, animations can help the user remember whether an action was executed or not. In fact, the user is more likely to remember what he/she just did after perceiving something changing little by little, instead of all at once. A simple animation for a loading screen tells more than just waiting with a white page. It’s the difference between knowing something is still happening and wondering if the page is broken.
Der er mange forskellige måder at opnå en animation på en webside. Du kan bruge en foruddefineret animation fra en.gif-fil og bruge den som et almindeligt billede, hvilket kan være enkelt, men får dig til at miste evnen til at ændre den animation i koden. Manipulere HTML-elementer ved hjælp af JavaScript er en ting, der også kan gøres, men det er ofte lidt for dyrt med hensyn til beregning. Du er også velkommen til at bruge CSS og definere flere stilarter af et element til jævnt Ændring gennem tiden. Det vil ikke kun være lettere, men også give browseren mulighed for at optimere ydeevne og effektivitet.
CSS tilbyder to forskellige typer animationer. Den første er overgangsegenskab, som ofte bruges til svæveeffekter og andre brugerinteraktioner. Den anden er animationsegenskab, som gør det muligt at oprette mere kontinuerlige animationer eller, som vi vil se senere, animationer med flere faser. Tjek eksemplet på disse to egenskabers effekter på codepen nedenfor (hvis du ikke ved, hvad codepen er, skal du kontrollere vores artikel om dette fantastiske værktøj til deling af kodestykker):
Se pennen typer af animationer af Patrícia Silva (@patsilva_tese) på KodePen.
For at lave enkle eller mere komplekse CSS-animationer er det nødvendigt at mestre to nøgleelementer: Animationstiming og Indvendige komponenter. En animation uden tid er den samme som at have ingen animation, da den blot ændres øjeblikkeligt. Brug af indre komponenter vil gøre livet lettere, da det er meget mere sandsynligt, at du har brug for mere end et element for at forbedre animationer. Lad os tjekke dem:
For at skabe en jævn animation eller overgang er det vigtigt at definere tidsgrænser. På begge overgang og animation Ejendomme, vi har varighed, der siger, hvor meget tid det tager at gå fra start til slut, som er defineret af den første tidsenhed (sekunder eller millisekunder). Derefter, den forsinkelse, som bestemmer, hvor lang tid elementet vil vente, før animationen starter, defineres af den anden tidsenhed.
undefined
Nedenfor er der fire eksempler, der viser de flere effekter, som forskellige værdier kan skabe: to svæveeffekter (en med en varighed på 0 sek og en anden 0,5 sek) sammen med to indlæsningseffekter (en med en forsinkelse på 0 sek og en anden med 0,1 sek, 0,2 sek og 0,3 sek for hver af firkanterne).
Se pennen animationstiming af Patrícia Silva (@patsilva_tese) på KodePen.
Den anden nøglefaktor og hemmeligheden bag at lave mere sofistikerede animationer er brugen af indre komponenter. Hvis der kun er brug for et eller to ekstra elementer, :før og :efter komponenter kan bruges, ligesom i prøven nedenfor.
undefined
undefined
De kan styles som sædvanligt på din CSS-fil, men det er ikke nødvendigt at definere dem på HTML. Det vil automatisk knytte de ekstra elementer til hovedkomponenten og efterlade HTML intakt. Den eneste forskel i CSS er, at du skal definere ejendomsindhold repræsenteret af en streng. Som et eksempel er det som at beskrive teksten inde i en div på HTML. Fra eksemplet med svæveeffekt skal du kontrollere nedenfor, hvordan komponenten a:before blev stylet, og en tom streng blev brugt på indholdsegenskaben til kun at oprette det lille hjørne.
undefined
undefined
Hvis animationen har brug for mere end to ekstra elementer, standard HTML-komponenter kan bruges. Skift HTML-strukturen, og inkorporer ikke-stylede komponenter som spændvidder, anvend styling, og anvend derefter overgangen eller animationen. Brugen af flere komponenter er også nyttig, hvis du har forskellige typer bevægelser en gang hver komponent kan kun tage én animation eller overgang ad gangen. Eksemplet nedenfor viser indlæsningseffekten: der er en div navngivet container med fire spændvidder indeni, og containeren har en animation, der får den til at blive større. Endelig har hvert spænd en animation, der får dem til at rotere.
undefined
Hvordan gennemføres en overgang? Den første ting at gøre er at definere en indledende og endelig stil/tilstand for de involverede elementer, inklusive:før og:after komponenterne. Derefter, ved hjælp af overgangsegenskab, det vil informere disse komponenter, hvordan de vil opføre sig mellem de to stater. Denne overgangsegenskab er sammensætningen af fire andre egenskaber: overgangsforsinkelse og overgangsvarighed (som er tidsrelaterede egenskaber, og vi har allerede dækket), overgangsegenskab og overgangstidsindsfunktion.
Se pennen overgangsegenskab af Patrícia Silva (@patsilva_tese) på KodePen.
Lad os kontrollere, hvad disse sidste to egenskaber er, og hvordan fungerer de:
Denne del af overgangen gør det muligt at specificere, hvilke egenskaber der vil blive påvirket. Det kan indstilles til „alle“, så alle egenskaber, der ændres fra en stil til en anden, vælges. Men det kan også være en bestemt ejendom eller et sæt af dem. Dette er meget nyttigt, når du indstiller forskellige tidspunkter eller adfærd mellem elementets forskellige egenskaber. Hvis du f.eks. vil have baggrundsfarven til at ændre sig meget hurtigere end tekstfarven, skal du bruge:
undefined
Timingfunktionen definerer overgangshastigheden og har et sæt mulige værdier:
Udforsk, hvordan disse forskellige værdier kan påvirke en animation i eksemplet nedenfor. Bemærk, at overgangen kan holde styr på sig selv. Når du flytter musen hurtigt ind og ud af den animerede komponent, går animationen ikke hele vejen til slutningen: den ruller tilbage.
Se pennen overgangs-timing-funktion mulige værdier af Patrícia Silva (@patsilva_tese) på KodePen.
I modsætning til overgangsegenskaben er der ikke behov for at specificere de berørte elementegenskaber eller endda definere en indledende og sidste tilstand på animationen. Animationsegenskaben giver mere frihed på grund af brug af keyframes. Keyframes bestemme komponentens forskellige styling/tilstande med et navn, der senere vil blive brugt på animationsegenskaben. Med kun to stater kan den bruges „fra“ og „til“ at definere de indledende og endelige. Men i tilfælde af at du ønsker mere, kan det bruges procenter og specificere noget som rotationsanimationen på indlæsningseffekten.
undefined
Ligesom overgangsegenskaben er animationen også sammensætningen af andre egenskaber. De er: animation-varighed, animation-forsinkelse og animation-timing-funktion, der fungerer på samme måde som overgangsprogrammerne; animationsnavn, hvor navnet på keyframe vises animation-iteration-tælling, for at bestemme, hvor mange gange animationen vil køre, hvilket kan være et bestemt antal „uendelige“; animations-retning og animationsfyld-tilstand.
Denne egenskab fortæller, i hvilken retning animationen skal gengives på den valgte keyframe, så du kan vælge en af følgende værdier:
Se pennen animations-retning af Patrícia Silva (@patsilva_tese) på KodePen.
Spekulerer du på, hvad der sker med komponenten, når animationen er færdig? Egenskaben animation-fill-mode har svaret på det. Denne værdi fortæller, hvordan komponenten kan opføre sig uden for animationstiden, med andre ord før og efter animationen:
Kontroller resultatet af hver værdi nedenfor. Klik bare på en af de felter, hvor animationen har et sekunds forsinkelse, og forskellene vil være tydelige.
Se pennen JJKBDee af Patrícia Silva (@patsilva_tese) på KodePen.
Begge typer animationselementegenskaber kan næsten ændres, så længe de er repræsenteret af enhedsværdier. For eksempel vil du kunne se en jævn overgang på farver, højde- og breddeværdier, margener og poleringer, opaciteter, transformation osv. Du vil dog ikke se den effekt på border style, position, float, background-img, font-family osv.
Selvom enheds-/numeriske egenskaber kan ændres problemfrit, påvirker ikke alle gengivelsesprocessen på samme måde; nogle kan være lidt tungere end andre. Når en browser starter en webside, vil den gennemgå nogle trin: den første er Layout, den anden er Maling, og endelig, Komposit. Hvis vi vælger at animere en egenskab, der udløser Layout, som bredde, gentager browseren maling og komposit. Af den grund bruges brugen af egenskaber, der kun aktiverer det sammensatte trin, som omdanne og gennemsigtighed bør prioriteres. Du kan tjekke fuld liste over CSS egenskaber og deres udløsere.
Som nævnt før er transformationsegenskaben en af de billigste at animere. Dette betyder dog ikke, at det er en begrænset ejendom. Faktisk giver det mulighed for at gøre meget af dette til elementet, herunder:
Alle de tidligere effekter vil blive anvendt på midten af elementet, medmindre egenskaben transform-oprindelsesværdi ændres. Denne værdi kan være 1 eller 2 procenter eller endda følgende værdier: top, bund, højre, venstre og center.
Hvis du forsøgte at udforske koden for nogle af tidligere animationer Her kan du bemærke, at vi bruger ikke transformationsegenskaben hele tiden. Det betyder dog ikke, at du ikke kan gøre de samme animationer ved kun at bruge transformationer. For at vise det, vi skabte begge effekter ved hjælp af transform-egenskaben. Tjek nedenfor alle de nødvendige ændringer; du vil blive overrasket over, hvor nemt det er at gøre den samme effekt uden at ændre HTML-strukturen.
Se pennen tidligere animationer ved hjælp af transform af Patrícia Silva (@patsilva_tese) på KodePen.
Animationer udført gennem JavaScript styres på hovedtråd af browseren, hvor layout og maleri også sker. CSS animationer, afhængigt af de egenskaber, der ændres, kan forekomme i en separat tråd kaldet kompositor tråd. Hvis browseren tager mere tid på mere krævende opgaver, vil hovedtrådens animationer blive kompromitteret og afbrudt, hvorimod komponistanimationer ikke påvirkes og fortsætter problemfrit. Så hvis du vælger Javascript, er det mere sandsynligt, at du har manglende rammer på dine animationer.
Sammenfattende bør det være en prioritet at lave animationer ved hjælp af CSS og transform-egenskaben. De er nemme at gøre, især for dem, der allerede får fat i det og kender præcist de mål, der skal nås. Ikke desto mindre er det vigtigt at være forsigtig med animationens overdrevne brug, da det kan føre til ydeevneproblemer og forårsage en overvældende situation for brugeren.
Webudvikler med en særlig kærlighed til front-end. Mor til katte. Jeg forsøger at hjælpe med at redde planeten i min fritid ved at dele miljøvenlige alternativer.
People who read this post, also found these interesting:
.webp)
