اگه تا حالا تجربه استفاده از انیمیشن توی طراحی یه صفحه داشته باشید، می‌دونید که بعد از پیدا کردن انیمیشن مناسب یا ساختنش، بخش مهم و سخت ماجرا تحویل اون انیمیشن‌ها به برنامه‌‌نویس‌هاست.
اخیرا توی کوئرا به چنین مسئله‌ای برخوردیم و چون برای خودم خیلی چالش‌برانگیز شد، تصمیم گرفتم تجربه‌ام رو اینجا با بقیه به اشتراک بذارم.
حالا اصلا چرا انیمیشن؟
قضیه این بود که ما توی یکی از صفحات کوئرا کالج، مقدار زیادی متن داشتیم و متوجه شدیم که کاربرها این متن‌ها رو نمی‌خونن و برای ما هم خیلی مهم بود که این اطلاعات رو از یه طریقی بهشون برسونیم. پس تصمیم گرفتیم توی یه سکشن خاص، از قالب متن بیایم بیرون و به صورت تصویری بهشون نشون بدیم.
این شد که من به فکر یه سری انیمیشن کوتاه ۲ تا ۳ ثانیه‌ای افتادم و شروع کردم با دوست خوبمون فیگما و قابلیت smart animate این انیمیشن‌ها رو بسازم.
رفتم به برنامه‌نویس‌ها گفتم که چنین ایده‌ای دارم و ازشون پرسیدم در نهایت خروجی این انیمیشن‌ها رو چجوری و توی چه فرمتی بهشون بدم بهتره؟ اونا اول گفتن توی فرمت json باید بهشون تحویل بدم اما بعد بهم لاتی رو معرفی کردن که حجم خیلییی کمتری نسبت به json داره.
لاتی یه سایت پر از انیمیشنه که هم میشه از انیمیشن‌های خودش استفاده کرد هم توش انیمشن ساخت. در ظاهر فقط کافیه فلوی پروتوتایپ‌شده‌ی فیگما رو بهش بدیم و اون بهمون فایل .dotlottie بده اما در باطن یه سری نکات مهم داره که می‌خوام بهتون بگم تا مثل من اذیت نشید.
از طریق این لینک می‌تونید پلاگین لاتی رو نصب کنید. توی این صفحه یه ویدیوی راهنمایی هم داره که می‌تونید ببینید چطور باید انیمیشن سازگار با لاتی بسازید. ولی من هم اینجا میگم بهتون.
۳. ساختن انیمیشن‌های سازگار با لاتی
بعد از اینکه پلاگین لاتی رو نصب کردید لازمه برگردید به انیمیشنی که ساختید و چندتا چیز رو توی دیزاین چک کنید و مطمئن بشید که انیمیشنتون برای لاتی قابل فهمه.
می‌دونم توی دیزاین کار تمیزی نیست. اما اینجا استثنائا لازمه که کثیف کار کنیم و به هیچ وجه از فریم استفاده نکنیم :))
مثلا ممکنه انیمیشنتون اینجوری باشه که یه دایره وسط صفحه ظاهر بشه. کار غلط اینه که توی فریم اول اون دایره وجود نداشته باشه و توی فریم دوم دایره وجود داشته باشه. اما کار درست اینه که توی هر دو حالت دایره وجود داشته باشه ولی توی حالت اول opacity ش صفر و توی حالت دوم ۱۰۰ باشه.
۴. بعد از رعایت همه این نکات، باید برای هر انیمیشنتون یه Flow Starting Point تعریف کنید و بعد پلاگین لاتی رو ران کنید.
منظور از Flow Starting Point فریمیه که از اونجا انیمیشنتون شروع میشه. مثلا انیمیشن learn من این استارتینگ پوینت رو داره:
وقتی پلاگین لاتی رو اجرا می‌کنید باید لاگین کنید و بعدش این صفحه باز میشه.
همونطور که قبلا گفتم لاتی یه کتابخونه غنی از انیمیشن‌های کاربردی هم داره که می‌تونیم استفاده کنیم. اما برای اینکه انیمیشن خودمون رو به فایل لاتی تبدیل کنیم باید بریم توی تب export to lottie. برای اکسپورت گرفتن از انیمیشنمون دو راه داریم.
راه اول: انتخاب به‌ترتیب فریم‌هایی که می‌خوایم انیمیشن بشن و بعد کلیک روی دکمه Export to Lottie. توی این حالت لاتی خودش زمان‌ها و سرعت انیمیشن رو تنظیم می‌کنه که البته می‌تونیم تغییرش بدیم.
راه دوم: انتخاب فلوی انیمیشنمون که راه پیشنهادی من همینه. اگه همه اون ۴ نکته‌ای که گفتم رو رعایت کرده باشم، انیمیشنمون رو در حال اجرا توی این قسمت می‌بینیم. در غیر این صورت ارور میده و میگه نمی‌تونم اجرا کنم.
۵. حالا فقط کافیه روی save to workspace بزنیم و بعد مرورگرمون رو باز کنیم و وارد سایت لاتی و داشبورد خودمون بشیم. می‌تونیم همه انیمشن‌های سیو شده‌مون رو البته تا سقف ۱۰ تا، اینجا ببینیم. (برای بیشتر از ۱۰ تا باید اکانت پرمیوم بخریم.)
۶. در نهایت برای تحویل انیمیشن‌ها به برنامه‌نویس‌ها کافیه روی آیکون سه‌نقطه هر کدومشون بزنیم و از گزینه download as، به فرمت dotlottie دانلودش کنیم و بفرستیم برای برای برنامه‌نویس مورد نظر.
همونطور که می‌بینید حجمش با فایل json اصلا قابل مقایسه نیست. و در آن نشانه‌هایی‌ست برای کسانیکه به پرفورمنس و سرعت لود سایت خود می‌اندیشند :))
اگه شما هم تجربه‌ای توی ساختن انیمیشن‌های کوتاه این مدلی دارید و ابزار بهتری برای این کار می‌شناسید خیلی ممنون میشم که کامنت بذارید و به من و بقیه معرفی کنید.
