پیاده سازی انیمیشن در اندروید با استفاده از کتابخانه Lottie

پیاده سازی انیمیشن در اندروید Android با استفاده از کتابخانه Lottie ، قطعا هر زمان که عبارت انیمیشن را می شنوید به یاد کدنویسی های پیچیده در اندروید و یا هر پلتفرم دیگری می افتید. خب تا حدودی هم طبیعی است چرا که برای مثال در اندروید شما باید از کلاس های زیادی مانند Canvas ، Animation و … استفاده کنید به علاوه میزان زیادی کد بنویسید تا بیسیک ترین انیمیشن ها را پیاد کنید. اما همیشه راه حل ساده تری هم هست.در این پست از تجاری اپ ما با کتابخانه فوق العاده کاربردی Lottie آشنا خواهیم شد که راه بسیار ساده ای برای پیاده سازی انواع انیمیشن در اپلیکیشن های Android ، iOS و ReactNative در اختیار ما قرار داده است.

پیاده سازی انیمیشن در اندروید با استفاده از کتابخانه lottie

سازندگان کتابخانه lottie گفتند که یک راه حل ساده و سریع برای توسعه دهندگان Android ، iOS و React Native فراهم کردند تا توسعه دهندگان بتوانند به راحتی از انیمیشن ها در هر اندازه ای و با هر پیچیدگی استفاده کنند.

به گفته خود Lottie

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

همانطور که مشاهده می کنید سازندگان Lottie با جرأت هرچه تمام تر گفتند که راحتی استفاده از کتابخانه به سادگیه استفاده از فایل های assets (منظور تصاویر و صدا و … است که برای مثال در اندروید درون مسیر drawable یا raw قرار می گیرد) ایمپورت شده درون پروژه ست.

به واقع هم همینطور است، در ادامه نحوه استفاده از این کتابخانه را با شرح کامل خواهیم آموخت.

کتابخانه lottie چگونه کار می کند؟

حال که از سادگی کار با کتابخانه Lottie بسیار گفته شد بهتر است نحوه عملکرد این کتابخانه را هم بدانیم.

کتابخانه مذکور از یک فایل جیسون برای نمایش انیمیشن استفاده می کند که آن فایل جیسون درواقع همان انیمیشن مدنظر ما برای نمایش در اپلیکیشن است.

فایل جیسون کجا ساخته می شود ؟

فایل جیسون انیمیشن ها توسط نرم افزار After Effect ساخته شده و در نهایت به صورت فایل جیسون export شده است. ما می توانیم این انیمیشن ها را با نرم افزار After Effect بسازیم و یا از انیمیشن های موجود درون سایت خود Lottie که دیگران ساخته اند و به صورت رایگان قرار دادند استفاده کنیم.

انیمیشن های Lottie درون وب با یک افزونه JavaScript اجرا می شود. و همچنین می توان کتابخانه Lottie را در سه پلتفرم Android ، iOS و JavaScript قرار داده و استفاده کرد.

همچنین بخوانید:

همچنین بخوانید: کتابخانه Timber برای گرفتن لاگ بهتر در اندروید

شما می توانید در سایت LottieFiles‌ تعداد بسیار زیاد با تنوع بالایی از انواع انیمیشن های آماده را داشته باشید و پس از دانلود فایل Json انیمیشن دلخواه خود، آن را در اپلیکیشن قرار دهید (‌با استفاده از کتابخانه Lottie مربوط به پلتفرمی که کار می کنید).

نکته :
هرکدام از انیمیشن ها را می توانید بسته به نیاز خود هم به صورت gif و هم به صورت json دریافت کنید.

نکته :
توجه داشته باشید که در سایت LottieFiles شما حتی قادر خواهید بود رنگ و تنظیمات برخی انیمیشن هارا هم مطابق با نیاز خود ویرایش کنید (‌ با انتخاب گزینه Edit Layer Color ).

نحوه استفاده از فایل جیسون lottie

از این قسمت هم می توانید نحوه استفاده از فایل جیسون lottie را در هرکدام از پلتفرم های مشخص شده ببینید.

برای دریافت نحوه استفاده از کتابخانه lottie می توانید به صفحات گیت هاب Android ، iOS و ReacNative مراجعه کنید.

همچنین بخوانید: کتابخانه Gson | آموزش کتابخانه Gson برای تبدیل جیسون در اندروید

نحوه پیاده سازی و استفاده از کتابخانه Lottie در اندروید

نحوه پیاده سازی و استفاده از کتابخانه مذکور در اندروید به صورت زیر است :

ابتدا باید dependency این کتابخانه را درون Gradle پروژه خود به صورت زیر اضافه کنید

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

پس از Sync کردن Gradle شما می توانید از کتابخانه Lottie درون کلاس های پروژه اندروید خود استفاده کنید.ما یک نمونه بسیار ساده که تنها یک انیمیشن را درون Layout نمایش می دهد را در ادامه خواهیم گفت.

ابتدا به مسیر زیر رفته و فایل جیسونی که از سایت LottieFiles دریافت کردید را اضافه کنید

src/main/res/raw

و سپس درون هرکدام از Layout هایی که می خواهید انیمیشن نمایش داده شود به صورت زیر Lottie را اضافه کنید

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_rawRes="@raw/lottielogo"
        app:lottie_autoPlay="true"/>

خصوصیت lottie_autoPlay نیز به این خاطر است که اگر انیمیشن به انتها رسید مجددا برگردد به ابتدای انیمیشن جهت شروع مجدد.همانطور که می بینید با استفاده از خصوصیت lottie_rawRes آدرس فایل جیسونی که قبلا به مسیر raw اضافه کرده بودیم را جهت نمایش، مشخص کردیم.

همچنین بخوانید: کتابخانه RxJava را کاربردی بیاموزیم

امیدوارم این آموزش برای شما مفید بوده باشد.