ساخت انیمیشن اپلیکیشن با Lottie


در این مقاله قراره همه چیز درمورد Lottie رو بررسی کنیم ،پس بهتره از تاریخچه اش شروع کنیم:

اکستنشن Bodymovin به شمااجازه میدهد انیمیشن در افترافکت رو به صورتJSON خروجی بگیرید. کتابخانه ی Lottie نیز میتواند این فایل هایJSONرا برای اپلیکشنها بخواند.یکم تاریخچه!

تابه امروز، شما تنها چهار متد برای ساخت UI انیمیشن خودتون برای اپلیکیشن پیش روتون داشتید و این چهار متد عبارت بودند از:

  • ساخت با scratch : جدا از بحث و گفتگو با توسعه دهندگان، این متد برای دوباره سازی یک انیمیشن با scratch  برای توسعه دهندگان اندروید یا ios زمان و منابع زیادی را میطلبد. به احتمال زیاد ارزش سرمایه گذاری زمانی  راندارد یا حتی توجیه آن با ذینفعان ممکن نیست.
  • Gifs: ممکنه بنظر قدیمی بیاد ما هنوز کاربرد داره.گیف ها یک فایل با سایز بزرگ دارند و از این جهت برای اپلیکیشن ها بهینه نیستند. از این گذشته در یک سایز ثابت رندر میشوند و نمیتواندد برای صفحه هایی با سایز های مختلف مناسب باسند.
  • توالی از PNG ها: توالی از PNG ها هم حجم بسیار زیادی دارند و همچنان برای صفحه های با سایز های متفاوت مناسب نیستند(به علت فرمت مبتنی بر پیکسل)، و شما مجبور هستید در تصاویری در 1x ،2x و 3x تهیه کنید.
  • Animated Vector Drawable :فقط اندروید ساپورتش میکند.و به صورت شگفت انگیزی خوب اجرا میشوند اما بسیاری از ویژگی های Lottie را ندارند(نوشته یا رنگ های داینامیک).و همچنین نمیتواند به صورت برنامه ای یا در اینترنت لود شود بنابراین برایابزار های تست A/B مناسب نیست.

در فوریه 2015 Hernan Torrisi یک اکستنشن افتر افکت به نام Bodymovin ارائه کرد که به شما اجازه میدهد انیمیشن ساخته شدتون در افتر افکت رو به صورت یک فایل JSON خروجی بگیرید.براساس این اکستنشن بود که Airbnb در 2017 یک کتابخانه ی اندروید و ios به نام Lottie ساخت که میتوانست این فایل های JSON را بخواند.

گرچه Bodymovin حالا به شما این اجازه را میدهد به صورت مستقیم با فرمت Animated Vector Drawable خروجی بگیرید(کارایی سریعتر). اما توصیه شده برای ios از Bodymovin/Lottie و برای اپ های اندروید از Bodymovin استفاده کنید.

چگونگی استفاده از Lottie

چگونگی استفاده از Lottie

1- دانلود و نصب Bodymovin در افترافکت به صورت رایگان.شما میتونید از Aescripts یا Adobe Add-ons دانلودش کنید.در Bodymovin در افترافکت انیمیشنتون رو پیدا کنید و مقصد (جایی که قرار است ذخیره شود) رو انتخاب کنید. و بعد میتونید فایل JSON رو تحویل بگیرید!

2- در Bodymovin در افترافکت انیمیشنتون رو پیدا کنید و مقصد (جایی که قرار است ذخیره شود) رو انتخاب کنید. و بعد میتونید فایل JSON رو تحویل بگیرید!

3- فایل JSON رو برای توسعه دهندگان ios یا اندرویدتون بفرستید.و آنها مجبور به نصب کتابخانه ی Lottie هستند(Android & iOS).اگر میخواید بدون آلوده کردن دستتون به کد، به انیمیشن نگاهی بندازید، متونید در LottieFile اپلودش کنید و پیش نمایشش رو ببینید.

آنچه آموختیم

  • فایل های JSON بسیار کم حجم هستند
  • پردازششون بسیار سریعه، طراحان امکانات ناتمامی برای ساخت انیمیشن دارندو توسعه دهندگان بدون کد زدن اونها رو در اپلیکیشن استفاده میکنند
  • انیمیشن هاتون رو بر اساس واکنششون میتونید شخصی سازی کنید.

معایب

  • iOS در مقایسه با اندروید خیلی از ویژگی های افترافکت رو پشتیبانی نمیکند.برای مثال برای حذف همه ی merged layers باید به افترافکت بازگردید.
  • iOS اکستنشن DUIK plugin در افترافکت را پشتیبانی نمیکند.و به این دلیل برگشت دادن انیمیشن در افترافکت کار پیچیده ای شده است.

نتیجه گیری

در نتیجه،ترکیب Bodymovin همراه با Lottie بهترین ابزار برای آوردن انیمیشن در یک اپلیکیشن است.سریع، آسان و بی دردسر است.

گرچه،باید درنظر داشته باشید که محدودیت هایی دراصطلاحات پلاگین یا اکستنشن هایی که در افتر افکت استفاده میکنید وجود  داشته باشد. پس برای مطمئن شدن از آنها، چند تست بر روی یک پروژه ی کوچک انجام دهید قبل از آنکه برای همه ی انیمیشن هاتون از Lottie استفاده کنید.

اگر از این مقاله خوشتون اومده از مقاله های دیگمون هم دیدن کنید 🙂

به این مطلب امتیاز دهید
[کل: 4 میانگین: 3.5]

آموزشطراحی اپلیکیشن iOSطراحی اپلیکیشن اندرویدمقالات آموزشی

after effectanimationBodymovinLottieuiافترافکتانیمیشن

امین غلامیمشاهده نوشته ها

امین غلامی هستم از سال 92 برای سایت‌ها و وبلاگ های زیادی مطلب نوشتم از سال 97 در شرکت موبی سافت استخدام شدم و عاشقه بازاریابی محتوایی و از مطالعه، بحث و نوشتن درباره برنامه نویسی لذت می‌برم.

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

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