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

یکی از موضوعاتی که چندوقت اخیر ذهن منو مشغول کرده بود، این بوده که بتونم از منابع گرافیکی و انیمیشن‌های پیچیده در پروژم استفاده کنم. ولی هربار پیگیری این قضیه رو عقب مینداختم. تا اینکه دیروز فرید ازم پرسید آیا برای این قضیه راه حلی دارم؟ و این موضوع بهونه‌ای شد، تا با شایان دنبال یه سرویس خوب بگردیم. امروز قصد ندارم کد‌نویسی کنم و فقط میخوام مورادی که پیدا کردیم رو به شما معرفی کنم.

لایبرری اندروید Glide

لایبرری Glide یکی از گزینه‌ها برای استفاده از انیمیشن (یا همون فایل gif) در پروژه اندرویده. و استفاده کردن از اون هم خیلی ساده ست:

1. فقط لایبرری رو به پروژتون اضافه میکنید

2. و بعد ویو رو به لی‌اَوت‌-تون اضافه می‌کنید

3. و در آخر ویوو رو در کلاستون کَست کرده و انیمیشن خودتون رو بهش معرفی میکنید

4. در نهایت این میشه نتیجش

این لایبرری علاوه بر همه خوبیهاش، مشکلاتی هم داره:

• میزان استفاده از رم رو به شدت بالا میبره

• شما کنترل مناسبی روی انیمیشن ندارید

• و موقع Scale شدن انیمه، ممکنه تصویرتون پیکسله بشه

محیط توسعه SuperNova Studio

این ابزار چیزی شبیه Sketch ست. با این تفاوت که میتونید از تمام لایه‌هایی که در این محیط طراحی میکنید، بصورت Native خروجی گرفته و در پروژتون،‌ ایمپورتش کنید.

با استفاده از ابزارهای زیادی که SuperNova Studio در اختیارتون گذشته، شما میتونید برای سه پلتفرم Android ، iOS و React خروجی بگیرید.

سوپرنوا این امکان رو به شما میده که بتونید قبل از ورود به مرحله توسعه،‌در داخل همون استدیو، لایه‌هاتون رو تست بگیرید. این امکان وجود داره که پیشنمایش لایه‌ها در هر سایزی روی شبیه ساز Android ، iOS و البته مرورگر، اجرا کنید. این ابزار به شما کمک میکنه که قبل از شروع به نوشتن حتی یک خط کد، از UI و UX اپتون مطمئن بشید.

چرا راجع به SuperNova گفتم؟ برای اینکه در محیط توسعه این استدیو، میتونید انیمیشن‌های خودتون رو پیاده سازی کرده و خروجی که دریافت میکنید رو عینا توی پروژتون استفاده کنید.

لازم به ذکره که هنوز خودم از این سرویس استفاده نکردم و چیزهایی که گفتم بعضا از روی داکیومنتهاش و ویدئوهایی بود که درباره استدیوشون منتشر کردند. SuperNova Studio الان در نسخه بتاست و شما میتونید به رایگان دانلود کرده و ازش استفاده کنید.

فریم‌ورک متن باز Lottie

لاتی، نخونید لوتی! چیزیه که من اینهمه واسش سروصدا راه انداختم! فریم ورک Lottie، دقیقا همه‌ی همونچیزیه که ما بهش احتیاج داشتیم. یا بهتر بگم،‌ فریم‌ورک‌های قبل از تو، سؤتفاهم بود :))

 لاتی به همین سادگیه:

1. منابع گرافیکی‌تو در After Effect بساز

2. ازش خروجی JSON بگیر

3. حالا Lottie بهت کمک میکنه که در iOS، Android و ReactNative از اون استفاده کنی.

لاتی چیه؟

لاتی یک فریم‌ورک رایگان و متن بازه که توسط بروبچه‌های AirBnb توسعه داده شده. تا قبل از این برای استفاده کردن از انیمیشن‌های پیچیده، مجبور بودیم کلی کدهای مسخره و پیچیده رو بکار ببریم و کلی پروسه الکی به اپمون اضافه کنیم. حتی لازم بود واسه اینکه انیمه ها پیکسله نشن، برای هر نمونهِ انیمه، در سایزهای مختلف خروجی بگیریم و به پروژمون اضافه کنیم! یا اینکه هزارخط کد بنویسیم تا یه انیمیشن احمقانه رو پیاده کنیم :(

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

ماجرای Lottie

لاتی ابزاریه که به شما کمک میکنه تا بدون محدودیت، منابع گرافیکی رندر شده در افترافکت رو خروجی بگیرین و بصورت Native در iOS ، Android و ReactNative استفاده کنید. سال ۲۰۱۵ بود که Hernan Torrisi ایتالیایی یک افزونه برای افترافکت به نام BodyMovin ساخت، تا به کاربرا کمک کنه از پروژه هاشون بصورت HTML ، JSON و فرمتهای دیگه خروجی بگیرن.

بعد از این بود که چهارنفر نفر از بروبچه‌های AirBnb تصمیم گرفتن تا با استفاده از اون فایل JSON شروع کنن برای هرسه پلتفرم، فریم‌ورک Lottie رو پیاده کنن. بدین صورت بود که ‌‌Brandon Withrow برای iOS، سپس Gabriel Peal برای Android و بعدش Leland Richardson برای ReactNative این سرویس رو پیاده کردن. ناگفته نمونه که Salih Abdul-Karim مدیریت این تیم و پیاده سازی User Experience رو بر عهده داشته. و اینجوری بود که Lottie خلق شد. و چقدر خوب این فریم‌روک پیاده شده.

صلیح عبدالکریم، جیگر منه :))

