Merhaba. Geçen yıl (2023 sonu) geliştirici olarak kayıt yaptırıp uygulama yayınlamaya başlayan zm soft'um. Geliştiricilere özel bir uygulama da yayınlamayı planlıyoruz, ilgilenirseniz göz atabilirsiniz.
Uygulamalarınızda animasyon gösterimi kullanıyor musunuz? Küçük bir animasyon bile uygulamayı daha anlaşılır ve görsel açıdan daha çekici hale getiriyor, değil mi? Bu yüzden bugün Android uygulamalarında animasyon gösterimi hakkında yazmak istiyorum.
LottieAnimation
Kullandığım kütüphane, animasyon gösterimi için bir kütüphane olan LottieAnimation'dır. Görece kolay bir şekilde hafif animasyon gösterimi yapılabildiği için kullanıyorum.
Hangi tür animasyonlar gösterilebilir / Animasyon türleri
Öncelikle bu kütüphanenin iyi yanlarından biri, ücretsiz kullanılabilir animasyonların çokluğudur. Örneğin, bu tür animasyonlar mevcuttur.
Bu animasyonlar LottieFiles resmi sitesinde yayınlanmaktadır. Ücretli animasyonlar da çok sayıda mevcuttur, ancak yalnızca ücretsizleri filtreleyerek çıkan sonuçlar bile kullanım için yeterlidir. Temel olarak animasyonları sıfırdan oluşturacak ne becerim ne de enerjim olduğundan, bir hareket eklemek istediğimde önce bu sitede kullanılabilecek bir şey olup olmadığını düşünürüm. Örneğin, bu tür animasyonlar kullanılarak ilk gösterimde kullanıcıya yaygın tıklama noktaları gösterilebilir. Kullanıcılara işlem rehberliği sağlamak için sağdaki animasyonu gerçekten kullandım.
Önemli nokta: Basitlik
Uygulama açısından da oldukça basit bir şekilde çözüm üretilebilir. Örneğin, belirli bir düzende yalnızca animasyon göstermek istiyorsanız, aşağıdaki şekilde tanımlamak yeterlidir. Hiçbir mantık uygulamadan çalışması harika değil mi?
Lottie'nin basit uygulama yöntemi
Lottie'nin uygulanması son derece basittir. Belirli bir düzene animasyonu yerleştirmek yeterlidir; ek mantık olmadan çalışır.
Uygulama örneği:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Lottie'nin temel kullanımı
Lottie kullanımının ana adımları şu şekildedir:
- Kütüphanenin entegrasyonu (build.gradle düzenlemesi)
- Animasyon dosyasının edinimi ve yerleştirilmesi
- Düzen dosyasının ayarlanması
- Animasyonun özelleştirilmesi
Somut uygulama örnekleri ve kod
Aşağıda Lottie kullanırken somut uygulama örnekleri verilmektedir. Bunlar kütüphanenin entegrasyonunu, animasyon dosyasının nasıl yerleştirileceğini, düzen dosyasının nasıl ayarlanacağını ve animasyonun nasıl özelleştirileceğini kapsamaktadır.
build.gradle'a kayıt / Kütüphane entegrasyonu:
Öncelikle Lottie'yi kullanabilmek için kütüphaneyi entegre edin.
Uyumluluk sorunları yoksa lütfen en güncel ortamı kullanın.
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
Animasyon dosyasının yerleştirilmesi:
LottieFiles resmi sitesinden beğendiğiniz animasyon dosyasını (.json) indirin ve uygulamanın res/raw klasörüne yerleştirin.
Düzen dosyasının ayarlanması:
XML düzenine LottieAnimationView ekleyerek indirilen animasyon dosyasına başvurulabilmesini sağlayın.
Animasyonun özelleştirilmesi:
Gerektiğinde animasyonun davranışını özelleştirin. Animasyon ayarlarında şunlar yapılabilir:
- Döngülü oynatma olup olmaması
- Döngü sayısının belirtilmesi
- Oynatma hızının belirtilmesi (geri oynatma dahil)
Dinamik işlem ekleyerek istediğiniz anda oynatma/durdurma yapabilir ve oynatma hızını değiştirebilirsiniz.
Önce statik belirtme yöntemi hakkında. Aşağıdaki belirtmelere göre animasyon davranışı değişir.
<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"/>
Bu örnekte your_lottie_animation.json dosyası 0,15x oynatma hızıyla otomatik ve tekrarlayan şekilde oynatılmaktadır.
Sonraki olarak dinamik işlem:
lottieAnimationView.playAnimation()
Yukarıdaki işlemle oynatma yapılabilir. Oynatmaya ek olarak ayarları değiştirerek durdurma ve hız değiştirme de yapılabilir. Aşağıdaki gibi bir dinleyici ayarlayarak oynatma bitişini algılayıp işlem yapılabilir:
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) {
// アニメーションがリピートされる時の処理
}
})
Dikkat edilmesi gereken noktalar ve sorun giderme
Lottie son derece kullanışlıdır, ancak bazı dikkat edilmesi gereken noktalar vardır. Özellikle nesne konumu değişikliğinin zaman zaman beklendiği gibi çalışmadığı görülmektedir. Ayrıca animasyon bitişindeki işlemle ilgili yığın taşması sorununu ve onPause sonrasındaki davranışı da açıklayacağım.
Sorun giderme örneği 1:
Benim uygulamamdaki sorundu: animasyon bitişindeki işlemin nasıl ele alındığı yığın taşmasına neden oldu. Somut olarak, animasyonun sonuna ulaşıldığında geri oynatma yapan ve oynatma ile geri oynatmayı tekrarlayan işlemde sorun vardı. Ana iş parçacığına gönderme ve kuyruğa yeniden ekleme yapılarak sorun çözüldü:
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) {
// アニメーションがリピートされる時の処理
}
})
Sorun giderme örneği 2:
Dikkat edilmesi gereken bir diğer nokta onPause sonrasındaki işlemdir. Gereksiz işlemleri önlemek için arka planda animasyon durdurulmalıdır.
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
Ancak animasyon bitişinde vb. işlem yapılıyorsa bu tek başına yeterli değildi. Bu nedenle üst görünümün ayrılıp ayrılmadığını kontrol etmek ve yeniden işlem yapmak gerekti:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
Özet
Lottie, uygulamanın kullanıcı arayüzünü iyileştirmek için güçlü bir araçtır. Ücretsiz kullanılabilir animasyonlar çoktur ve uygulama basittir. Dikkat edilmesi gereken noktaları anlayarak ve uygun şekilde ele alarak uygulama geliştirmede büyük avantajlar elde edilebilir. Bazı dikkat edilmesi gereken noktalar olsa da genel olarak kullanımı çok kolaydır ve ücretsiz kullanılabilir kaynaklar da çoktur; bu nedenle mükemmel bir kütüphane olduğunu düşünüyorum. Uygulamanın görünümünü iyileştirmeye kesinlikle katkıda bulunacağından mutlaka deneyin.