Hallo zusammen. zm soft hat sich Ende des letzten Jahres (Ende 2023) als Entwickler registriert und begonnen, Apps zu veröffentlichen. Wir planen auch die Veröffentlichung einer App für Entwickler, daher schauen Sie gerne vorbei.
Nutzen Sie Animationen in Ihren Apps? Schon kleine Animationen machen eine App verständlicher und attraktiver. Deshalb möchte ich heute über die Anzeige von Animationen in Android-Apps sprechen.
LottieAnimation
Ich verwende die Animationsanzeige-Bibliothek LottieAnimation. Ich verwende sie, weil relativ einfach leichte Animationen angezeigt werden können.
Welche Animationen sind möglich / Arten von Animationen
Zunächst ist ein großer Vorteil dieser Bibliothek die Fülle kostenlos verfügbarer Animationen. Zum Beispiel gibt es Animationen wie die folgenden.
Diese Animationen werden auf der offiziellen Website LottieFiles veröffentlicht. Es gibt viele kostenpflichtige Animationen, aber wenn Sie die Suche auf kostenlose beschränken, gibt es ausreichend verfügbare Optionen. Da ich grundsätzlich nicht die Fähigkeit oder Energie habe, Animationen von Grund auf zu erstellen, überlege ich zuerst, ob es auf dieser Website etwas Passendes gibt, wenn ich eine Bewegung benötige. Zum Beispiel können Sie durch die Verwendung solcher Animationen dem Benutzer beim ersten Anzeigen zeigen, wo er klicken kann. Ich habe tatsächlich die Animation auf der rechten Seite verwendet, um Benutzer auf Bedienungsschritte hinzuweisen.
Der Punkt ist die Einfachheit
Auch bei der Implementierung kann man sehr einfach vorgehen. Wenn Sie beispielsweise einfach Animationen in einem definierten Layout anzeigen möchten, reicht eine Definitionform wie die folgende aus, damit es funktioniert. Es ist schön, dass es ohne Logik-Implementierung funktioniert.
Einfache Implementierungsmethode von Lottie
Die Implementierung von Lottie ist sehr einfach. Es funktioniert einfach dadurch, dass Animationen in ein bestimmtes Layout eingebettet werden, ohne dass zusätzliche Logik erforderlich ist.
Implementierungsbeispiel:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Grundlegende Verwendung von Lottie
Die grobe Verwendung von Lottie funktioniert wie folgt:
- Integration der Bibliothek (Änderung von build.gradle)
- Abrufen und Platzieren der Animationsdatei
- Einstellung der Layoutdatei
- Anpassung der Animation
Konkrete Implementierungsbeispiele und Code
Im Folgenden stelle ich konkrete Implementierungsbeispiele für die Verwendung von Lottie bereit. Dies umfasst das Importieren der Bibliothek, das Platzieren von Animationsdateien, das Konfigurieren der Layoutdatei und das Anpassen von Animationen.
Eintrag in build.gradle / Bibliotheksintegration:
Integrieren Sie zunächst die Bibliothek, um Lottie verwenden zu können.
Wenn es keine Kombinationsprobleme gibt, verwenden Sie die neueste Umgebung.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Platzierung der Animationsdatei:
Laden Sie eine Animationsdatei (.json) Ihrer Wahl von der offiziellen Website LottieFiles herunter und platzieren Sie sie im res/raw-Ordner Ihrer App.
Einstellung der Layoutdatei:
Fügen Sie LottieAnimationView zum XML-Layout hinzu und verweisen Sie auf die heruntergeladene Animationsdatei.
Anpassung der Animation:
Passen Sie das Animationsverhalten nach Bedarf an. In den Animationseinstellungen können Sie folgende Dinge tun:
- Ein- / Ausschalten der Schleifenwiedergabe
- Angabe der Schleifenanzahl
- Angabe der Wiedergabegeschwindigkeit (einschließlich umgekehrte Wiedergabe)
Wenn Sie dynamische Verarbeitung hinzufügen, können Sie auch Wiedergabe / Stop zu beliebigen Zeiten durchführen oder die Wiedergabegeschwindigkeit ändern.
Zunächst zur statischen Angabemethode. Das Animationsverhalten ändert sich je nach den folgenden Einstellungen.
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
In diesem Beispiel wird die Datei your_lottie_animation.json mit einer Wiedergabegeschwindigkeit von 0,15x automatisch abgespielt und wiederholt wiedergegeben.
Nächstes ist dynamische Verarbeitung.
lottieAnimationView.playAnimation()
Die obige Verarbeitung ermöglicht die Wiedergabe. Neben der Wiedergabe können Sie auch Einstellungen ändern, um die Wiedergabe zu stoppen und die Geschwindigkeit zu ändern. Sie können auch wie folgt einen Listener setzen und das Ende der Wiedergabe erkennen und verarbeiten.
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// Verarbeitung beim Start der Animation
}
override fun onAnimationEnd(animation: Animator) {
// Verarbeitung am Ende der Animation
}
override fun onAnimationCancel(animation: Animator) {
// Verarbeitung, wenn die Animation abgebrochen wird
}
override fun onAnimationRepeat(animation: Animator) {
// Verarbeitung, wenn die Animation wiederholt wird
}
})
Vorsichtsmaßnahmen und Fehlerbehebung
Lottie ist sehr praktisch, hat aber einige Vorsichtsmaßnahmen. Insbesondere können Positionsänderungen von Objekten nicht wie erwartet funktionieren. Wir erklären auch Stack-Overflow-Probleme bei der Verarbeitung am Ende von Animationen und das Verhalten nach onPause.
Fehlerbehebungsbeispiel 1:
Dies ist ein Problem mit meiner Implementierung, aber ich habe einen Stack-Overflow durch die Verarbeitung von Animationsendbehandlung verursacht. Konkret gab es ein Problem mit der Verarbeitung, die Rückwärts abspielen sollte, wenn die Animation das Ende erreichte, und dann Vorwärts- und Rückwärtswiedergabe wiederholte. Ich habe das Problem gelöst, indem ich es wie folgt zu einem Post zum Hauptthread und einer Warteschlange gemacht habe.
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// Verarbeitung beim Start der Animation
}
override fun onAnimationEnd(animation: Animator) {
// Verarbeitung am Ende der Animation
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // Umkehrung der Geschwindigkeit für umgekehrte Wiedergabe
lottieAnimationView.post {
// Direkter Aufruf verursacht Stack-Overflow durch rekursive Aufrufe, daher POST
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// Verarbeitung, wenn die Animation abgebrochen wird
}
override fun onAnimationRepeat(animation: Animator) {
// Verarbeitung, wenn die Animation wiederholt wird
}
})
Fehlerbehebungsbeispiel 2:
Eine andere Sache, die Sie beachten sollten, ist die Verarbeitung nach onPause. Um unnötige Operationen zu vermeiden, sollte die Animation im Hintergrund gestoppt werden.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// Animation starten
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Wenn jedoch bei Animationsende oder ähnlichem Verarbeitung durchgeführt wird, ist dies jedoch nicht ausreichend. Daher war es notwendig zu prüfen, ob die übergeordnete View nicht getrennt wurde, und die Verarbeitung erneut durchzuführen.
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Zusammenfassung
Lottie ist ein leistungsstarkes Tool zur Verbesserung der App-Benutzeroberfläche. Es gibt eine Fülle kostenlos verfügbarer Animationen und die Implementierung ist einfach. Wenn Sie die Vorsichtsmaßnahmen verstehen und ordnungsgemäß handeln, können Sie große Vorteile bei der App-Entwicklung erzielen. Obwohl es einige Vorsichtsmaßnahmen gibt, ist es insgesamt eine sehr benutzerfreundliche Bibliothek mit vielen kostenlosen Ressourcen. Ich bin sicher, dass es dazu beiträgt, das Aussehen der App zu verbessern, also probieren Sie es aus.