Bună ziua. Sunt zm soft, care s-a înregistrat ca dezvoltator anul trecut (la sfârșitul anului 2023) și a început să lanseze aplicații. Plănuim să lansăm și o aplicație pentru dezvoltatori, deci verificați dacă vă interesează.
Folosiți animații în aplicațiile voastre? Chiar și o animație simplă poate face o aplicație mai ușor de înțeles și mai atractivă vizual, nu-i așa? De aceea, astăzi vreau să scriu despre cum să afișăm animații în aplicații Android.
LottieAnimation
Biblioteca pe care o folosesc este LottieAnimation, o bibliotecă pentru afișarea animațiilor. O folosesc deoarece permite afișarea animațiilor ușoare relativ simplu.
Tipuri de animații disponibile
În primul rând, un punct forte al acestei biblioteci este abundența de animații disponibile gratuit. De exemplu, există animații de acest tip.
Aceste animații sunt publicate pe site-ul oficial al LottieFiles. Există și multe animații plătite, dar doar filtrând după cele gratuite există suficiente pentru utilizare. Practic, deoarece nu am nici abilitățile, nici energia să creez animații de la zero, când vreau să adaug mișcare, mă gândesc mai întâi să caut ceva utilizabil pe acest site. De exemplu, folosind animații ca acestea, puteți ghida utilizatorul spre punctele obișnuite de clic la prima afișare. Am folosit efectiv animația din dreapta pentru a oferi utilizatorilor ghidaj de operare.
Punctul cheie: simplitatea
Implementarea poate fi gestionată destul de simplu. De exemplu, dacă doriți doar să afișați o animație într-un layout specific, este suficient să o definiți în felul următor pentru ca aceasta să funcționeze. Nu este minunat că funcționează fără a implementa nicio logică?
Metoda simplă de implementare Lottie
Implementarea Lottie este extrem de simplă. Este suficient să încorporați animația într-un layout specific pentru ca aceasta să funcționeze fără logică suplimentară.
Exemplu de implementare:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Utilizarea de bază a Lottie
Pașii principali pentru utilizarea Lottie sunt:
- Integrarea bibliotecii (modificarea build.gradle)
- Obținerea și plasarea fișierului de animație
- Configurarea fișierului de layout
- Personalizarea animației
Exemple concrete de implementare și cod
Mai jos sunt exemple concrete de implementare la utilizarea Lottie. Acestea includ integrarea bibliotecii, cum să plasați fișierul de animație, cum să configurați fișierul de layout și cum să personalizați animația.
Înregistrare în build.gradle / Integrarea bibliotecii:
Mai întâi, integrați biblioteca pentru a putea folosi Lottie.
Dacă nu există probleme de compatibilitate, folosiți cel mai recent mediu.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Plasarea fișierului de animație:
Descărcați fișierul de animație preferat (.json) de pe site-ul oficial al LottieFiles și plasați-l în folderul res/raw al aplicației.
Configurarea fișierului de layout:
Adăugați LottieAnimationView în layout-ul XML astfel încât să poată face referire la fișierul de animație descărcat.
Personalizarea animației:
Personalizați comportamentul animației după cum este necesar. În setările de animație, puteți face următoarele:
- Cu sau fără redare în buclă
- Specificarea numărului de repetări
- Specificarea vitezei de redare (inclusiv redare inversă)
Adăugând procesare dinamică, puteți reda/opri oricând doriți și puteți schimba viteza de redare.
În primul rând, despre metoda de specificare statică. Comportamentul animației se schimbă în funcție de specificațiile de mai jos.
<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"/>
În acest exemplu, fișierul your_lottie_animation.json este redat automat la 0,15x viteză de redare și în buclă.
În continuare, procesarea dinamică:
lottieAnimationView.playAnimation()
Cu procesarea de mai sus se poate reda. Pe lângă redare, puteți schimba setările pentru oprire, schimbarea vitezei etc. Puteți, de asemenea, să setați un listener ca mai jos și să detectați sfârșitul redării pentru procesare:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Puncte de atenție și depanare
Lottie este foarte util, dar există câteva puncte de atenție. În special, schimbarea poziției obiectelor uneori nu funcționează conform așteptărilor. De asemenea, voi explica problema de depășire a stivei legată de procesarea la finalul animației și comportamentul după onPause.
Exemplu de depanare 1:
A fost o problemă în implementarea mea: modul de gestionare a procesării la finalul animației a cauzat o depășire a stivei. Concret, exista o problemă în procesarea care inversa redarea la ajungerea la finalul animației și repeta redarea și redarea inversă. Problema a fost rezolvată prin postarea pe thread-ul principal și repunerea în coadă:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
lottieAnimationView.post {
// 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
Exemplu de depanare 2:
Un alt punct de atenție este procesarea după onPause. Pentru a evita operațiuni inutile, animația din fundal ar trebui oprită.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Cu toate acestea, dacă există procesare la finalul animației etc., aceasta singură nu a fost suficientă. Prin urmare, a fost necesar să se verifice dacă view-ul părinte nu a fost detașat și să se reproceseze:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Concluzie
Lottie este un instrument puternic pentru îmbunătățirea UI-ului aplicației. Există animații abundente disponibile gratuit și implementarea este simplă. Înțelegând punctele de atenție și tratându-le corespunzător, puteți beneficia de avantaje mari în dezvoltarea aplicațiilor. Deși există câteva puncte de atenție, în general este foarte ușor de utilizat și există multe resurse disponibile gratuit, motiv pentru care consider că este o bibliotecă excelentă. Sunt sigur că va contribui la îmbunătățirea aspectului aplicației, deci vă recomand să o încercați.