Share
Il tutorial precedente della serie ti mostrava come animare diverse proprietà CSS di qualsiasi elemento usando KUTE.js. Tuttavia, il motore principale non consente di animare le proprietà specifiche degli elementi SVG. Allo stesso modo, non è possibile animare il morphing SVG di forme di percorso diverse o il disegno di diversi elementi SVG utilizzando i tratti. Dovrai utilizzare il plugin SVG di KUTE.js per realizzare una di queste attività.
Prima di iniziare, tieni presente che dovrai includere sia il motore di base KUTE.js che il plug-in SVG per gli esempi in questo tutorial che funzionano.
La trasformazione di una forma SVG in un'altra è una caratteristica molto comune che incontrerai. Il plugin SVG di KUTE.js ci dà tutto ciò di cui abbiamo bisogno per creare le nostre animazioni di morphing con facilità.
Ci sono tre modi per trasformare le forme SVG usando questa libreria:
Accentsconagua
da A() metodo per specificare sia il percorso SVG iniziale che finale per il tuo elemento. a() metodo ed evitare di specificare il percorso iniziale. In questo caso, il valore iniziale per il morphing sarà determinato in base al valore del d attributo dell'elemento selezionato che vuoi trasformare. KUTE.fromTo ('# shape-a', percorso: '# shape-a', percorso: '# shape-b'); KUTE.to ('# shape-a', path: '# shape-b'); KUTE.fromTo ('# shape-a', percorso: '# shape-a', percorso: 'Il percorso di # shape-b come stringa valida.'); KUTE.to ('# shape-a', path: 'Il percorso di # shape-b come stringa valida.');Durante l'inizializzazione, la libreria campiona alcuni punti in base ai percorsi che abbiamo fornito. Questi punti vengono quindi memorizzati in due diversi array. Infine, questi array sono utilizzati per l'interpolazione. Esistono numerose opzioni che è possibile configurare per controllare il comportamento di morphing per diversi percorsi.
morphPrecision: Come avrete intuito, questa opzione consente di specificare la precisione o la precisione del morphing. È specificato come numero e un valore inferiore significa maggiore precisione. Tieni presente che una maggiore precisione risulterà in una maggiore precisione, ma sarà anche dannosa per le prestazioni. Questa opzione non si applica quando si ha a che fare con forme poligonali o percorsi in cui l'attributo d è costituito solo da h, l, e v. In questi casi, vengono utilizzati i percorsi dei poligoni originali invece di campionarne di nuovi.reverseFirstPath: Puoi impostare il valore di questa opzione su vero per invertire il percorso del disegno per la prima forma. Il suo valore predefinito è falso.reverseSecondPath: Puoi impostare il valore di questa opzione su vero per invertire il percorso del disegno per la seconda forma. È anche il suo valore predefinito falso.morphIndex: A volte, i punti su un percorso potrebbero dover coprire molta distanza durante il morphing. Puoi controllare questo comportamento usando il morphIndex parametro. Quando specificato, questo parametro consente di ruotare il percorso finale in modo tale che tutti i punti percorrano la minima distanza possibile.Usiamo ciò che abbiamo imparato finora per trasformare un'icona della batteria in un'icona segnalibro. Dovresti notare che ho usato lettere minuscole l per specificare il percorso in termini relativi. Questo è il markup richiesto:
Il seguente JavaScript crea l'oggetto interpolazione e avvia l'animazione al clic del pulsante:
var morphA = KUTE.to ('# batteria-a', percorso: '# segnalibro-a', durata: 5000); startButton.addEventListener ("click", function () morphA.start ();, false);Ecco una demo che mostra il codice sopra in azione. Ho anche aggiunto un elemento in più dove imposta l'animazione di morph reverseFirstPath a vero. Questo ti aiuterà a capire l'impatto complessivo delle diverse opzioni di configurazione sul morphing. La durata dell'animazione è stata impostata su 5 secondi in modo da poter osservare da vicino entrambe le animazioni e individuare le differenze.
Nell'esempio precedente, il percorso principale non aveva sottotracciati. Ciò ha reso il morphing molto semplice. Tuttavia, questo potrebbe non essere sempre il caso.
Aggiungiamo un sottotracciato aggiuntivo al nostro segnalibro così come l'icona della batteria. Se si trasformano le icone ora, vedrete che solo il primo sottotracciato si anima. Il secondo sottotracciato scompare all'inizio dell'animazione e riappare alla fine. L'unico modo per animare tutti i sottotracciati in questi casi è cambiando i sottotracciati in percorsi individuali. Ecco un esempio:
Un altro effetto di animazione correlato all'SGG include partendo dal nulla e quindi disegnando una forma predefinita utilizzando i tratti SVG. Questo può essere usato per animare il disegno di loghi o altri oggetti. In questa sezione, imparerai come utilizzare KUTE.js per creare un'animazione di tracciamento per l'icona della bicicletta Font Awesome.
Esistono tre modi per animare i tratti SVG in KUTE.js. È possibile animare da 0% a 100% impostando il da A valori come 0% 0% e 0% 100%. Puoi anche disegnare una parte della forma SVG impostando i valori su qualcosa di simile 0% 5% e 95% 100%. Infine, puoi impostare il valore finale su 0% 0% per creare un effetto di cancellazione invece di un effetto di disegno.
Ecco il codice JavaScript che ho usato per animare la nostra bicicletta:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", draw: "0% 100%", durata: 10000); var partialAnimation = KUTE.fromTo ("#icon", draw: "0% 5%", draw: "95% 100%", durata: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", draw: "0% 0%", durata: 5000);Come puoi vedere nell'esempio seguente, non devi preoccuparti di più sottotracciati all'interno di un percorso. KUTE.js anima tutti questi sottocavi singolarmente senza problemi. La durata dell'animazione viene utilizzata per determinare il tempo per l'animazione del percorso più lungo. La durata del tratto per il resto dei sottotracciati viene quindi determinata in base alla loro lunghezza.
Abbiamo già imparato come animare i valori di trasformazione CSS nel secondo tutorial della serie. Il plugin SVG di KUTE.js consente inoltre di utilizzare il svgTransform attributo per ruotare, tradurre, ridimensionare o inclinare diversi elementi SVG su una pagina web.
Il ruotare l'attributo accetta un singolo valore che determina l'angolo di rotazione. Per impostazione predefinita, la rotazione avviene attorno al punto centrale dell'elemento, ma puoi specificare un nuovo centro di rotazione usando il transformOrigin attributo.
Il tradurre l'attributo accetta i valori nel formato tradurre: [x, y] o tradurre: x. Se fornito con un singolo valore, il valore di y si presume che sia zero.
Quando elementi di inclinazione, dovrai usare skewX e skewY. Non c'è supporto per skew [x, y] in SVG. Allo stesso modo, il scala l'attributo accetta anche solo un valore. Lo stesso valore viene utilizzato per ridimensionare gli elementi in entrambe le direzioni xey.
Ecco uno snippet di codice che applica tutte queste trasformazioni su un rettangolo e un cerchio.
var rotation = KUTE.allTo ("rect, circle", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rect, circle", svgTransform: scale: 1.5, repeat: 1, yoyo: true); var translation = KUTE.allTo ("rect, circle", svgTransform: translate: [100, -50], repeat: 1, yoyo: true); var skewing = KUTE.allTo ("rect, circle", svgTransform: skewX: 25, repeat: 1, yoyo: true);Ho impostato il yoyo parametro a vero in modo che, dopo aver riprodotto l'animazione al contrario, le proprietà di trasformazione siano impostate sul loro valore iniziale. In questo modo, possiamo ripetere le animazioni ancora e ancora cliccando sui pulsanti.
Se si preme il Ruotare nella demo, noterai che non sembra avere alcun effetto sul cerchio. Per osservare la rotazione del cerchio, dovrai applicare una trasformazione obliqua su di esso per cambiarne la forma e quindi fare clic su Ruota immediatamente.
Abbiamo iniziato questo tutorial coprendo le basi del morphing SVG e delle animazioni dei colpi. Hai imparato come trasformare meticolosamente i percorsi complessi che hanno sottofondi e come possiamo creare un effetto di traccia di cancellazione invece di uno di disegno scegliendo i giusti valori per disegnare attributo. Dopo ciò, abbiamo discusso di come possiamo usare il svgTransform attributo per animare diverse trasformazioni.
In vari tutorial, abbiamo visto quanto sia diventato potente JavaScript. Non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione su Envato Market.
Il tutorial intendeva introdurti a tutte le funzionalità del plugin SVG di KUTE.js e aiutarti a iniziare rapidamente. Puoi saperne di più sul plugin SVG leggendo la documentazione.
