Share
Il primo tutorial della serie si è concentrato sulla presentazione di un'introduzione facile per principianti alla libreria KUTE.js. In quel tutorial, abbiamo solo animato il opacità e rotateZ proprietà per i nostri elementi. In questo tutorial, imparerai come animare il resto delle proprietà CSS usando KUTE.js.
Alcune di queste proprietà richiedono il caricamento del plugin CSS, mentre altre possono essere animate utilizzando il motore principale stesso. Entrambi questi scenari saranno discussi separatamente nel tutorial.
Il motore KUTE.js di base può animare solo le proprietà del modello di box più comuni: larghezza, altezza, superiore, e sinistra. Dovrai usare il plugin CSS per animare quasi tutte le altre proprietà del modello box. Ecco un esempio che anima la posizione in alto, la larghezza e l'altezza delle nostre scatole dal precedente tutorial:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (casellaA, altezza: 100, altezza: 175); var animateB = KUTE.fromTo (casellaB, larghezza: 100, larghezza: 200);
Avresti potuto notare che l'ho usato allFromTo () per animare la proprietà superiore di tutte le caselle. Tuttavia, ho usato da A() per animare le singole caselle. Dovresti ricordare che le caselle rimangono nel loro stato finale una volta completata l'animazione.
Con l'aiuto del plugin CSS, sarai in grado di animare margine, imbottitura, e larghezza del bordo anche. Una volta incluso il plug-in nel progetto, il resto del processo è esattamente lo stesso.
È possibile animare quasi tutte le proprietà di trasformazione indicate nella specifica con l'aiuto del motore principale stesso. In questo caso non è necessario caricare il plugin CSS.
Puoi animare la traduzione dell'elemento nello spazio 2D usando tradurre. Allo stesso modo, puoi usare translateX, translateY, e translateZ per animare gli elementi lungo i rispettivi assi. Per il translateZ proprietà per avere alcun effetto, dovrai anche impostare un valore per il parentPerspective proprietà. Ecco un esempio:
Accentsconagua
var animateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var animateA = KUTE.fromTo (boxA, translateZ: 0, translateZ: 50, parentPerspective: 100, parentPerspectiveOrigin: "0% 0%"); var animateB = KUTE.fromTo (boxB, translateX: 0, translateX: -200); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start ();, false);Se si fa clic sul Avvia animazione pulsante e osserva attentamente l'animazione, vedrai che la casella rossa traduce prima -200 nella direzione X prima. Dopodiché, si sposta nella sua posizione originale e inizia a tradurre nella direzione Y. La ragione per la scatola da animare translateX primo è che abbiamo aggiunto un ritardo per il translateY animazione usando il compensare proprietà.
Proprio come la traduzione, puoi anche eseguire rotazioni lungo un asse specifico usando il ruotare, rotateX, RotateY, e rotateZ proprietà. Da rotateX e RotateY sono rotazioni 3D, dovrai usare il prospettiva proprietà per l'animazione di rotazione per funzionare come previsto. L'esempio seguente mostra come usare il prospettiva proprietà influenza l'animazione generale per queste due proprietà.
var animateAll = KUTE.allFromTo (theBoxes, rotazione: 0, rotazione: 360, offset: 1000); var animateA = KUTE.fromTo (casellaA, rotazioneY: 0, rotazioneY: 180, prospettiva: 100); var animateB = KUTE.fromTo (casellaB, rotazioneY: 0, rotazioneY: -180); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start ();, false);Nell'esempio sopra, la casella A e la casella B iniziano la loro rotazione lungo l'asse Y contemporaneamente, ma l'animazione risultante è molto diversa a causa della prospettiva proprietà. Potresti aver notato che la scatola arancione non sta eseguendo la rotazione attorno al suo centro che è stata applicata usando animateAll. Questo perché tutte le animazioni hanno una durata di 500 millisecondi per impostazione predefinita e le stiamo applicando entrambe animateAll e animateA sulla scatola arancione allo stesso tempo.
Da animateA viene applicato dopo animateAll, la sua animazione ha la precedenza su animateAll. Vedrai che la rotazione comune sta usando animateAll è ancora applicato sulla scatola arancione una volta aumentata la durata dell'animazione. In altre parole, non è possibile animare diverse proprietà di trasformazione utilizzando più oggetti di interpolazione allo stesso tempo. Tutte le proprietà di trasformazione che si desidera animare devono essere specificate all'interno di un singolo oggetto di interpolazione. Il seguente esempio dovrebbe chiarire:
// Questo non funzionerà come previsto var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes, rotazione: 0, rotazione: 360, offset: 1000); startButton.addEventListener ("click", function () translateAll.start (); rotateAll.start ();, false); // Funzionerà come previsto var rtAll = KUTE.allFromTo (theBoxes, translateY: 0, ruotare: 0, translateY: 100, ruotare: 360, offset: 1000); startButton.addEventListener ("click", function () rtAll.start ();, false);Come accennato in precedenza, non tutte le proprietà CSS possono essere animate utilizzando solo il motore KUTE.js di base. È necessario utilizzare un plugin CSS aggiuntivo per animare proprietà come padding, margine, posizione di sfondo delle immagini e altre proprietà relative ai bordi. Quindi, prima di provare uno degli esempi in questa sezione, dovresti includere il plugin nel tuo progetto.
Una volta incluso il plugin, sarai in grado di animare il plugin border-radius proprietà utilizzando borderRadius. Puoi anche animare tutto l'angolo border-radius valori individualmente utilizzando borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, e borderBottomRightRadius. Ecco un esempio che mostra l'animazione in azione.
Se si fa clic sul Avvia animazione pulsante, noterai che il raggio del bordo in alto a sinistra per la casella rossa e gialla è animato dopo un ritardo. Questo è a causa del compensare proprietà. Il resto dei raggi sono animati non appena clicchiamo sul pulsante. L'esempio sopra è stato creato usando il seguente codice:
var animateAll = KUTE.allFromTo (theBoxes, borderTopLeftRadius: '0%', borderTopLeftRadius: '100%', offset: 1000); var animateA = KUTE.fromTo (boxA, borderTopRightRadius: '0%', borderTopRightRadius: '100%'); var animateB = KUTE.fromTo (boxB, borderBottomLeftRadius: '0%', borderBottomLeftRadius: '100%'); var animateC = KUTE.fromTo (boxC, borderBottomRightRadius: '0%', borderBottomRightRadius: '100%'); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();, false);Non abbiamo incatenato insieme gli oggetti interpolati, quindi tutte le animazioni iniziano subito questa volta. Puoi anche animare il colore dei diversi bordi in modo simile usando colore del bordo, borderTopColor, borderLeftColor, borderBottomColor, e borderRightColor.
In questo tutorial abbiamo appreso diverse proprietà CSS che possono essere animate con e senza l'uso del plugin CSS KUTE.js. Se avete domande, fatemelo sapere nei commenti.
Il prossimo tutorial riguarderà diverse animazioni che possono essere create usando il plugin SVG di KUTE.js.
