آموزش کتابخانه ی lottie در اندروید


ایجاد اینیمیشن با کتابخانه ی lottie

کتابخانه ی Lottie مجموعه ای متنوع از انیمیشن ها برای اندروید و ios و react native می باشد. انیمیشن ها با  adobe after effect ساخته می شوند و با فرمت json، مورد استفاده قرار می گیرند. با استفاده از این کتابخانه به سادگی می توان انیمیشن های زیبایی را در برنامه اجرا نمود. در این آموزش پیاده سازی کتابخانه ی Lottie را در یک پروژه ی اندرویدی یاد می گیریم.

قدم اول : افزودن کتابخانه به پروژه

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

قدم دوم : ایجاد view در layoutِ مربوطه

Viewای از جنس LottieAnimationView را در layout قرار می دهیم. LottieAnimationView از کلاسِ ImageView ارث بری می کند. اما علاوه بر متدهای ImageView عملکردهای دیگری نیز دارد.

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<p>View را روی حالتِ match constraint قرار می دهیم تا خود را با ابعادِ صفحه تطابق دهد. در این مثال، viewِ اصلی با constraint layout ست شده، به همین دلیل این view را از بالا، چپ و راست محدود می کنیم. </p>

<p>دو مشخصه ی auto_play و loop را با مقدارِ true ست می کنیم. وقتی auto_play با مقدارِ true ست شده باشد، در اولین نمایشِ view، انیمیشن اجرا می شود. loop  مشخص می کند انیمیشن بعد از هر بار نمایش، دوباره اجرا شود. </p>

قدم سوم : یافتن انیمیشن مورد نظر

مجموعه ی بزرگی از انیمیشن های متعدد در lottiefiles.com وجود دارد. در این سایت انیمیشن مورد نظر خود را پیدا کنید و json آن را دانلود کنید.

این json باید به پروژه اضافه شود. کافی ست در فولدرِ ریسورس پوشه ی raw را ایجاد کنید. برای این کار روی فولدر res، راست کلیک کنید و گزینه ی new – > android resource directory را انتخاب کنید. اسم این دایرکتوری را raw را بگذارید و فایلِ jsonی که دانلود کرده اید را، در همین پوشه قرار دهید.

قدم چهارم : وارد کردن انیمیشن در view

به Viewای که ساختیم بر می گردیم. Jsonِ موجود در raw را در view وارد می کنیم.

app:lottie_rawRes="@raw/deliveryman"

قدم پنجم : تست برنامه

در این مرحله می توانیم برنامه را اجرا کنیم و به همین سادگی انیمیشن در برنامه ی ما کار می کند.

همان طور که اشاره شد این view از ImageView ارث بری می کند. پس تمام متدهایی که برای imageView استفاده می کنیم برای lottieAnimationView قابل استفاده است. مثلا می توانیم شروع و خاتمه ی اجرای انیمیشن ها را کنترل کنیم.

مثلا اگر این انیمیشن، یک progress bar باشد، می توانیم از متدهای setProgress نیز استفاده کنیم.  

کتابخانه های دیگری برای ایجاد انیمیشن در پروژه ی اندرویدی وجود دارند که در مقاله ی دیگری آنها را معرفی کردیم. برای مطالعه مقاله معرفی کتابخانه های انیمیشن می توانید به این لینک مراجعه نمایید.

به این پست امتیاز دهید

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

میانگین امتیاز / 5. تعداد:

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

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




Enter Captcha Here : *

Reload Image