Animationen sind ein leistungsstarkes Tool, das das Benutzererlebnis auf einer Website verbessern kann. Bei richtiger Anwendung können sie eine Website ansprechender, interaktiver und intuitiver machen. In diesem Artikel werden wir die Animationsbibliothek für SwifWeb erkunden. Ich spreche von der berühmtesten Bibliothek. Lassen Sie es uns installieren und einen Blick darauf werfen, wie man es verwendet! animate.css- Installation Wenn Sie neu bei SwifWeb sind, schauen Sie sich bitte an, wie Sie ein neues Projekt erstellen. in diesem Artikel Öffnen Sie im Projekt und bearbeiten Sie den Abschnitt , sodass er wie folgt aussieht: Package.swift dependencies dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ] Bearbeiten Sie als Nächstes , damit es wie folgt aussieht: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), Öffnen Sie dann fügen Sie hinzu und konfigurieren Sie es in der Methode wie folgt: App.swift import Animate didFinishLaunching Lifecycle.didFinishLaunching { Animate.configure() } Es funktioniert nicht, wenn Sie vergessen, es zu konfigurieren. Verwendung Alle Klassen aus der Originalbibliothek sind unter der Haube und für SwiftWeb-Benutzer steht eine sehr praktische und schöne Swift-Schnittstelle zur Verfügung. Nehmen Sie ein beliebiges Element und fügen Sie ihm eine Animation hinzu, die gestartet wird, sobald es dem DOM hinzugefügt wird. @DOM override var body: DOM.Content { Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello) // <- here we added jello animation } Oder nehmen Sie ein beliebiges Element auf dem Bildschirm und fügen Sie ihm spontan eine Animation hinzu: lazy var img = Img() @DOM override var body: DOM.Content { self.img .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) Button("Animate").onClick { self.img.animate(.jello) // <- here we animate } } Die vollständige Liste der Animationen ist auf der Bibliothekswebsite verfügbar https://animate.style Darüber hinaus können Sie Einstellungen für , und festlegen. duration delay repeat .animate(.jello, delay: 0, duration: 1, repeat: 0) Alle diese Parameter sind optional. Werte werden automatisch entfernt, wenn die Animation endet. Alternativ können diese Optionen auch mit separaten Methoden festgelegt werden: .animateDelay(0) .animateDuration(1) .animateRepeat(0) Und Sie sollten diese Werte auch manuell entfernen: .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat() Lassen Sie uns mehr über jede Option sprechen. Verzögerung Vordefinierte Komfortwerte: .delay0s // animation starts immediately .delay1s // adds a 1-second delay .delay2s // adds a 2-second delay .delay3s // adds a 3-second delay .delay4s // adds a 4-second delay .delay5s // adds a 5-second delay Erstellen Sie in der Erweiterung Ihren eigenen Komfortwert: extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay } Oder Sie können einen beliebigen oder Wert wie in den obigen Beispielen verwenden. Float Int Dauer Vordefinierte Komfortwerte: .slow // executes animation for 2 seconds .slower // executes animation for 3 seconds .fast // executes animation for 0.8 seconds .faster // executes animation for 0.5 seconds Erstellen Sie in der Erweiterung Ihren eigenen Komfortwert: extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s } Oder Sie können einen beliebigen Float- oder Int-Wert wie in den obigen Beispielen verwenden. Wiederholen Vordefinierte Komfortwerte: .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely Erstellen Sie in der Erweiterung Ihren eigenen Komfortwert: extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times } Oder Sie können einen beliebigen Wert wie in den obigen Beispielen verwenden. Int Beispiel mit Convenience-Werten .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2) Und separate Methoden: .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2) Empfohlene Vorgehensweise Animationen können das Erlebnis eines Benutzers mit einer Weboberfläche erheblich verbessern. Es ist jedoch wichtig, einige Richtlinien zu befolgen, um sicherzustellen, dass das Erlebnis nicht negativ beeinflusst wird. Durch die Einhaltung der folgenden Regeln können Sie einen positiven Start schaffen. Verwenden Sie aussagekräftige Animationen Animationen sollten eine klare Absicht vermitteln und nicht nur dekorativ sein. Vermeiden Sie es, aufmerksamkeitsstarke Animationen ausschließlich wegen ihrer Auffälligkeit zu verwenden. Verwenden Sie sie stattdessen, um etwas Besonderes in der Benutzeroberfläche hervorzuheben. Verwenden Sie Eingangs- und Ausgangsanimationen, um den Benutzer an der Benutzeroberfläche zu orientieren und einen Übergang in einen neuen Zustand zu signalisieren. Verspieltheit ist gut, aber seien Sie vorsichtig Das Hinzufügen von Verspieltheit zu einer Benutzeroberfläche kann von Vorteil sein. Stellen Sie jedoch sicher, dass die Animationen das Benutzererlebnis nicht behindern oder die Leistung der Seite aufgrund übermäßiger Nutzung beeinträchtigen. Vermeiden Sie die Animation großer Elemente Das Animieren großer Elemente kann zu einer schlechten Benutzererfahrung führen, Verwirrung stiften und die Animationen nervös erscheinen lassen. Daher ist es ratsam, die Animation großer Elemente zu vermeiden, da sie für den Benutzer nur einen geringen Mehrwert bieten. Vermeiden Sie endlose Animationen Während animate.css Hilfsklassen für sich wiederholende Animationen, einschließlich unendlicher, bereitstellt, wird empfohlen, endlose Animationen zu vermeiden. Diese Animationen können Benutzer ablenken und verärgern, was zu einem negativen Erlebnis führt. Setzen Sie sie daher mit Bedacht ein! Fallstricke Sie können keine Inline-Elemente animieren Das Animieren von Inline-Elementen wird gemäß den CSS-Animationsspezifikationen nicht empfohlen und funktioniert möglicherweise nicht in allen Browsern. Elemente oder , einschließlich und Containern und deren untergeordneten Elementen, sollten stattdessen animiert werden. Um ein Element auf Inline-Ebene zu animieren, können Sie seine Anzeigeeigenschaft auf Inline-Block setzen. block inline-block grid flex Überlauf Beim Animieren von Elementen auf dem Bildschirm können einige Animate.css-Animationen Bildlaufleisten auf Ihrer Webseite erstellen. Um dies zu vermeiden, können Sie die Eigenschaft overflow:hidden im übergeordneten Element verwenden, das das animierte Element enthält. Es gibt jedoch kein definitives Rezept dafür, wann und wie man es verwendet. Intervalle zwischen Wiederholungen Es ist derzeit nicht möglich, Intervalle zwischen Wiederholungen mit reinem CSS festzulegen. Es ist jedoch möglich, den Ereignis-Listener „.animationEnd“ zu verwenden: Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) .addEventListener( .animationEnd, options: .init(once: true) ) { event, element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } } Oder noch bequemer: Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) { element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } } In beiden Fällen startet die Animation im Abstand von neu. 500 ms Das ist alles Ja, diese Bibliothek ist kompakt, aber leistungsstark! Möchten Sie mehr erfahren? Seien Sie gespannt auf die kommenden Artikel! Zögern Sie nicht, Fragen zu stellen und tragen Sie gerne dazu bei! in unserem Discord
