English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
anime.js
anime.js ist eine flexible leichte JavaScript-Bibliothek für Animationen.
Es ist mit CSS, einigen Transformationen, SVG, DOM-Attributen und JS-Objekten verbunden.
Eigenschaften
In der Entwicklung von Webseiten oder Apps kann Animation, wenn sie korrekt eingesetzt wird, eine aufpolierte Funktion haben. Der richtige Einsatz von Animationen kann nicht nur helfen, die Interaktion des Benutzers zu verstehen, sondern auch die Anziehungskraft und das Erlebnis der Webanwendung erheblich verbessern. Und in der heutigen Webentwicklung ist Animation bereits ein Designstandard und wird immer wichtiger. Besonders an Stellen, wo der Benutzer interagiert, kann Animation den Benutzern besser zurückschlagen und das Benutzererlebnis verbessern.
In der Webentwicklung gibt es viele Techniken, um Animationen zu realisieren. In diesem Artikel verwenden wir die leichte und mächtige JavaScript-Bibliothek anime.js, um Animationseffekte zu schreiben. Mit ihr kann man Animationen sehr einfach erstellen und verwalten. Wenn Sie noch nicht vertraut mit der Verwendung dieser Bibliothek sind, können Sie einen früheren Einführungsaufsatz lesen. Dieser Artikel verwendet sie hauptsächlich, um den folgenden Effekt zu realisieren:
Dieser Animationseffekt ist sehr einfach, er besteht hauptsächlich aus einem Kreis und einem weißen Strich.-Der Radius kann sehr bequem dazu beitragen, diesen Kreis zu erstellen. Seine Verwendung ist möglicherweise einfacher als die Verwendung von SVG, um einen Kreis zu erstellen, und die Menge des Codes ist auch geringer. Allerdings wird in diesem Effekt der weiße Strich mit SVG umgesetzt, daher wird der Kreis auch mit SVG umgesetzt. Und SVG wird immer beliebter, und SVG ist ein Vektor, der frei vergrößert und verkleinert werden kann. Hier ist der SVG-Code für diesen Kreis:
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32> <circle class="circle" cx="16" cy="16" r="16" fill="#0c3"/> </svg>
Der obige Code ist einfach und klar, er zeichnet einen Radius von16px grüner Kreis:
Zunächst einmal eine einfache Animationseffekt zu realisieren, den Kreis von leer bis zur vollen Größe zu vergrößern. Um diesen Effekt zu erreichen, müssen wir zwei Dinge tun:1、dem Kreis einen Klassenamen zu geben;2、eine Instanz von anime.js timeline zu erstellen, um mehrere Animationseffekte zusammenzuführen. Natürlich müssen Sie die timeline nicht verwenden, um Animationseffekte zu erstellen, Sie können sie auch direkt über den Konstruktor erstellen. Der Vorteil der timeline ist jedoch, dass sie die Animationen besser verwalten kann, z.B. die Übergänge und Verzögerungen zwischen den verschiedenen Effekten, und wir können die Animationseffekte präziser steuern. Der hier verwendete Vergrößerungseffekt wird direkt durch die Vergrößerung dieses SVG implementiert, der Code ist wie folgt:
var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
.add({
targets: '.checkmark',
scale: [
{ value: [0, 1], duration: 600, easing: 'easeOutQuad' }
]
)
Lassen Sie mich diese Zeile einfach erklären: Zunächst wird eine Instanz von anime definiert, und durch autoplay, direction und loop wird definiert, dass die Animation automatisch wiedergegeben und ständig in der Reihenfolge wiederholt wird. Durch den Parameter targets werden die Elemente festgelegt, die animiert werden sollen, nämlich checkmark, von 0 bis1Die Vergrößerung wird durchgeführt, die Animationszeit beträgt600 Millisekunden, und die Bewegungskurve der Animation wurde ebenfalls definiert.
Bei der Animationserstellung ist die Auswahl der Zykluszeit der Animation ein sehr zu beachtendes Thema. Einerseits möchten wir nicht, dass die Benutzer zu lange warten, da dies das gesamte Interaktionserlebnis beeinträchtigen und die Benutzer während des Interaktionsprozesses träge fühlen lässt. Andererseits möchten wir auch nicht, dass alle Interaktionsaktionen des Benutzers sofort erfolgen, da dies auch plötzlich erscheinen kann. In diesem Beispiel ist der Zyklus der Vergrößerung und Verkleinerung der Animation etwas zu lang, natürlich ist es im Entwicklungsstadium vorteilhaft, ihn etwas zu verlängern, um das Debugging zu erleichtern. Aber in der tatsächlichen Produktionsumgebung ist es am besten, die UI-Animation so einfach wie möglich zu gestalten. Daher geht es im Animationsentwicklungsbereich darum, durch ständiges Debugging das ideale Zustand zu erreichen. Tatsächlich können einige Animationskurvenwerkzeuge das Animationserlebnis natürlicher und komfortabler gestalten, hier kann man sich an einer Anleitung von Googles Animationskurven beziehen.
Die Verwendung von Kurven in der Animationsentwicklung ist ein unverzichtbarer Bestandteil, der das Erlebnis der Animation komfortabler und natürlicher machen kann. In der Praxis ist es wichtig, bei verschiedenen Arten von Animationen verschiedene Animationskurven auszuwählen, was ein Muss bei der Animation ist. Die Wahl der Kurven ist auch abhängig von der spezifischen Szene der Animation, wie z.B. Animationen zwischen Formen, Parabolbewegungen usw., kurz gesagt, es muss den Gesetzen der physischen Bewegung entsprechen. In CSS3in oft verwendete Bewegungskurven sind ease-in, ease-out und ease-in-out, wie z.B. ease-out bedeutet Verlangsamung am Ende, Verlangsamung macht die Animation am Anfang schneller als eine lineare Animation und verlangsamt sie am Ende. ease-out-Animation, bei der die Animation am Anfang langsam und am Ende schnell ist, im Gegensatz zur Verlangsamung am Ende. In der Regel wird in UI-Animationen der Animationseffekt mit Verlangsamung am Ende, also ease-out. Daher ist in diesem Beispiel der Animationseffekt der Checkbox der Animationseffekt mit Verlangsamung am Ende geeignet.
Der nächste Schritt ist die Animation der Markierung. Formen wie die Markierung werden in der Regel durch Pfade (path) in SVG realisiert. Eine detaillierte Erklärung der spezifischen Pfade kann man findenDiesen Artikel lesen. In der Praxis wird in der Regel mit Vektor-Designwerkzeugen wie AI oder Inkscape gearbeitet, um dann das SVG-Format zu exportieren. Was diese Markierung betrifft, ist ihre Realisierung sehr einfach, drei Ankerpunkte reichen aus, um die Form einer Markierung zu erzeugen. Schließlich wird der Wert der linecap-Eigenschaft auf2.5px, um die runden Ecken der Markierung an beiden Enden zu erreichen.
Ein zu beachtendes Punkt ist: Während des gesamten Designprozesses müssen bestimmte Designprinzipien eingehalten werden. Zum Beispiel ist in diesem Effekt Konsistenz ein wichtiger Designgrundsatz. Wenn in einem statischen Bild Runden verwendet werden, sollte diese Runde auch in der Animation beibehalten werden. Natürlich können Sie auch eckige Kanten verwenden. Insgesamt sollten Sie während des gesamten Prozesses die UI-Konsistenz beibehalten.
Der exportierte Code lautet wie folgt:
<path class="check" d="M9 16l5 5 9-9" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">
Kombiniert mit dem Kreis, das Ergebnis ist wie folgt:
Es sieht jetzt noch gut aus, nur noch ein letzter Schritt: Diese Markierung muss eine Animationseffekt zeichnen. Die Umrandung der Animationseffekte mit SVG wurde bereits oft besprochen. In anime.js ist es sehr einfach, eine Umrandungszeichnungsanimation zu realisieren, da es die Methode anime.setDashoffset bietet, um die Länge des Pfades (path) zu berechnen. Mit ihr kann ein Zeichnungsanimationseffekt realisiert werden. Der Code lautet wie folgt:
checkTimeline
.add({ ... }) /* Vorherige Schritte */
.add({
targets: '.check',
strokeDashoffset: {
value: [anime.setDashoffset, 0],
duration: 700,
delay: 200,
easing: 'easeOutQuart'
}
Es ist immer noch das alte Schema, zuerst den zu animierenden Element auszuwählen. Danach wird der Wert von dashoffset der Pfadeinstellungen eingestellt, der ursprüngliche Wert ist die Länge des gesamten Pfades (path), der außerhalb des Canvas unsichtbar ist; Durch das Setzen des Wertes auf 0 mit dem anime.setDashoffset-Method, wird er im Canvas sichtbar und die Animationseffekte können realisiert werden.
Schließlich wird durch die Einstellung der Transformationsposition des Hakens seine Position verschoben, so dass er in der Mitte des Kreises liegt.
OK, eine Checkbox mit Animationseffekt ist fertig! Man kann erkennen, dass die Entwicklung von Animationseffekten mit anime.js sehr einfach ist.
Zusammenfassung
Die oben genannten sind von mir vorgestellten anime.js-Implementierungen von Checkboxen mit Umrandungsanimationseffekten (Empfohlen), hoffentlich hilfreich für alle.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig und eigenständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald überprüft, wird diese Website die verdächtigen urheberrechtlichen Inhalte sofort löschen.)