قالَ شایان: ازونجایی که دونفر از ۳ فاندر AirBnb طراح و گرافیست بودن، به همین دلیل به شدت روی گرافیک و منابع بصری سرویس‌هاشون تاکید و توجه ویژه ای داشتند. پس دور از ذهن نیست که چرا همچین چیزی مثل Lottie انقدر خوب، با کیفیت و کاربردی پیاده میشه.

وقتی روزهای بد تموم میشن

روند کار همیشه اینطور بوده که تیم طراحی، طرح رابط کاربری اپ رو توی اسکچ یا فتوشاپ پیاده می‌کرد. و بعد طرح به توسعه دهنده سپرده میشد و ایشون هم بر اساس پروتوتایپی که دریافت کرده شروع به کد زدن میکرد:

• این پروسه معمولا خیلی طول میکشید

• و معمولا چیزی که پیاده میشد، با طرحی که زده شده بود، نسبتا اختلاف داشت

اوضاع وقتی بدتر میشد که در پروتوتایپ انیمیشن هم وجود داشت! اونوقت توسعه دهنده باید برای هر انیمیشن یه ریسورس تعریف کنه. اوضاع وقتی حزن‌انگیز میشه که انیمیشن پیچیده میشه در نتیجه باید برای Line art یه سری ریسورس، برای Charecter-based animation یه سری ریسورس، و برای Logo animation هم یه سری ریسورس دیگه تعریف کنه. تصور کنید وقتی که بخواید اینارو ریفکتور کنه یا تغییری در اونها بده. چقدر کد، چقدر فایل، چقدر زحمت و چقدر دردسر!

اما حالا طراح یکبار انیمیشن رو طراحی میکنه،‌ یه خروجی جیسون تحویل توسعه دهنده‌ها میده، و روی هرسه پلتفرم یک چیز واحد رو تحویل میگیره! هرموقع هم نیاز به تغییر بود، تو افترک‌افکت تغییرات انجا میشه و فایل جیسون پاس میشه به توسعه دهنده ها. به همین سادگی‌، به همین خوشمزگی!

یکی از امکانات خوب لاتی اینه که به ما اجازه کنترل کامل ویوو ساخته شده رو میده. شما میتونید انیمه رو جلو برده یا برعکس شروع به پخش کنید (بشدت پرکاربرد در onboarding). و میتونید بر اساس اینترکت‌ی که کاربر با ویوو داره اون رو تغییر بدید، مثل همربرگر منو.

یه راه حل انعطاف‌‌پذیر و کاربردی

دو ابزار دیگه مثل لاتی که کاربرد مشابهی دارن، Squall که توسط Marcus Eckert توسعه داده شده و Keyframes که محصولی از فیسبوکه. لایبرری Keyframes متاسفانه یه بخش کوچیکی از خصوصیات After Effect رو پشتیبانی میکنه و بیشتر روی interactionها تمرکز داره، درصورتی که ممکنه انیمیشن‌های ما خصوصیات خاصی داشته باشن و از ابزارهای پیچیده افترافکت در منابعمون استفاده شده باشه. برعکس Squall، بسیار ابزار خوب و کاملیه و اکثر خصوصیات پیاده شده در افترافکت رو پشتیبانی میکنه. با اینحال، متاسفانه فقط iOS رو پیشتیبانی میکنه. شاید جالب باشه بدونید که برو بچه های Lottie از خصوصیات و الگورتیم های Squall تو سرویسهاشون استفاده کردن، الالخصوص برای تفسیر و خوندن فایل جیسون که از AfterEffect خروجی گرفته شده.

علاوه بر اینها، لاتی امکانت دیگه هم داره تا سرویس رو هرچه بیشتر کاربردی کنه. برای مثال، شما میتونید فایلهای JSON رو مستقیما از روی وب فراخونی کنید، که خیلی خیلی خیلی برای A/B Testing مفید و کاربردیه. همینطور که قبلا گفتم شما میتونید کنترل کاملی روی انیمیشنتون داشته باشید، اون رو عقب (Reverse) جلو (Forward) کنید، یا سرعتش رو کم و زیاد کنید، موقع اینترکت با کاربر ظاهرش رو عوض کرده یا افکت‌های خاصی بهش بدید، همه اینها با یه نیم خط کد قابل پیاده‌سازیه.

موضوع جالبتر میشه وقتی که بدونید شما در iOS میتونید بصورت Native از Lottie برای پیاده سازی ترنزیشن انیمیشن استفاده کنید، اونم انیمیشن‌های پیچیده.

جامعه توسعه دهنده‌ها

ازونجای که Lottie یه فریم‌ورک متن‌باز هست، تونسته یه جامعه قوی از طراح‌ها و توسعه‌دهندگان رو دور هم جمع کنه تا اونها با کمک همدیگه، هم بتونن Lottie رو ارتقاع بدن هم کلی ریسورس خوب و با کیفیت تولید کنن. اگه حال کار کردن با افترافکت رو ندارید، یا توی تیمتون گرافیست ماهر برای کار کردن با این ابزار موجود نیست، میتونید از انیمیشن‌های آماده استفاده کنید، اونها در 9Squares، Motion Corpse، AnimoGraphy و LottieFiles به راحتی در دسترس شما هستن

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

برنامه من اینه که در این هفته جاری نحوه استفاده از Lottie رو در هرسه پلتفرم Android، iOS و ReactNative به شما نشون بدم. پس اگه تاحالا از این فریم‌ورک استفاده نکردین، منتظر پست‌های بعدی تو هفته جاری باشین. یا اگه استفاده کردین و جاییش مشکل یا سوالی دارین، در توییتر من رو منشن کنید و سوالتون رو بپرسید تا در پستهای بعدی ‌به اون موارد رو حتما بررسی کنم.