پروژه سایت فروشگاه موبایل با php به همراه داکیومنت
پروژه سایت فروشگاه موبایل با php به همراه داکیومنت
2020-10-28
راست چین کردن متن در فیگما Figma
راست چین کردن متن در فیگما Figma
2020-11-09
پیاده سازی انیمیشن در اندروید Android با استفاده از کتابخانه lottie

پیاده سازی انیمیشن در اندروید با استفاده از کتابخانه 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 قرار داده و استفاده کرد.

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

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

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

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

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

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

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

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

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

انیمیشن در پلتفرم های مختلف
پیاده سازی انیمیشن در اندروید

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

نحوه پیاده سازی و استفاده از کتابخانه 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 اضافه کرده بودیم را جهت نمایش، مشخص کردیم.

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


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *