Привіт. Я zm soft, зареєструвався як розробник минулого року (наприкінці 2023) і почав випускати додатки. Також плануємо випустити додаток для розробників, тому перевірте, якщо цікаво.
Чи використовуєте ви анімацію у своїх додатках? Навіть невелика анімація робить додаток зрозумілішим і більш привабливим візуально, чи не так? Тому сьогодні хочу написати про відображення анімації в Android-додатках.
LottieAnimation
Бібліотека, яку я використовую, — це LottieAnimation, бібліотека для відображення анімацій. Я її використовую, тому що вона дає змогу відносно просто відображати легкі анімації.
Які типи анімацій доступні
По-перше, перевагою цієї бібліотеки є велика кількість безкоштовних анімацій. Наприклад, доступні анімації такого типу.
Ці анімації публікуються на офіційному сайті LottieFiles. Є також багато платних анімацій, але навіть якщо фільтрувати лише безкоштовні, їх більш ніж достатньо для використання. Оскільки у мене немає ні навичок, ні енергії створювати анімації з нуля, коли хочу додати якийсь рух, я першим ділом думаю, чи є щось придатне на цьому сайті. Наприклад, використовуючи такі анімації, можна показати користувачу поширені точки кліку при першому відображенні. Я насправді використав анімацію справа, щоб надавати користувачам операційні підказки.
Ключова перевага: простота
Реалізацію також можна виконати досить просто. Наприклад, якщо потрібно лише відобразити анімацію у певному макеті, достатньо визначити її наступним чином — і вона запрацює. Хіба це не чудово, що все працює без жодної логіки?
Простий метод реалізації Lottie
Реалізація Lottie надзвичайно проста. Достатньо вбудувати анімацію в певний макет — і вона працюватиме без додаткової логіки.
Приклад реалізації:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Базове використання Lottie
Основні кроки використання Lottie:
- Підключення бібліотеки (зміна build.gradle)
- Отримання та розміщення файлу анімації
- Налаштування файлу макету
- Налаштування анімації
Конкретні приклади реалізації та код
Нижче наведені конкретні приклади реалізації при використанні Lottie. Вони включають підключення бібліотеки, розміщення файлу анімації, налаштування файлу макету та налаштування анімації.
Запис у build.gradle / Підключення бібліотеки:
Спочатку підключіть бібліотеку, щоб мати змогу використовувати Lottie.
Якщо немає проблем із сумісністю, використовуйте найновіше середовище.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Розміщення файлу анімації:
Завантажте улюблений файл анімації (.json) з офіційного сайту LottieFiles і помістіть його в папку res/raw додатку.
Налаштування файлу макету:
Додайте LottieAnimationView до XML-макету, щоб він міг посилатися на завантажений файл анімації.
Налаштування анімації:
За потреби налаштуйте поведінку анімації. У налаштуваннях анімації можна виконувати такі дії:
- Зациклення відтворення або без нього
- Вказівка кількості повторів
- Вказівка швидкості відтворення (включно зі зворотним відтворенням)
Додавши динамічну обробку, можна відтворювати/зупиняти в будь-який момент і змінювати швидкість відтворення.
Спочатку про статичний спосіб вказівки. Поведінка анімації змінюється відповідно до наступних параметрів.
<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"/>
У цьому прикладі файл your_lottie_animation.json відтворюється автоматично зі швидкістю 0,15x і з повторенням.
Далі, динамічна обробка:
lottieAnimationView.playAnimation()
За допомогою наведеної вище обробки можна відтворювати анімацію. Крім відтворення, можна змінювати налаштування для зупинки, зміни швидкості тощо. Також можна встановити слухача, як показано нижче, щоб виявляти кінець відтворення і виконувати обробку:
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) {
// アニメーションがリピートされる時の処理
}
})
Застереження та усунення несправностей
Lottie дуже корисний, але є певні застереження. Зокрема, зміна позиції об'єктів іноді може не працювати так, як очікується. Також поясню проблему переповнення стеку, пов'язану з обробкою в кінці анімації, і поведінку після onPause.
Приклад усунення несправностей 1:
Це була проблема в моїй реалізації: спосіб обробки завершення анімації спричинив переповнення стеку. Конкретно, була проблема в обробці, яка виконувала зворотне відтворення при досягненні кінця анімації і повторювала відтворення та зворотне відтворення. Проблема була вирішена шляхом публікації в основному потоці та повторного додавання до черги:
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) {
// アニメーションがリピートされる時の処理
}
})
Приклад усунення несправностей 2:
Ще один момент, на який слід звернути увагу, — це обробка після onPause. Щоб уникнути непотрібних операцій, анімацію у фоновому режимі слід зупиняти.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Однак якщо є обробка при завершенні анімації тощо, цього одного було недостатньо. Тому виникла необхідність перевіряти, чи не від'єднано батьківський вигляд, і виконувати повторну обробку:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Підсумок
Lottie — потужний інструмент для покращення інтерфейсу додатку. Є велика кількість безкоштовних анімацій і проста реалізація. Розуміючи застереження та правильно з ними справляючись, можна отримати великі переваги при розробці додатків. Хоча є певні застереження, загалом цим користуватися дуже легко, і безкоштовних ресурсів також багато, тому вважаю це чудовою бібліотекою. Вона точно допоможе покращити вигляд додатку, тому обов'язково спробуйте.