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 animate.css- Bibliothek. Lassen Sie es uns installieren und einen Blick darauf werfen, wie man es verwendet!

Installation

Wenn Sie neu bei SwifWeb sind, schauen Sie sich bitte in diesem Artikel an, wie Sie ein neues Projekt erstellen.

Öffnen Sie im Projekt Package.swift und bearbeiten Sie den Abschnitt dependencies , sodass er wie folgt aussieht:

 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 executableTarget , damit es wie folgt aussieht:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]),

Öffnen Sie dann App.swift fügen Sie import Animate hinzu und konfigurieren Sie es in der didFinishLaunching Methode wie folgt:

 Lifecycle.didFinishLaunching { Animate.configure() }

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 } }

Darüber hinaus können Sie Einstellungen für duration , delay und repeat festlegen.

 .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 Float oder Int Wert wie in den obigen Beispielen verwenden.

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 Int Wert wie in den obigen Beispielen verwenden.

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 block oder inline-block , einschließlich grid und flex 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.

Ü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) } }

Das ist alles

Ja, diese Bibliothek ist kompakt, aber leistungsstark!

Möchten Sie mehr erfahren? Seien Sie gespannt auf die kommenden Artikel!