Android LottieFiles Animasyonu Kullanımı (Java)

Bu makalemde sizlere Java Android projemizde LottieFiles Animasyonlarını nasıl üretebileceğinizi ve kullanabileceğinizi öğreneceksiniz.

SVG uzantılı dosyaların lottiefiles.com adresi üzerine yüklenip animasyon dosyası olarak json formatında çıktı alınması mümkün oluyor. Kendiniz custom bir animasyon üretmek isterseniz, Adobe After Effect üzerinden oluşturup LottieFiles ile entegre ederek animasyon dosyası çıktısı alabilirsiniz.

Bu makalede Adobe Illustrator yazılımını kullanarak LottieFiles Animasyonunu nasıl üretebileceğinizi anlatarak başlayacağım. Ben bir yazı oluşturup onu Animasyonlu hale getirmek istiyorum. Yazı fontu olarak Rotterdam Bridge Font’u tercih ettim.

100mmx50mm boyutunda bir Adobe Illustrator dosyasını yatay formatta oluşturuyorum.

Yazı aracını seçip, Rotterdam Bridge fontumu 72pt boyutunda seçip yazımı giriyorum.

Bu yazıya sağ tıklayıp, Create Outlines’a tıklıyorum.

ardından tekrar sağ tıklayıp, Isolate Selected Group’a tıklayıp yazıyı resim formatına parça parça dönüştürmüş oluyorum.

artık her bir nesneye tek tek tıklayıp seçebilir hale geleceksiniz.

Şimdi bu çalışmayı, File > Save As’den dosya uzantısı .SVG olarak kaydedelim.

LottieFiles’ın sitesi üzerinden SVG to Lottie bağlantısını açalım. https://lottiefiles.com/svg-to-lottie/convert

dosyayı yüklediğinizde animasyon seçim sayfası ile karşılaşacaksınız ve aynı sayfa üzerinde yüklediğiniz svg dosyasını göreceksiniz.

İstediğiniz animasyonu seçip, Download Lottie’e tıklarsanız animasyonu json dosya uzantısıyla indireceksiniz. İsterseniz indirmeden önce ön izleme yapmak için Upload to Preview’e tıklayabilirsiniz.

Upload to Preview dediğinizde görselin arkaplanını değiştirebilir, önizleme yapabilir ayrıca indirme linkini kopyalayabilirsiniz. Edit Animation seçeneğine tıklayarak animasyonun süresini ve arkaplan rengini kalıcı olarak değiştirebilirsiniz.

Şimdi artık LottieFiles’ın nasıl kullanılabildiğini öğrendiğimize göre Android Studio üzerinde proje oluşturup nasıl kullanılacağına bakabiliriz.

Projemize Lottie kütüphanesini dahil edebilmek için;

def lottieVersion = "3.4.0"
implementation "com.airbnb.android:lottie:$lottieVersion"

res > raw (yoksa oluşturunuz) içerisine anim.json adlı dosya oluşturalım ve içerisine indirdiğimiz json dosyasının içerisindeki yazıları kopyalayıp yapıştıralım ve dosyayı kaydedelim.

Layout dosyamız içerisine Lottie kütüphanesinden elde ettiğimiz LottieAnimationView nesnesini dahil edelim.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/anim" />

</LinearLayout>

Activity sınıfımız içerisinde nesne referansını tanımlayalım;

 LottieAnimationView animationView = findViewById(R.id.animation_view);

animasyonun başlatılmasını sağlayalım;

animationView.playAnimation();

animasyonun kaç defa daha tekrar (repeat) edileceğini belirtelim.

animationView.setRepeatCount(0);

addAnimationListener ile animasyonun başlama ve bitme gibi durumlarını tespit edebiliriz. Örneğin animasyon durduğunda intent ile farklı bir sayfayı aç diyebiliriz. SplashActivity sayfalarında tercih edilebilir.

animationView.addAnimatorListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Toast.makeText(getApplicationContext(), "Anim finished", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
 });

Hepsi bu kadar, keyifli çalışmalar dilerim.