Share
Så langt i denne serien har du lært hvordan du animerer CSS-egenskapene til forskjellige elementer, hvordan du oppretter forskjellige SVG-relaterte animasjoner, og hvordan du animerer tekstinnholdet til forskjellige elementer på en nettside. Det er en annen måte at du kan animere elementene på en nettside ved hjelp av KUTE.js, og det er ved å endre verdiene for forskjellige attributter. Dette krever at du inkluderer å legge til attributter plugin i prosjektet.
I denne opplæringen lærer du hvordan du bruker attributter plugin for å animere verdien av forskjellige typer attributter i KUTE.js. Vi vil også diskutere ulike lettelsefunksjoner som du kan bruke til å kontrollere tempoet i forskjellige animasjoner.
Objekter i virkeligheten beveger seg sjelden lineært. De er enten akselerere eller decelerere. Selv akselerasjon og retardasjon oppstår ved forskjellige størrelser. Opptil dette punktet har alle animasjonene utviklet seg lineært. Dette føles ikke naturlig i det hele tatt. I denne delen lærer du om alle de lette funksjonene som KUTE.js gir for å kontrollere tempoet i forskjellige animasjoner.
Kjernefysiske funksjoner i biblioteket er inkludert i kjernemotoren ute av esken. La oss si at du vil bruke QuadraticInOut lettelse til en animasjon. Dette kan oppnås på to måter:
lettelse: KUTE.Easing.easingQuadraticInOut // ELLER lette: 'easingQuadraticInOut'
Hver av de lettende funksjonene har en unik kurve som bestemmer hvordan elementene vil akselerere under animasjonen. EN sinus kurve innebærer lineær akselerasjon. Husk at dette er forskjellig fra lineær lettelse funksjon. De lineær funksjon innebærer en lineær animasjonshastighet, mens en sinusformet kurve innebærer en lineær hastighet for akselerasjon for animasjonen. Med andre ord, vil animasjonshastigheten øke eller senke lineært. på samme måte, kvadratisk innebærer akselerasjon med en kraft på to, kubikk innebærer en kraft på tre, quartic innebærer en kraft på fire, og quintic innebærer en kraft på fem. Det er også sirkulær og eksponentiell lettelse funksjoner.
Du kan legge til I, Ute, eller InOut til noen av de lettende funksjonene. Verdien I innebærer at animasjonen vil starte veldig sakte og fortsette å akselerere til slutten. Verdien Ute innebærer at animasjonen vil starte med maksimal hastighet og deretter senke sakte til den kommer til slutt på slutten. Verdien InOut betyr at animasjonen vil øke hastigheten i begynnelsen og senke på slutten.
Du kan også bruke sprette og elastisk lette funksjonene i animasjonene dine og legge til I, Ute, eller InOut til noen av dem. I den følgende demoen har jeg brukt alle disse lettelsefunksjonene i forskjellige sirkler slik at du kan se hvordan de påvirker animasjonshastigheten.
Det er mulig at ingen av kjernefysiske funksjoner gir animasjonsfrekvensen du leter etter. I slike tilfeller kan du inkludere Cubic Bezier-funksjonene i prosjektet fra forsøkene, og begynn å bruke disse lettfunksjonene.
På samme måte gir KUTE.js også noen fysikkbaserte avlastningsfunksjoner importert fra biblioteket Dynamics.js. Du kan lese mer om alle disse lettelsefunksjonene og hvordan du skal bruke dem på den lettende funksjonssiden på biblioteket.
Attributter i SVG kan akseptere tall og strenger som deres verdi. Strengene kan være fargeverdier eller tall som er suffiks med en enhet som px, em, eller %. Navnene på egenskapene selv kan også bestå av to ord som er knyttet til en bindestrek. Å holde disse forskjellene i bakhodet gir KUTE.js oss forskjellige metoder som kan brukes til å spesifisere verdiene for forskjellige attributter.
Accentsconagua
var tween = KUTE.to ('selector', attr: 'r': 100); var tween = KUTE.to ('selector', attr: 'r': '10% '); var tween = KUTE.to ('selector', attr: 'slagbredde': 10); var tween = KUTE.to ('selector', attr: strokeWidth: 10);Som du kan se, må suffiksverdier være vedlagt i anførselstegn. På samme måte må attributter som inneholder en bindestrek i navnet, være vedlagt inne anførselstegn eller angitt i kamel-form.
Mange attributter godtar unitless verdier. For eksempel, slag-bredde av en bane kan være enhetløs. På samme måte trenger du ikke å spesifisere en enhet for r, cx, og cy attributter av et sirkelelement. Du kan animere alle disse attributter fra en verdi til en annen ved hjelp av attributter plugin.
Nå som du vet hvordan du bruker forskjellige lettelsefunksjoner, vil du kunne animere forskjellige attributter ved forskjellige trinn. Her er et eksempel:
var radiusAnimation = KUTE.allTo ("sirkel", attr: r: 75, gjenta: 1, yoyo: sant, kompensasjon: 1000, lettelse: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# circle-a", attr: cx: 500, gjenta: 1, yoyo: true, easing: 'easingCubicInOut',); var centerxAnimationB = KUTE.to ("# circle-b", attr: cx: 100, gjenta: 1, yoyo: true, easing: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("sirkel", attr: cy: 300, gjenta: 1, yoyo: true, offset: 1000, lettelse: 'easingCubicOut');Den første tween animerer radiusen til begge sirkler samtidig med Altfor å () metode vi diskuterte i første veiledning. Hvis satt til ekte, de yoyo attributt spiller animasjonen i motsatt retning.
De cx Attributtet til begge sirkler er animert individuelt. De blir imidlertid begge utløst av samme knappeklikk. Endelig, den cy Attributtet til begge sirkler er animert samtidig med en offset på 1000 millisekunder.
Fra og med versjon 1.5.7, tillater tilleggspluggen i KUTE.js deg også å animere fylle, hjerneslag, og stopColor egenskaper. Du kan bruke gyldige fargenavn eller hex-verdier for fargene. Du kan også gi fargeverdiene i RGB- eller HSL-format.
En viktig ting du må huske på er at animasjonene bare ser ut til å fungere hvis du ikke setter verdien av disse egenskapene i CSS. I den følgende demonstrasjonen, den fylle farge ville ikke ha animert i det hele tatt hvis jeg hadde lagt til følgende CSS i vår demo.
rekt fyll: brun;
Demoen jeg opprettet, er veldig grunnleggende, men du kan gjøre det mer interessant ved å bruke transformasjoner og bruke flere farger.
Mange SVG attributter som r og slag-bredde kan arbeide med og uten suffiks. For eksempel kan du angi verdien av r å være et tall som 10 eller når det gjelder em-enheter som 10em. Det er noen attributter som offset Attributt for fargestopp som alltid krever at du legger til et suffiks. Mens du angir en verdi for suffiksattributter i KUTE.js, må du alltid sørge for at du legger inn verdien i anførselstegn.
I det følgende eksemplet har jeg animert offsetverdien til det første stoppet i en gradient og fargen på den andre stoppen. Siden offset krever et suffiks, jeg har vedlagt verdien i sitater.
var offsetAnimation = KUTE.allTo (".stop1", attr: offset: '90% ', gjenta: 1, offset: 1000, yoyo: true, easing:' easingCubicIn '); var colorAnimation = KUTE.allTo (".stop2", attr: stopColor: 'black', gjenta: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn'); var scaleAnimation = KUTE.allTo ("sirkel", svgTransform: skala: 2, gjenta: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn');Det er tre forskjellige gradienter i demoen, og hver av disse gradienter har to fargestopp med klassenavnene stop1 og STOP2. Jeg har også brukt en skala transformasjon ved hjelp av svgTransform attributt, som vi diskuterte i den tredje opplæringen av serien.
I denne opplæringen har du lært om forskjellige lette funksjoner som er tilgjengelige i KUTE.js og hvordan du kan bruke dem til å kontrollere tempoet i dine egne animasjoner. Du lærte også å animere forskjellige typer attributter.
Jeg har forsøkt å dekke alle viktige aspekter ved KUTE.js i denne serien. Dette bør være nok til å hjelpe deg med å bruke KUTE.js trygt i dine egne prosjekter. Du kan også lese dokumentasjonen for å lære mer om biblioteket.
Jeg vil også anbefale at du går gjennom kildekoden og ser hvordan biblioteket egentlig fungerer. Hvis du har spørsmål eller tips knyttet til denne opplæringen, kan du dele dem i kommentarene.
