Hallo Habr!
Einmal hat uns der Product Owner gebeten, über die Erstellung eines effektiven Prozesses zur Einführung von Animationen in unsere Android / iOS-Anwendung nachzudenken. Zu diesem Zeitpunkt hatten wir die Aufgabe, den Antrag mit personenbezogenen Daten für ein Darlehensprodukt vorab auszufüllen, und es dauerte einige Zeit, bis der Server antwortete. Während dieser Zeit wollten wir eine schöne Ladeanimation zeigen.
Die Aufgabe war klar: Der Designer wollte schön zeichnen, um beiden den Quellcode zu geben
Plattformen ohne Dopilivaniya seinerseits, und damit es nicht auf älteren Geräten verzögert (ja, wir unterstützen immer noch Android 4.1).
Was waren meine Optionen für die Einführung von Animation:- Stifte mit animiertem Vektor zum Zeichnen. Das Gute ist, dass das Rendern funktioniert
In einem separaten Thread (beginnend mit API 25) sind die Nachteile die Komplexität der Erstellung solcher Animationen und eine kleine Anzahl von Manipulationen mit Objekten. Für einfache Animationen funktioniert das alles gut, aber etwas komplizierter, und die Hölle beginnt. Ja, und auf verschiedenen Plattformen werden Sie nicht starten. - Gif - sie wiegen viel, haben eine feste Größe, was bedeutet, dass sie nicht normal skalieren. Und Sie werden keine besonderen Manipulationen mit ihnen vornehmen.
- Die PNG-Sequenz (kein Kommentar).
Ich grub einige Zeit in Richtung der nativen Vektoranimation von Android und GIF (oh mein Gott, wir haben diese Option immer noch in Betracht gezogen), erinnerte mich an die wunderbare Lottie-Bibliothek und zeigte sie meinen Kollegen.
Nach einigen Tests mit verschiedenen Geräten haben wir beschlossen, die Bibliothek zu implementieren, zumal ihre Funktionen beeindruckend waren. Der Designer war besonders begeistert, jetzt konnte er fast jede Animation in Adobe After Effects erstellen und mit wenigen Klicks in eine JSON-Datei exportieren. Wir waren auch begeistert, aber das Wichtigste zuerst.
Lottie wurde von Airbnb als Reaktion auf die wachsende Nachfrage nach plattformübergreifender Animation erfunden und implementiert, sodass es auf allen Plattformen gleich (fast) funktioniert. Die Entwickler selbst behaupten, dass ihr Ziel darin besteht, die maximale Anzahl von After Effects-Funktionen zu realisieren, und dies ist ihnen gelungen. Das Einbetten von Lottie-Animationen ist jetzt so einfach wie das Einfügen eines Bildes in ImageView.
Schlüssel 3 Klassen:- LottieAnimationView ist der Nachfolger von ImageView und der einfachste Weg, Animationen zu verwenden. Sie können die Animation in XML beschreiben oder im Code, die meisten Methoden werden unterstützt.
- LottieDrawable - Mit Drawable-Nachkommen mit derselben Funktionalität wie in der vorherigen Klasse können Sie Animationen auf jede Ansicht anwenden.
- Mit LottieComposition und seinem Begleiter LottieCompositionFactory können Sie Animationen aus verschiedenen Quellen vorladen und auf LottieDrawable und LottieAnimationView anwenden.
Laden von Ressourcen
Unterstützt das Laden von Ressourcen aus:
- res / raw
- src / vermögenswerte
- Json String
- Jede URL aus dem Netzwerk, die zu einer JSON- oder ZIP-Datei führt (implementiert über HttpURLConnection, um keine externen Abhängigkeiten hinzuzufügen. Wenn Sie eine Animation mit Bildern haben, müssen Sie Zip verwenden.)
- InputStream JSON- oder ZIP-Datei
Animations-Caching
Das Coole ist, dass alle Animationen, die über res / raw oder Assets heruntergeladen wurden, vom LRU-Cache gespeichert werden. Dadurch können wir keine Zeit damit verschwenden, die Animation neu zu laden und zu analysieren, da dies bei komplexen Animationen einige Zeit dauern kann. Was ist noch cooler, wenn Sie die Animation vorladen müssen und dann im nächsten Fragment die Animation sofort anzeigen müssen, können Sie den Code verwenden
LottieCompositionFactory.fromRawRes(context, rawFile)
Die Animation wird mit der rawFile-Taste zwischengespeichert, und wo Sie sie wirklich benötigen, beginnt sie fast sofort.
Fortschrittsmanagement
Mit Lottie können Sie den aktuellen Animationsstatus über setProgress (...) festlegen. Dies kann nützlich sein, wenn Sie den Upload-Status der Datei, die Bildlaufposition, verschiedene Gesten usw. animieren möchten. Ich habe verschiedene Implementierungen auf BottomSheets, PullToRefresh und CollapsingToolbarLayout gesehen.
So verwenden Sie den Fortschritt mit AppBarLayout:
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset -> val percent = Math.abs(verticalOffset).toFloat()/appBarLayout.totalScrollRange animationView.progress = percent })
Schleifen
Lottie unterstützt das Schleifen von setRepeatMode () oder setRepeatCount () nicht nur der gesamten Animation, sondern auch aller Fragmente in (0.0 ... 1.0). Dies wird durch die Eigenschaften setMinFrame, setMaxFrame, setMinAndMaxFrame implementiert. Wir haben dies verwendet, um nicht 3 Animationen für verschiedene Datei-Upload-Zustände zu implementieren: Leerlauf, Fortschritt, abgeschlossen. Hier ist ein kleiner Code, der dies löst:
when (loadingStatus) { LoadingStatus.IDLE -> { animationView.setMaxProgress(0.1f) } LoadingStatus.PROGRESS -> { animationView.setMinAndMaxProgress(0.2f, 0.9f) animationView.repeatCount = LottieDrawable.INFINITE animationView.playAnimation() } LoadingStatus.COMPLETE -> { animationView.setMinAndMaxProgress(0.9f, 1f) animationView.repeatCount = 1 animationView.playAnimation() }}
Bilder
Einer der Hauptvorteile von Lottie war für uns, dass die Bibliothek das Einfügen von Bildern direkt in die Animation unterstützt. Darüber hinaus können Sie sowohl ein statisches als auch ein dynamisches Bild einfügen, das aus dem Internet heruntergeladen wurde. Jetzt werde ich erklären, wie es funktioniert.
Bei einem statischen Bild ist alles einfach: Der Designer entlädt das Archiv mit json und dem Bild selbst.
{ "v": "5.1.13", "fr": 29.9700012207031, "ip": 0, "op": 47.0000019143492, "w": 1034, "h": 1334, "nm": " 1", "ddd": 0, "assets": [ { "id": "image_0", "w": 130, "h": 436, "u": "images/", "p": "img_0.png" }, { "id": "comp_0", "layers": [ ... ]}] }
Dies ist img_0.png, dies ist das Bild, das Sie in src / assets einfügen sollten und das sich in der Animation befindet.
Für das dynamische Laden wird die setImageAssetDelegate-Methode verwendet, an die Sie die Bitmap übergeben müssen. Wir laden das Bild mit Glide vor, sodass beim Öffnen eines Fragments mit Animation und Bild alles aus dem Cache kommt und alles ziemlich schnell ist. Hier ist der Code:
glideLoader.loadAsBitmap(imageUrl).into(object: CustomTarget<Bitmap>() { override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { viewAnimation.setImageAssetDelegate(object: ImageAssetDelegate { override fun fetchBitmap(asset: LottieImageAsset?): Bitmap { asset?.let { val resizeBitmap =Bitmap.createScaledBitmap(resource, it.width, it.height, true); return resizeBitmap } ?: run { return resource } } }) setAnimation(viewAnimation, animationImage) } override fun onLoadCleared(placeholder: Drawable?) {} })
Leistung
Natürlich ist es besser, nicht viel Animation auf Bildschirmen zu verwenden, auf denen der Benutzer viel Zeit verbringt, da dies hohe Anforderungen an den Prozessor stellt. Nach unseren Tests erreicht die Prozessorlast bei einigen Animationen 20%. Der Idealfall einer solchen Animation sind daher interaktive Elemente, die einmal ausgelöst werden.
Wenn die Animation auf einigen Geräten langsamer wird, hilft dies manchmal
viewAnimation.useHardwareAcceleration(true)
Entwickler empfehlen jedoch, diese Methode mit Vorsicht zu verwenden, da verschiedene Telefone die Hardwarebeschleunigung auf unterschiedliche Weise verwenden, sodass Sie anstelle der Beschleunigung den gegenteiligen Effekt erzielen können.
Fazit
Im Allgemeinen vereinfacht die Verwendung der Lottie-Bibliothek die Implementierung von Animationen in der Anwendung erheblich.
Die Hauptvorteile von Lottie, die wir hervorgehoben haben:- Kleine Bibliotheksgröße (300 kb)
- Plattformübergreifende Lösung ios / android / web
- Laden Sie Animationen aus dem Internet herunter
- Fortschrittsmanagement und Looping überall
- Eine große Anzahl von Funktionen aus After Effects ermöglicht es dem Designer, den beabsichtigten Effekt zu realisieren.
Nachteile:- Das Rendern erfolgt im Hauptthread, und fps können in der Anwendung erheblich sinken.
- Das Parsen von Lottie-Animationen kann bei komplexen Animationen viel Zeit in Anspruch nehmen.
Um zu überprüfen, wie ressourcenintensiv Animation ist, können Sie übrigens die offizielle
Lottie- App
von Google Play verwenden . Es gibt ein Renderdiagramm, in dem Sie die Zeit zum Rendern eines Frames sehen und sehen können, wie die Animation aussehen wird, wenn Sie sie in Frames schneiden, oder wie sich Hardwarebeschleunigung und vieles mehr auswirken.