Share
In dieser Serie haben Sie bisher gelernt, die CSS-Eigenschaften verschiedener Elemente zu animieren, verschiedene SVG-bezogene Animationen zu erstellen und den Textinhalt verschiedener Elemente auf einer Webseite zu animieren. Es gibt eine weitere Möglichkeit, die Elemente auf einer Webseite mithilfe von KUTE.js zu animieren, und zwar durch Ändern der Werte verschiedener Attribute. Dazu müssen Sie das Attribut-Plugin in Ihr Projekt aufnehmen.
In diesem Lernprogramm erfahren Sie, wie Sie mit dem Attribut-Plugin den Wert verschiedener Attributarten in KUTE.js animieren. Wir werden auch verschiedene Beschleunigungsfunktionen besprechen, mit denen Sie das Tempo verschiedener Animationen steuern können.
Objekte im wirklichen Leben bewegen sich sehr selten linear. Sie beschleunigen oder verlangsamen sich. Sogar die Beschleunigung und Verzögerung treten in unterschiedlichen Größen auf. Bis zu diesem Punkt sind alle unsere Animationen linear fortgeschritten. Das fühlt sich überhaupt nicht natürlich an. In diesem Abschnitt lernen Sie alle Beschleunigungsfunktionen kennen, die KUTE.js für die Steuerung der Geschwindigkeit verschiedener Animationen bereitstellt.
Die grundlegenden Beschleunigungsfunktionen in der Bibliothek sind standardmäßig in der Core Engine enthalten. Angenommen, Sie möchten das anwenden QuadraticInOut eine Animation zu erleichtern. Dies kann auf zwei Arten erreicht werden:
Lockerung: KUTE.Easing.easingQuadraticInOut // ODER Lockerung: 'easingQuadraticInOut'
Jede der Beschleunigungsfunktionen verfügt über eine eindeutige Kurve, die bestimmt, wie sich die Elemente während der Animation beschleunigen. EIN sinusförmig Kurve bedeutet lineare Beschleunigung. Denken Sie daran, dass dies anders ist als linear Beschleunigungsfunktion. Das linear Die Funktion impliziert eine lineare Geschwindigkeit der Animation, während eine Sinuskurve eine lineare Beschleunigungsgeschwindigkeit für die Animation impliziert. Mit anderen Worten, die Geschwindigkeit der Animation nimmt linear zu oder ab. Ähnlich, quadratisch bedeutet Beschleunigung mit einer Zweierpotenz, kubisch impliziert eine Potenz von drei, viertel impliziert eine Potenz von vier und Quintett impliziert eine Macht von fünf. Es gibt auch kreisförmig und exponentiell Entlastungsfunktionen.
Sie können anhängen Im, aus, oder InOut zu einer der Beschleunigungsfunktionen. Der Wert Im impliziert, dass die Animation sehr langsam beginnt und bis zum Ende beschleunigt. Der Wert aus impliziert, dass die Animation mit maximaler Geschwindigkeit startet und dann langsam verlangsamt, bis sie am Ende zum Stillstand kommt. Der Wert InOut bedeutet, dass die Animation am Anfang schneller und am Ende langsamer wird.
Sie können auch verwenden prallen und elastisch Beschleunigung von Funktionen in Ihren Animationen und Anhängen Im, aus, oder InOut zu einem von ihnen. In der folgenden Demo habe ich alle diese Beschleunigungsfunktionen auf verschiedene Kreise angewendet, damit Sie sehen können, wie sie das Tempo der Animation beeinflussen.
Es ist möglich, dass keine der grundlegenden Beschleunigungsfunktionen das von Ihnen gewünschte Animationstempo bietet. In solchen Fällen können Sie die Cubic Bezier-Funktionen aus dem Experimentierzweig in Ihr Projekt aufnehmen und diese Beschleunigungsfunktionen verwenden.
Ebenso bietet KUTE.js einige physikbasierte Beschleunigungsfunktionen, die aus der Dynamics.js-Bibliothek importiert werden. Weitere Informationen zu diesen Beschleunigungsfunktionen und zur richtigen Verwendung finden Sie auf der Beschleunigungsfunktionsseite der Bibliothek.
Attribute in SVG können sowohl Zahlen als auch Zeichenfolgen als Wert akzeptieren. Die Zeichenfolgen können Farbwerte oder Zahlen sein, die mit einer Einheit wie z px, em, oder %. Die Namen der Attribute selbst können auch aus zwei Wörtern bestehen, die durch einen Bindestrich verbunden sind. Unter Berücksichtigung dieser Unterschiede bietet KUTE.js verschiedene Methoden an, mit denen die Werte verschiedener Attribute angegeben werden können.
Accentsconagua
var tween = KUTE.to ('Selektor', attr: 'r': 100); var tween = KUTE.to ('selector', attr: 'r': '10% '); var tween = KUTE.to ('Selektor', attr: 'Strichbreite': 10); var tween = KUTE.to ('Selektor', attr: strokeWidth: 10);Wie Sie sehen können, müssen Suffix-Werte in Anführungszeichen eingeschlossen werden. Ebenso müssen Attribute, die im Namen einen Bindestrich enthalten, in Anführungszeichen eingeschlossen oder im camelCase-Formular angegeben werden.
Viele Attribute akzeptieren Werte ohne Einheiten. Zum Beispiel die Strichbreite eines Pfades könnte einheitenlos sein. Ebenso müssen Sie keine Einheit für die angeben r, cx, und cy Attribute eines Kreiselements. Sie können alle diese Attribute mithilfe des Attribut-Plug-Ins von einem Wert zum anderen animieren.
Da Sie nun wissen, wie Sie verschiedene Beschleunigungsfunktionen verwenden, können Sie verschiedene Attribute zu unterschiedlichen Zeitpunkten animieren. Hier ist ein Beispiel:
var radiusAnimation = KUTE.allTo ("circle", attr: r: 75, repeat: 1, yoyo: true, Offset: 1000, Erleichterung: '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 ("circle", attr: cy: 300, repeat: 1, yoyo: true, Offset: 1000, Erleichterung: 'easingCubicOut');Das erste Tween animiert den Radius beider Kreise gleichzeitig mit alle zu() Methode, die wir im ersten Tutorial besprochen haben. Wenn eingestellt auf wahr, das Yoyo Attribut spielt die Animation in umgekehrter Richtung.
Das cx Attribut beider Kreise wird einzeln animiert. Beide werden jedoch durch denselben Knopfdruck ausgelöst. Endlich, das cy Attribut beider Kreise wird gleichzeitig mit einem animiert Versatz von 1000 Millisekunden.
Ab Version 1.5.7 können Sie das Attribut-Plugin in KUTE.js auch animieren füllen, Schlaganfall, und stopColor Attribute. Sie können gültige Farbnamen oder Hex-Werte für die Farben verwenden. Sie können die Farbwerte auch im RGB- oder HSL-Format angeben.
Wichtig ist, dass die Animationen nur funktionieren, wenn Sie den Wert dieser Eigenschaften nicht in CSS festlegen. In der folgenden Demo wird die füllen color hätte gar nicht animiert, wenn ich in unserer Demo folgendes CSS hinzugefügt hätte.
rekt füllen: braun;
Die von mir erstellte Demo ist sehr einfach, aber Sie können sie interessanter gestalten, indem Sie Transformationen anwenden und mehr Farben verwenden.
Viele SVG-Attribute mögen r und Strichbreite kann mit und ohne Suffixe arbeiten. Beispielsweise können Sie den Wert von festlegen r eine Zahl wie 10 oder in Form von Einheiten wie 10em. Es gibt einige Attribute wie Versatz Attribut für Farbstopps, für die Sie immer ein Suffix hinzufügen müssen. Stellen Sie beim Angeben eines Werts für Suffixattribute in KUTE.js immer sicher, dass Sie den Wert in Anführungszeichen setzen.
Im folgenden Beispiel habe ich den Versatzwert des ersten Stopps in einem Verlauf und die Farbe des zweiten Stopps animiert. Schon seit Versatz erfordert ein Suffix, ich habe den Wert in Anführungszeichen gesetzt.
var offsetAnimation = KUTE.allTo (".stop1", attr: offset: '90% ', repeat: 1, offset: 1000, yoyo: true, easing:' easingCubicIn '); var colorAnimation = KUTE.allTo (".stop2", attr: stopColor: 'black', repeat: 1, Versatz: 1000, yoyo: true, easing: 'easingCubicIn'); var scaleAnimation = KUTE.allTo ("circle", svgTransform: scale: 2), Wiederholung: 1, Versatz: 1000, yoyo: true, Erleichterung: 'easingCubicIn');Es gibt drei verschiedene Farbverläufe in der Demo, und jeder dieser Farbverläufe hat zwei Farbstopps mit den Klassennamen stop1 und stop2. Ich habe auch eine Skalentransformation mit der svgTransform Attribut, das wir im dritten Tutorial der Serie besprochen haben.
In diesem Lernprogramm haben Sie die verschiedenen in KUTE.js verfügbaren Beschleunigungsfunktionen kennen gelernt und erfahren, wie Sie diese verwenden können, um das Tempo Ihrer eigenen Animationen zu steuern. Sie haben auch gelernt, verschiedene Arten von Attributen zu animieren.
Ich habe versucht, alle wichtigen Aspekte von KUTE.js in dieser Serie abzudecken. Dies sollte ausreichen, um KUTE.js in Ihren eigenen Projekten sicher einsetzen zu können. Sie können auch die Dokumentation lesen, um mehr über die Bibliothek zu erfahren.
Ich würde auch empfehlen, dass Sie den Quellcode durchgehen und sehen, wie die Bibliothek tatsächlich funktioniert. Wenn Sie Fragen oder Tipps zu diesem Tutorial haben, können Sie diese gerne in den Kommentaren teilen.
