Share
Das erste Tutorial der Serie konzentrierte sich auf eine anfängerfreundliche Einführung in die Bibliothek KUTE.js. In diesem Tutorial haben wir nur die animiert Opazität und drehenZ Eigentum für unsere Elemente. In diesem Lernprogramm erfahren Sie, wie Sie die restlichen CSS-Eigenschaften mithilfe von KUTE.js animieren.
Für einige dieser Eigenschaften müssen Sie das CSS-Plugin laden, während andere mit der Core Engine selbst animiert werden können. Beide Szenarien werden im Tutorial gesondert behandelt.
Die Kern-Engine KUTE.js kann nur die am häufigsten verwendeten Box-Modelleigenschaften animieren: Breite, Höhe, oben, und links. Sie müssen das CSS-Plugin verwenden, um fast alle anderen Box-Modelleigenschaften zu animieren. Hier ein Beispiel, das die obere Position, Breite und Höhe unserer Boxen aus dem vorherigen Tutorial animiert:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (BoxA, Höhe: 100, Höhe: 175); var animateB = KUTE.fromTo (boxB, width: 100, width: 200);
Sie haben vielleicht bemerkt, dass ich verwendet habe allFromTo () um die Top-Eigenschaft aller Boxen zu animieren. Ich habe jedoch verwendet von zu() einzelne Boxen animieren. Sie sollten daran denken, dass die Boxen nach Abschluss der Animation in ihrem endgültigen Zustand bleiben.
Mit Hilfe des CSS-Plugins können Sie animieren Spanne, Polsterung, und Rahmenbreite auch. Nachdem Sie das Plugin in Ihr Projekt aufgenommen haben, ist der Rest des Prozesses genau derselbe.
Sie können fast alle in der Spezifikation genannten Transformationseigenschaften mit Hilfe der Core Engine selbst animieren. In diesem Fall muss das CSS-Plugin nicht geladen werden.
Sie können die Elementübersetzung im 2D-Raum mit animieren Übersetzen. Ebenso können Sie verwenden translateX, translateY, und translateZ um die Elemente entlang der jeweiligen Achsen zu animieren. Für die translateZ Eigenschaft, um einen Effekt zu haben, müssen Sie auch einen Wert für die festlegen parentPerspective Eigentum. Hier ist ein Beispiel:
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);Wenn Sie auf klicken Animation starten und beobachten Sie die Animation genau. Sie werden sehen, dass das rote Kästchen -200 zuerst in X-Richtung übersetzt. Danach bewegt es sich in seine ursprüngliche Position und beginnt in Y-Richtung zu übersetzen. Der Grund für die Box zu animieren translateX erstens haben wir eine Verzögerung für die hinzugefügt translateY Animation mit der Versatz Eigentum.
Genau wie bei der Übersetzung können Sie auch Rotationen entlang einer bestimmten Achse ausführen drehen, RotateX, drehenY, und drehenZ Eigenschaften. Schon seit RotateX und drehenY sind 3D-Rotationen, müssen Sie die verwenden Perspektive Eigenschaft, damit die Rotationsanimation wie erwartet funktioniert. Das folgende Beispiel zeigt die Verwendung von Perspektive Diese Eigenschaft wirkt sich auf die Gesamtanimation dieser beiden Eigenschaften aus.
var animateAll = KUTE.allFromTo (theBoxes, Rotation: 0, Rotation: 360, Offset: 1000); var animateA = KUTE.fromTo (BoxA, RotationY: 0, RotationsY: 180, Perspektive: 100); var animateB = KUTE.fromTo (BoxB, RotierenY: 0, RotierenY: -180); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start ();, false);Im obigen Beispiel beginnen Box A und Box B gleichzeitig mit der Drehung entlang der Y-Achse, die resultierende Animation unterscheidet sich jedoch aufgrund der Perspektive Eigentum. Möglicherweise haben Sie bemerkt, dass das orangefarbene Kästchen nicht die Rotation um seine Mitte ausführt, die darauf angewendet wurde animateAll. Dies liegt daran, dass alle Animationen standardmäßig eine Dauer von 500 Millisekunden haben und wir beide anwenden animateAll und animateA gleichzeitig auf der orangefarbenen Box.
Schon seit animateA wird nach angewendet animateAll, seine Animation hat Vorrang vor animateAll. Sie werden sehen, dass die gemeinsame Rotation verwendet animateAll wird immer noch auf das orangefarbene Feld angewendet, wenn Sie die Animationsdauer erhöhen. Mit anderen Worten, Sie können verschiedene Transformationseigenschaften nicht gleichzeitig mit mehreren Tween-Objekten animieren. Alle Transformationseigenschaften, die Sie animieren möchten, sollten in einem einzelnen Tweenobjekt angegeben werden. Das folgende Beispiel soll es deutlich machen:
// Dies wird nicht wie erwartet funktionieren var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes Drehung: 0, Drehung: 360, Offset: 1000); startButton.addEventListener ("click", function () translateAll.start (); rotateAll.start ();, false); // Dies funktioniert wie erwartet var rtAll = KUTE.allFromTo (theBoxes, translateY: 0, drehen: 0, translateY: 100, drehen: 360, offset: 1000); startButton.addEventListener ("click", function () rtAll.start ();, false);Wie bereits erwähnt, können nicht alle CSS-Eigenschaften nur mit der Kern-Engine KUTE.js animiert werden. Sie müssen ein zusätzliches CSS-Plugin verwenden, um Eigenschaften wie Auffüllung, Rand, Hintergrundposition von Bildern und andere Eigenschaften für den Rand zu animieren. Bevor Sie also eines der Beispiele in diesem Abschnitt ausprobieren, sollten Sie das Plugin in Ihr Projekt aufnehmen.
Sobald Sie das Plugin hinzugefügt haben, können Sie das animieren Grenzradius Eigenschaft mit borderRadius. Sie können auch die ganze Ecke animieren Grenzradius Werte einzeln mit borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, und borderBottomRightRadius. Hier ist ein Beispiel, das die Animation in Aktion zeigt.
Wenn Sie auf klicken Animation starten Wenn Sie auf die Schaltfläche klicken, werden Sie bemerken, dass der obere linke Randradius für die rote und gelbe Box nach einer Verzögerung animiert wird. Dies ist wegen der Versatz Eigentum. Die restlichen Radien werden animiert, sobald wir auf die Schaltfläche klicken. Das obige Beispiel wurde mit folgendem Code erstellt:
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);Wir haben die Tween-Objekte nicht miteinander verkettet, daher beginnen alle Animationen dieses Mal auf einmal. Sie können auch die Farbe verschiedener Ränder auf ähnliche Weise mit animieren Randfarbe, borderTopColor, borderLeftColor, borderBottomColor, und borderRightColor.
In diesem Lernprogramm haben wir verschiedene CSS-Eigenschaften kennen gelernt, die mit und ohne die Verwendung des CSS-Plugins KUTE.js animiert werden können. Wenn Sie Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit.
Im nächsten Tutorial werden verschiedene Animationen behandelt, die mit dem SVG-Plugin KUTE.js erstellt werden können.
