کتابخونه Lottie for Android

سلام به همه ی دوستان عزیز امروز میخوام اولین پست خودم رو در قالب یک آموزش تجربی ارائه بدم... شاید با یک سرچ ساده بتونید خیلی آموزش به زبان فارسی یا انگلیسی از این کتابخونه پیدا کنید، اما من میخوام کار با این کتابخونه رو به صورت تجربی آموزش بدم، شاید بعضی از دوستان بهش نیاز داشته باشن.

اول از همه بریم سراغ معرفی این کتابخونه:

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

این معرفی، از زبان خود شرکت سازنده هست.
این کتابخانه برای نمایش انیمیشن داخل برنامه های موبایل است مانند نمایش عکس های استاتیک. برای نمایش انیمیشن ها از فایل جیسون استفاده میکنه که با استفاده از یک افزونه در افترافکت به نام Bodymovin میتونید فایل جیسون مربوط به انیمیشنتون رو بسازید.
این کتابخونه میتونه فایل جیسون خودش رو از ادرس اینترنتی هم لود کنه که خودش میتونه خیلی کمک کنه مخصوصا در مبحث A/B Testing. همچنین از مبحث کش هم استفاده میکنه.
خلاصه کلی ویژگی های خوب داره برای اینکه یخورده نرم افزار رو کاربرپسند تر کنیم.
برای آشنایی بیشتر با این کتابخونه میتونید از آدرس های زیر استفاده کنید:
۱- introducing-lottie
۲- lottie-android
خب بعد از این مقدمه میتونیم بریم سراغ کار با این کتابخونه:
کار با این کتابخونه در حالت عادی کار سختی نیست. برای نمایش انیمیشنتون میتونید از کد های xml یا کد جاوا استفاده کنید.

فایل جیسون انیمیشنتون میتونه داخل پوشه raw، پوشه assets یا به صورت url باشه.

برای ادرس دهی میتونید مانند زیر عمل کنید

<com.airbnb.lottie.LottieAnimationView
    android:id=&quot@+id/lottieAnimation&quot
    android:layout_width=&quotmatch_parent&quot
    android:layout_height=&quotmatch_parent&quot
    app:lottie_fileName=&quotanimations/animation.json&quot
    app:lottie_autoPlay=&quottrue&quot/>

در اینجا برای نمایش فایل از پوشه assets ، از app:lottie_fileName استفاده کردیم. فایل انیمشن ما در پوشه animation و با نام animation.json موجود می باشد.

برای خواندن فایل به صورت آنلاین میتونید از app:lottie_url استفاده کنید و آدرس یوارال مورد نظرتون رو بدید.

اما گاهی پیش میاد که میخواهید مثلا چند انیمیشن رو پشت سر هم نمایش بدید. باید به این نکته توجه کنید که این فایل برای لود شدن نیاز به زمان دارن و اگر بخواهید پشت سر هم خیلی سریع نمایش بدید فایل ها ممکنه با یک مکس نمایش داده بشن که خوب میتونه جذاب نباشه.

برای جلوگیری از این کار شما میتونید از LottieComposition استفاده کنید.میشه گفت با این کار فایل های جیسون رو parse میکنید و هر زمانی که خواستید میتونید این اطلاعات رو به ویو بدید تا انیمیشن رو نمایش بده. این کار باعث میشه سرعت بره بالا و از دیلی جلوگیری کنه.

برای نمونه به این کد دقت کنید.

private fun getComposition():ArrayList<LottieComposition> {
    val composition :ArrayList<LottieComposition> = ArrayList()
    for (re in list) {
        val result = LottieCompositionFactory.fromAssetSync(this, re)
        composition.add(result.value!!)
    }
    return composition
}

با استفاده از کد بالا آرایه ای درست کردیم از نوع LottieComposition و لیستی داریم که نام فایلها در assets رو داره. هر فایل رو به LottieCompostion تبدیل میکنیم و به آرایه اضافه میکنیم تا هر زمان که خواستیم بتونیم ازشون استفاده کنیم. و حتی میتونیم بگیم که مثلا تا زمانی که ایتم ها در حال تبدیل شدن هستند پروگرس بار نمایش داده بشه. مثلا داخل ویوپیجر...

و اما در آخر

گاهی نیاز دارید که از یک listener برای دریافت زمان اتمام کار انیمیشن استفاده کنید.مثلا بعد از اتمام انیمیشن یک کار خاصی انجام بشه. برای این کار از کد زیر استفاده میکنیم

lottieAnimation.addAnimatorListener(object : AnimatorListener {
    override fun (animation: Animator) {}
    override fun (animation: Animator) {

        //animation repeat
    }

    override fun (animation: Animator) {}
    override fun onAnimationRepeat(animation: Animator) {}
})

اما یادمون باشه باید در در onDestroy صفحمون انیمیشن رو کنسل کنیم تا برنامه گاها کرش نکنه

override fun onDestroy() {
    lottieAnimation.cancelAnimation()
    super.onDestroy()
}

یک ریپازیتوری به گیتهاب اضافه کردم برای کد های بالا که همین هارو داخلش نوشتم همراه با ویو پیجری که شامل ۳ انیمیشن هست و قرار هست پشت سر هم نمایش بدیم. میتونید از این لینک ریپازیتوری رو مشاهده کنید.

یک نکته خیلی مهم در مورد جیسون فایل ها اینه که اگر خودتون میخواهید درست کنید. کاری کنید که حجم این فایل ها خیلی بالا نباشه، چون ممکنه حافظه کم بیاره و OOM دریافت کنید و کیفش رو ببرید :)

چندتا نکته:

۱- برای دانلود فایل های انیمیشن میتونید از سایت خود کتابخونه استفاده کنید.(https://lottiefiles.com)

۲- برای داکیومنت خوب میتونید از این لینک استفاده کنید.

۳- برای ادیت فایل جیسونتون میتونید از این لینک استفاده کنید.

۴- در مورد ویژگی های دیگه یا بقیه امکانات در این پست وقت نشد چیزی اضافه کنم. اگر دوستان نیاز دیدند میتونم دومین قسمت پست رو هم درست کنم.

در آخر:

خیلی خوشحال میشم که با پیشنهاد و انتقاد باعث رشد همدیگه بشیم...