Merhabalar,

Xamarin ile uygulamalar geliştirirken Lottie paketine denk gelmişsinizdir. Genel olarak Lottie, after effects ile hazırlanmış olan animasyonları, Bodymovin eklentisi ile .json formatına çevirerek mobil uygulamalarınızın kullanımına sunuyor.

İlk iş olarak Xamarin.Android ve Xamarin.iOS için Lottie eklentisini yüklememiz gerekiyor.

Xamarin.Forms uygulamalarınızdaki sayfalarınızda kullanmak için de Xamarin.Forms paketi var.

Yeni bir Xamarin.Forms projesi açtıktan sonra Xamarin.Android için gerekli nuget paketinin yükleme işlemini gerçekleştirdim. Daha sonra splash screen için kullanacağımız layout, activity ve style işlemlerini yapmamız gerekiyor.

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/xamarinview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="surfing.json"
        app:lottie_autoPlay="true"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Buradaki surfing.json dosyasını bu tarz animasyonları indirebileceğiniz lottie files sitesinden indirdim ve Android Assets klasorünün içerisine BuildAction’ı AndroidAsses olarak ekledim.
Splash screen için gerekli olan ufak style işlemlerini de styles.xml dosyasında SplashScreen style section’ında yaptım.

  <style name="SplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
  </style>

SplashActivity

namespace Splash.Droid
{
    [Activity(Label = "SplashActivity", Theme = "@style/SplashScreen", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : AppCompatActivity, Animator.IAnimatorListener
    {
        LottieAnimationView animationView;
        public void OnAnimationCancel(Animator animation)
        {
            
        }

        public void OnAnimationEnd(Animator animation)
        {
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
        }

        public void OnAnimationRepeat(Animator animation)
        {
            
        }

        public void OnAnimationStart(Animator animation)
        {
            
        }

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Splash);
            animationView = FindViewById<LottieAnimationView>(Resource.Id.xamarinview);
            animationView.AddAnimatorListener(this);
            animationView.RepeatCount = 1;
            animationView.PlayAnimation();
        }
    }
}

IAnimatorListener interface’i sayesinde animasyon bittiginde handle edip, MainActivity classının çalışmasını sağlayabiliyorum.

Burada dikkat etmemiz gereken noktalar var. MainActivity’nin MainLauncher propertysi false olarak değiştirilmeli ve SplashActivity’de ise MainLauncher propertysi true olarak eklenmeli. SplashActivity theme propertysi ise, style.xml içerisine yazdığımız SplashScreen olarak değiştirilmeli.

Eğer isterseniz OnAnimationStart, OnAnimationRepeat ve OnAnimationCancel methodları içerisinde de istediğiniz animasyon türüne göre işlemler yapabilir, animasyonun başlama, tekrar etme ve, iptal durumlarına da müdahele edebilirsiniz.

Detayları kullanıma ve örneklere lottie github linkinden ulaşabilirsiniz.