یکی از مهم ترین بخش های هر نرم افزار رابط گرافیکی اون هستش و این بخش هم معمولا با رنگ و طراحی دوستان ui / ux کارمون انجام میشه . گاها برامون پیش اومده خواستیم هنگام لودینگ یا ... یه انمیشن خاص نشون بدیم یا اینکه انمیشن هایی که خودمون یا طراح داخل افتر افکت طراحی کردیم یا طراحی شده رو نشون کاربر بدیم و اپ قشنگ تری رو داشته باشیم.
امروز به سراغ پکیجی میریم که این امکان فراهم میکنه از انمیشن های که خودش در سایت خودش گذاشته یا انمیشن های که خودمون داخل افتر افکت طراحی کردیم استفاده کنیم .
قدم اول استفاده از هر پکیج اضافه کردنش به پروژه هستش.
بعد از اضافه کردن این پکیج به پروژه وقتش رسیده که ازش استفاده کنیم . کافیه که به جای مناسبی بریم که قرار اون انمیشن رو نشون بدیم به طور مثال من میخوام وسط صفحه اپلیکیشن یه انمیشین ۴۰۴ نشون بدم به کاربر بگم که به ارور ۴۰۴ برخورد کردیم .
خوب اینجا چندتا راه برای نشون دادن این انمیشین ها داریم .
۱ نشون دادن انیمیشن ها به صورت انلاین (لینک انمیشین از سایت که جلوتر ادرس میزارم)
۲ از طریق assets
۳ از طریق فایل و حافضه(memory)
خوب به طور کلی با روش های استفاده ازش اشنا شدیم . برای استفاده از این انیمیشن ها اول یه سر به خود سایت lottie میزنیم و انیمشین مورد نظر خودمون انتخاب میکنیم .
https://lottiefiles.com/
خوب حالا از اون بالا دکمه دانلود رو میزنیم .اینجا برامون چندتا اپشن باز میشه برای دانلود استفاده راحت میتونیم از فرمت json استفاده کنیم و اسم اپشن که اولین اپشن لیست هم هست lottie json هستش بعداز انتخاب اون فایل جیسون شروع به دانلود میکنه .
بعد از اینکه دانلود فایل تموم شد داخل فولدر assets یه فولدر به اسمlotties میسازیم و میایم فایل جیسون دانلود شده داخلش قرار میدیم.
مرحله بعدی رو هم قطعا همه میدونیم و اون هم دادن مسیر فولدر جدید به فایلpubspec.yml هستش
خوب دیگه تا اینجا کار های اصلی انجام دادیم و وقت استفاده از این پکیج خفن .به جایی از صفحه میریم که میخوایم این انمیشن رو نشون بدیم .کلاس این پکیج کانستراکتور هایی جداگونه برای روش های متفاوت در نظر گرفته از اونجاییی که میخواییم فایل جیسون استفاده کنیم به این شکل کدش مینویسیم.
یادتون باشه این هم مثل عکس ها اگر ادرس درست ندین بهش به مشکل خواهید خورد .بهتر از پکیج های مثل fluttergen برای جنریت کردن ادرس های assets های پروژه استفاده کنید تا درصد خطا شما رو بیاره پایین.
راستی بالا گفتم که میتونیم از انمیشن های طراحی افتر افک هم استفاده کنیم اما چجوری ؟ کافیه که فقط از اون انمیشن داخل نرم افزار خروجی جیسون بگیرید و مثل همین انمیشین اون به فولدر assets اضافه کنید و ازش استفاده کنید .
خروجی به شکل زیر میشه (خیلی ساده زدم ولی خوب شما متناسب با نیاز خودتون باید یکسری تغییرات بدین )
داشت یادم میرفت اینو که بگم چجوری انلاین ازش استفاده کنید .همون بخش که میرید برای دانلود انمیشین یه بخش داره برای لینک که میتونید لینک رو کپی کنید .
کافیه بعد از کپی کردن لینک به داخل کد بیاید از کانستراکتور network استفاده کنید به شکل زیر.
خوب دیدم که به همین راحتی میتونیم انیمشن های lottie استفاده کنیم و کلی اپلیکیشنمون رو خوشگل تر کنیم .
امیدوارم این مقاله براتون مفید بوده باشه این مقاله و اگر چنین بود ممنون میشم که برای رفیقاتم بفرستی تا بخوننش و لایک و کامنت هم فراموش نشه تا مقاله ای دیگه به درود.
