Share
Hittills i denna serie har du lärt dig hur man animerar CSS-egenskaperna hos olika element, hur man skapar olika SVG-relaterade animeringar och hur man animerar textinnehållet för olika element på en webbsida. Det finns ett sätt att animera elementen på en webbsida med KUTE.js, och det är genom att ändra värdena för olika attribut. Detta kräver att du inkluderar attributet plugin i ditt projekt.
I denna handledning lär du dig att använda attributets plugin för att animera värdet av olika typer av attribut i KUTE.js. Vi kommer också att diskutera olika lättnader som du kan använda för att styra takten i olika animeringar.
Föremål i det verkliga livet rör sig sällan linjärt. De accelererar eller avtar. Även accelerationen och retardationen uppträder i olika storlekar. Hittills har alla animationer utvecklats linjärt. Det känns inte naturligt alls. I det här avsnittet kommer du att lära dig om alla lättnader som KUTE.js tillhandahåller för att styra takten i olika animationer.
Kärnfunktionerna i biblioteket ingår i kärnmotorn ur lådan. Låt oss säga att du vill tillämpa QuadraticInOut lättnad till en animering. Detta kan uppnås på två sätt:
lättnad: KUTE.Easing.easingQuadraticInOut // ELLER easing: 'easingQuadraticInOut'
Varje lättnadsfunktion har en unik kurva som bestämmer hur elementen kommer att accelerera under animeringen. en sinus- kurva innebär linjär acceleration. Tänk på att detta skiljer sig från linjär lättnad funktion. De linjär funktionen innebär en linjär hastighet för animering, medan en sinusformad kurva innebär en linjär accelerationshastighet för animationen. Med andra ord, animationshastigheten ökar eller minskar linjärt. Liknande, kvadratisk innebär acceleration med en kraft av två, kubisk innebär en kraft av tre, fjärdegrads innebär en kraft på fyra, och quintic innebär en kraft på fem. Det finns också cirkulär och exponentiell lätta funktioner.
Du kan lägga till I, Ut, eller In ut till någon av de lättnaderna. Värdet I innebär att animationen börjar mycket långsamt och fortsätter att accelerera till slutet. Värdet Ut innebär att animeringen startar med maximal hastighet och sedan sakta ned sakta tills det kommer till stopp vid slutet. Värdet In ut innebär att animationen kommer att påskyndas i början och sakta ner i slutet.
Du kan också använda studsa och elastisk lätta funktioner i dina animeringar och lägga till I, Ut, eller In ut till någon av dem. I följande demo har jag tillämpat alla dessa lättnader i olika cirklar så att du kan se hur de påverkar animationshastigheten.
Det är möjligt att ingen av kärnanslättande funktioner ger den animationshastighet du letar efter. I sådana fall kan du inkludera Cubic Bezier-funktionerna i ditt projekt från experimentbranschen och börja använda dessa lättnader.
På liknande sätt tillhandahåller KUTE.js också vissa fysikbaserade lättnader som importeras från biblioteket Dynamics.js. Du kan läsa mer om alla dessa lättnadsfunktioner och hur du använder dem på läsningsfunktionssidan i biblioteket.
Attribut i SVG kan acceptera såväl siffror som strängar som deras värde. Strängarna kan vara färgvärden eller siffror som suffixas med en enhet som px, em, eller %. Namnen på attributen själva kan också bestå av två ord som förenas med en bindestreck. Med hänsyn till dessa skillnader ger KUTE.js oss olika metoder som kan användas för att ange värdena för olika attribut.
Accentsconagua
var tween = KUTE.to ('selector', attr: 'r': 100); var tween = KUTE.to ("selector", attr: 'r': '10% '); var tween = KUTE.to ('selector', attr: 'stroke-width': 10); var tween = KUTE.to ("selector", attr: strokeWidth: 10);Som du kan se måste suffixade värden bifogas citat. På samma sätt måste attribut som innehåller bindestreck i deras namn bifogas citat eller specificeras i camelCase-formulär.
Många attribut accepterar unitless värden. Till exempel, stroke-bredd av en bana kan vara enhetlös. På samma sätt behöver du inte ange en enhet för r, cx, och cy attribut av ett cirkelelement. Du kan animera alla dessa attribut från ett värde till en annan med attributet plugin.
Nu när du vet hur du använder olika lättnadsfunktioner, kommer du att kunna animera olika attribut i olika steg. Här är ett exempel:
var radiusAnimation = KUTE.allTo ("cirkel", attr: r: 75, repeat: 1, yoyo: true, offset: 1000, lättnad: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# circle-a", attr: cx: 500, repeat: 1, yoyo: true, easing: 'easingCubicInOut'; var centerxAnimationB = KUTE.to ("# circle-b", attr: cx: 100, repeat: 1, yoyo: true, easing: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("cirkel", attr: cy: 300, upprepa: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut');Den första tweenen animerar radien av båda cirklarna på en gång med allt till() metod vi diskuterade i första handledningen. Om den är inställd på Sann, de jojo Attribut spelar animeringen i omvänd riktning.
De cx Attribut av båda cirklarna animeras individuellt. Men de utlöses båda med samma knappklick. Slutligen, den cy Attribut av båda cirklarna animeras samtidigt med en offset av 1000 millisekunder.
Från och med version 1.5.7 tillåter attributet plugin i KUTE.js dig också att animera fylla, stroke, och stopColor attribut. Du kan använda giltiga färgnamn eller hex-värden för färgerna. Du kan också ge färgvärdena i RGB- eller HSL-format.
En viktig sak som du måste komma ihåg är att animationerna bara verkar fungera om du inte ställer in värdet av dessa egenskaper i CSS. I följande demo, the fylla färgen skulle inte ha animerat alls om jag hade lagt till följande CSS i vår demo.
rekt fyll: brun;
Den demo jag skapade är väldigt grundläggande, men du kan göra det mer intressant genom att använda transformer och använda fler färger.
En hel del SVG-attribut som r och stroke-bredd kan arbeta med och utan suffixer. Du kan till exempel ange värdet på r att vara ett nummer som 10 eller i fråga om em-enheter som 10em. Det finns några attribut som offset attribut för färgstopp som alltid kräver att du lägger till ett suffix. Medan du anger ett värde för suffixade attribut i KUTE.js, måste du alltid se till att du bifogar värdet inom citat.
I följande exempel har jag animerat offsetvärdet för det första stoppet i en lutning och färgen på det andra stoppet. Eftersom offset kräver ett suffix, jag har bifogat värdet inuti citat.
var offsetAnimation = KUTE.allTo (".stop1", attr: offset: '90% ', upprepa: 1, offset: 1000, yoyo: true, easing:' easingCubicIn '); var colorAnimation = KUTE.allTo (".stop2", attr: stopColor: 'black', upprepa: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn'); var scaleAnimation = KUTE.allTo ("cirkel", svgTransform: skala: 2, upprepa: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn');Det finns tre olika gradienter i demoen, och var och en av dessa gradienter har två färgstopp med klassnamnen Stopp per1 och stop2. Jag har också applicerat en skala transformation med hjälp av svgTransform attribut som vi diskuterade i serieens tredje handledning.
I denna handledning lärde du dig om olika lättnader som finns tillgängliga i KUTE.js och hur du kan använda dem för att styra takten i dina egna animeringar. Du lärde dig också att animera olika typer av attribut.
Jag har försökt att täcka alla viktiga aspekter av KUTE.js i denna serie. Detta borde räcka för att hjälpa dig att använda KUTE.js säkert i dina egna projekt. Du kan också läsa dokumentationen för att lära dig mer om biblioteket.
Jag rekommenderar också att du går igenom källkoden och ser hur biblioteket verkligen fungerar. Om du har några frågor eller tips relaterade till den här handledningen kan du dela dem i kommentarerna.
