Share
Finora in questa serie, hai imparato come animare le proprietà CSS di diversi elementi, come creare diverse animazioni correlate a SVG e come animare il contenuto del testo di diversi elementi in una pagina web. Esiste un altro modo in cui è possibile animare gli elementi in una pagina Web utilizzando KUTE.js, ovvero modificando i valori di diversi attributi. Ciò richiede di includere il plug-in degli attributi nel progetto.
In questo tutorial, imparerai come utilizzare il plugin degli attributi per animare il valore di diversi tipi di attributi in KUTE.js. Discuteremo anche diverse funzioni di andamento che è possibile utilizzare per controllare il ritmo delle diverse animazioni.
Gli oggetti nella vita reale molto raramente si muovono linearmente. Stanno accelerando o decelerando. Anche l'accelerazione e la decelerazione avvengono a diverse grandezze. Fino a questo punto, tutte le nostre animazioni sono progredite in modo lineare. Questo non sembra affatto naturale. In questa sezione, imparerai tutte le funzioni di andamento fornite da KUTE.js per controllare il ritmo delle diverse animazioni.
Le funzioni di base di base nella libreria sono incluse nel motore di core. Diciamo che vuoi applicare il QuadraticInOut facilitare l'animazione. Questo può essere ottenuto in due modi:
easing: KUTE.Easing.easingQuadraticInOut // O easing: 'easingQuadraticInOut'
Ciascuna delle funzioni di andamento ha una curva univoca che determina il modo in cui gli elementi accelereranno durante l'animazione. UN sinusoidale la curva implica l'accelerazione lineare. Tieni presente che questo è diverso dal lineare funzione di alleggerimento. Il lineare la funzione implica una velocità lineare di animazione, mentre una curva sinusoidale implica una velocità lineare di accelerazione per l'animazione. In altre parole, la velocità dell'animazione aumenta o diminuisce linearmente. allo stesso modo, quadratico implica l'accelerazione con una potenza di due, cubo implica una potenza di tre, quartic implica un potere di quattro, e quintic implica un potere di cinque. Ci sono anche circolare e esponenziale funzioni di alleggerimento.
Puoi aggiungere Nel, Su, o Dentro fuori a una qualsiasi delle funzioni di andamento. Il valore Nel implica che l'animazione inizierà molto lentamente e continuerà ad accelerare fino alla fine. Il valore Su implica che l'animazione inizierà alla massima velocità e quindi decelererà lentamente fino a fermarsi alla fine. Il valore Dentro fuori significa che l'animazione si accelera all'inizio e rallenta alla fine.
Puoi anche usare rimbalzo e elastico funzioni di alleggerimento nelle animazioni e aggiungi Nel, Su, o Dentro fuori a nessuno di loro. Nella demo seguente, ho applicato tutte queste funzioni di andamento su cerchi diversi in modo da poter vedere come influenzano il ritmo dell'animazione.
È possibile che nessuna delle funzioni di base per l'animazione fornisca il ritmo dell'animazione che stai cercando. In questi casi, puoi includere le funzioni Cubic Bezier nel tuo progetto dal ramo esperimenti e iniziare a utilizzare quelle funzioni di andamento.
Allo stesso modo, KUTE.js fornisce anche alcune funzioni di andamento basate sulla fisica importate dalla libreria Dynamics.js. Puoi leggere ulteriori informazioni su tutte queste funzioni di andamento e su come usarle correttamente nella pagina della funzione di andamento della libreria.
Gli attributi in SVG possono accettare numeri e stringhe come valore. Le stringhe possono essere valori di colore o numeri suffissi con un'unità simile px, em, o %. I nomi degli attributi stessi possono anche consistere in due parole unite da un trattino. Tenendo presenti queste differenze, KUTE.js ci fornisce diversi metodi che possono essere utilizzati per specificare i valori di diversi attributi.
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);Come puoi vedere, i valori suffissi devono essere racchiusi tra virgolette. Allo stesso modo, gli attributi che contengono un trattino nel loro nome devono essere racchiusi tra virgolette o specificati nel modulo camelCase.
Molti attributi accettano valori senza unità. Ad esempio, il stroke-width di un percorso potrebbe essere senza unità. Allo stesso modo, non è necessario specificare un'unità per il r, cx, e cy attributi di un elemento del cerchio. Puoi animare tutti questi attributi da un valore all'altro usando il plug-in degli attributi.
Ora che sai come usare diverse funzioni di andamento, sarai in grado di animare diversi attributi a diversi ritmi. Ecco un esempio:
var radiusAnimation = KUTE.allTo ("circle", attr: r: 75, ripetizione: 1, yoyo: true, offset: 1000, easing: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# circle-a", attr: cx: 500, ripetizione: 1, yoyo: true, easing: 'easingCubicInOut',); var centerxAnimationB = KUTE.to ("# circle-b", attr: cx: 100, ripetizione: 1, yoyo: true, easing: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("circle", attr: cy: 300, ripetizione: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut');La prima interpolazione anima il raggio di entrambi i cerchi contemporaneamente usando il Allto () metodo che abbiamo discusso nel primo tutorial. Se impostato su vero, il yoyo l'attributo riproduce l'animazione nella direzione opposta.
Il cx l'attributo di entrambi i cerchi è animato individualmente. Tuttavia, sono entrambi attivati dallo stesso clic del pulsante. Finalmente, il cy l'attributo di entrambi i cerchi è animato contemporaneamente con un compensare di 1000 millisecondi.
A partire dalla versione 1.5.7, il plugin degli attributi in KUTE.js consente anche di animare il file riempire, ictus, e stopColor attributi. È possibile utilizzare nomi di colori validi o valori esadecimali per i colori. È inoltre possibile fornire i valori dei colori in formato RGB o HSL.
Una cosa importante da tenere a mente è che le animazioni sembreranno funzionare solo se non si imposta il valore di queste proprietà nei CSS. Nella seguente demo, il riempire il colore non avrebbe affatto animato se avessi aggiunto il seguente CSS nella nostra demo.
rect fill: brown;
La demo che ho creato è molto semplice, ma puoi renderla più interessante applicando le trasformazioni e utilizzando più colori.
Un sacco di attributi SVG come r e stroke-width può funzionare con e senza suffissi. Ad esempio, puoi impostare il valore di r essere un numero come 10 o in termini di unità em come 10em. Ci sono alcuni attributi come compensare attributo per le interruzioni di colore che richiedono sempre di aggiungere un suffisso. Mentre specifichi un valore per gli attributi con suffisso in KUTE.js, assicurati sempre di includere il valore tra virgolette.
Nell'esempio seguente, ho animato il valore di offset del primo stop in un gradiente e il colore del secondo stop. Da compensare richiede un suffisso, ho incluso il valore tra virgolette.
var offsetAnimation = KUTE.allTo (".stop1", attr: offset: '90% ', ripetizione: 1, offset: 1000, yoyo: true, easing:' easingCubicIn '); var colorAnimation = KUTE.allTo (".stop2", attr: stopColor: 'black', repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn'); var scaleAnimation = KUTE.allTo ("circle", svgTransform: scale: 2, ripetizione: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn');Ci sono tre diversi gradienti nella demo e ognuno di questi gradienti ha due stop di colore con i nomi delle classi STOP1 e STOP2. Ho anche applicato una trasformazione di scala usando il svgTransform attributo, che abbiamo discusso nel terzo tutorial della serie.
In questo tutorial, hai appreso le diverse funzioni di andamento disponibili in KUTE.js e come puoi utilizzarle per controllare il ritmo delle tue animazioni. Hai anche imparato come animare diversi tipi di attributi.
Ho provato a coprire tutti gli aspetti importanti di KUTE.js in questa serie. Questo dovrebbe essere sufficiente per aiutarti a usare KUTE.js con sicurezza nei tuoi progetti. Puoi anche leggere la documentazione per saperne di più sulla libreria.
Ti suggerisco inoltre di consultare il codice sorgente e vedere come funziona effettivamente la libreria. Se hai domande o suggerimenti relativi a questo tutorial, sentiti libero di condividerli nei commenti.
