Android Jetpack Compose – LottieFiles Animasyonu Kullanımı

Lottie kütüphanesinin native Java ve Kotlin ile Android Studio ile beraber iOS projelerinde de kullanılabildiğini biliyoruz. LottieFiles ile Vektörel formatta üretilmiş olan SVG uzantılı dosyaları LottieFiles’ın sitesinde animasyonlu hale getirip json uzantılı dosyasını Android Studio üzerine gönderip kütüphane sayesinde animasyonlu görüntü haline getirebiliyoruz.

Kendiniz SVG dosyasını Lottie dosyasına çevirmek için; https://lottiefiles.com/svg-to-lottie/convert yada hazır Lottie Animasyonları için https://lottiefiles.com adresini ziyaret edebilirsiniz.

Dilerseniz Kendi Lottie json dosyanızı nasıl oluşturabilirsiniz ve Android Java ile birlikte nasıl kullanabilirsiniz konusuna değindiğim makaleme göz atmak isterseniz linke girebilirsiniz; https://serifgungor.com/android-lottiefiles-animasyonu-kullanimi-java

İsterseniz hızlıca başlayalım.

Çıktı:

Kütüphanenin projemizin build.gradle dosyasına eklenmesi ile başlayalım;

implementation 'com.airbnb.android:lottie-compose:4.0.0'

Projemizin res klasörü altına raw klasörünü ekleyebilmek için res’e sağ tıklayıp New > Android Resources Directory‘den Resource type: olarak raw‘ı seçip OK’a tıklayalım. ardından raw’a sağ tıklayıp New > File’dan anim.json adlı dosyayı oluşturalım ve içeriğini aşağıdaki paylaştığım linke girip içeriği anim.json dosyasının içerisine yapıştıralım. (Örneği deneyebilmek için kendim lottiefiles dan json animasyon dosyası oluşturdum.)

https://raw.githubusercontent.com/serifgungor/serifgungor/master/lottieanim.json

Activity sınıfımız içerisine LottieAnim adlı Composable fonksiyonu üretelim;

@Composable
fun LottieAnim() {
  // kodlar bu aralığa yazılacak.
}

Animasyonun playing ve speed değerleri için state üretelim.

 var isPlaying by remember {
        mutableStateOf(true)
}
var speed by remember {
        mutableStateOf(0.5f)
}

Buradaki isPlaying’de bulunan mutableStateOf değerini true yaptığımızda açılışta animasyon başlayacaktır. speed olarak belirttiğimiz mutableStateOf değerinin 0.5f olması ise animasyonun hızı ile alakalıdır.

LottieAnimation sınıfı animasyonun üretilmesi ve çalışması için gerekli olan sınıftır. Bu sınıfı kullanabilmek için composition ve progress adlı değerlere ihtiyaç duyuyoruz.

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim))

Composition animasyon verisinin nereden çekileceğinin tanımlandığı alanı ifade etmektedir.

LottieCompositionSpec’in RawRes ile json dosyası üzerinden animasyon içeriğini okuyabilmesi, Asset ile assets klasöründen okuyabilmesi, File ile dosyadan okuyabilmesi, JsonString ile stringden okuyabilmesi, Url ile url’den String değeri okuyabilmesi mümkündür.

val progress by animateLottieCompositionAsState(
        composition,
        isPlaying = isPlaying,
        speed = speed,
        restartOnPlay = false
)

progress başlama, hız, restart gibi olayların ifade edilmesini sağlamaktadır.

Eğer animasyonun sürekli çalışmasını isterseniz, iterators ile animasyonun loop’a girmesini sağlayabilirsiniz;

val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever,
        isPlaying = isPlaying,
        speed = speed,
        restartOnPlay = false
)

son olarak animasyonun çalışabilmesi için;

LottieAnimation(
        composition = composition,
        progress = progress,
        modifier = Modifier.fillMaxWidth()
)

Kodlarımızın tamamı şöyle;

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LottieComposeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    LottieAnim()
                }
            }
        }
    }
}

@Composable
fun LottieAnim() {
    var isPlaying by remember {
        mutableStateOf(true)
    }
    var speed by remember {
        mutableStateOf(0.5f)
    }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim))
    val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever,
        isPlaying = isPlaying,
        speed = speed,
        restartOnPlay = false
    )
    LottieAnimation(
        composition = composition,
        progress = progress,
        modifier = Modifier.fillMaxWidth()
    )
}

Keyifli çalışmalar dilerim.