فرمت های ویدیویی از جمله MP4، AVI، MKV، MOV، و WebM، و همچنین فرمت های تصویر مانند GIF، PNG متحرک، WebP و توالی تصویر. این اپلیکیشن با پوشش دادن محدوده وسیع‌تری از نیازهای کاربران، اکنون به هر کسی امکان می‌دهد تا استیکرهای متحرک، رسانه‌های اجتماعی، انیمیشن‌های خبرنامه، دارایی‌های ویدئویی و بسیاری از انواع محتوای بصری را بنا به درخواست خود ایجاد کند.
هدف تبدیل شدن به “یک ابزار برای همه” همچنان فاقد آخرین قطعه از پازل، یعنی پشتیبانی کامل از فایل های Lottie بود. Lottie، درست مانند SVG، یک قالب مبتنی بر برداری است، اما حتی از پشتیبانی چند پلتفرم جامع بهتری نیز برخوردار است ، این واقعیت باعث می‌شود که آن را در بین توسعه‌دهندگان و متخصصان طراحی بسیار محبوب کند. این برای استفاده در پلتفرم‌های مختلف ساخته شده است و امکان ادغام هموار در برنامه‌های وب و موبایل را فراهم می‌کند . اندازه فایل آن حداقل است، بی نهایت مقیاس پذیر است و توسعه دهندگان پس از آشنایی با فرمت اجرای آن را ساده می دانند. Lottie می تواند گرافیک شطرنجی را در خود جای دهد و همچنین از تعامل پشتیبانی می کند.
آخرین نسخه SVGator همه چیزهایی را که برای برنامه های مختلف خود نیاز دارید بدون نیاز به هیچ برنامه یا پلاگین شخص ثالثی دارد.
توجه : می‌توانید تمام قابلیت‌های SVGator را قبل از متعهد شدن به برنامه Pro به صورت رایگان آزمایش کنید. با این حال، می‌توانید حداکثر سه فایل واترمارک شده را صادر کنید، با ویدیوها و GIFهای محدود به کیفیت اولیه.
در این مقاله، یک فرآیند ایجاد را دنبال می کنیم که از این مراحل تشکیل شده است:
- وارد کردن Lottie JSON موجود و انجام برخی تنظیمات جزئی.
- وارد کردن دارایی های متحرک جدید ایجاد شده با SVGator (با استفاده از کتابخانه).
- ایجاد و متحرک سازی عناصر جدید از ابتدا؛
- صادرات انیمیشن Lottie.
# شروع کار با SVGator
فرآیند ثبت نام ساده، سریع و سرراست است و نیازی به کارت اعتباری نیست. در گوگل یا فیسبوک یا با ارائه نام، آدرس ایمیل و رمز عبور خود ثبت نام کنید. یک پروژه را یا با انیمیشن Lottie یا SVG ایستا شروع کنید. اگر فایل موجود ندارید، می توانید همه چیز را با شروع از یک بوم خالی طراحی و متحرک کنید.
اکنون که حساب کاربری خود را ایجاد کرده اید، بیایید مستقیماً به قسمت سرگرم کننده آن بپردازیم. در اینجا پیش نمایشی از نحوه ظاهر انیمیشن شما تا زمانی که پیروی از این راهنما را به پایان می رسانید، ارائه می شود.
# ایجاد یک پروژه جدید
پس از ورود به سیستم و کلیک بر روی گزینه پروژه جدید ، به پنل پروژه جدید هدایت می شوید که در آنجا می توانید بین شروع از یک پروژه خالی یا آپلود یک فایل یکی را انتخاب کنید. بیایید این پروژه را با یک Lottie JSON موجود شروع کنیم.
1. روی دکمه آپلود فایل کلیک کنید و به دایرکتوری که فایل Lottie خود را در آن ذخیره کرده اید بروید.
2. فایل “ Fast response.json ” را انتخاب کنید و روی Open کلیک کنید.
روی play در ویرایشگر ضربه بزنید، انیمیشن باید شبیه به این باشد:
توجه : مطمئن شوید که پس از هر مرحله گزینه Save را بزنید تا مطمئن شوید در حین کار روی این پروژه در کنار راهنمای ما هیچ پیشرفتی را از دست ندهید.
# وارد کردن یک دارایی متحرک
در این مرحله یاد خواهید گرفت که چگونه از کتابخانه برای وارد کردن دارایی های جدید به پروژه خود استفاده کنید. شما به راحتی می توانید از بین انواع SVG های آماده ذخیره شده در دسته های مختلف انتخاب کنید، فایل های جدید را از رایانه خود بارگیری کنید (Lottie، SVG استاتیک و تصاویر)، یا انیمیشن های دیگر پروژه های SVGator را ذخیره کرده و دوباره از آنها استفاده کنید.
در این مورد، بیایید از یک حباب پیام متحرک که قبلاً در بخش آپلودهای کتابخانه ایجاد و ذخیره شده است استفاده کنیم.
با این فیلم آموزشی کوتاه، نحوه ایجاد و ذخیره دارایی های متحرک را بیاموزید .
1. به نوار کناری سمت چپ برنامه بروید و به تب Library بروید، سپس روی نماد «+» کلیک کنید تا دارایی حباب پیامی را که قبلا دانلود کرده‌اید آپلود کنید.
2. پس از بارگذاری در قسمت آپلودها، به سادگی روی آن کلیک کنید تا به پروژه خود اضافه شود.
تمام ویژگی های متحرک دارایی اکنون در جدول زمانی موجود است و در صورت تمایل می توانید آنها را ویرایش کنید.
توجه : قبل از افزودن دارایی متحرک، مطمئن شوید که هد پخش در “0” دوم است. هنگام اضافه کردن یک دارایی متحرک، همیشه از نقطه ای که سر پخش قرار می گیرد شروع به انیمیشن می کند.
3. آزادانه موقعیت و اندازه آن را همانطور که می خواهید تنظیم کنید.
4. در حالی که هد پخش در 0 دوم قرار دارد، روی دکمه Animate کلیک کنید ، سپس Position را انتخاب کنید .
در این مرحله، شما باید اولین فریم کلیدی Position را به صورت خودکار در 0 دوم اضافه کنید و آماده شروع انیمیشن هستید.
# حباب پیام را متحرک کنید
1. با کشیدن هد پخش روی خط زمانی در 0.2 ثانیه شروع کنید:
2. سپس، حباب پیام را چند پیکسل به بالا بکشید. دومین فریم کلیدی در جدول زمانی ظاهر می شود و موقعیت جدید عنصر را مشخص می کند و در نتیجه انیمیشن 2 میلی ثانیه ای ایجاد می شود.
توجه : هر لحظه می توانید Play را بزنید تا ببینید همه چیز چگونه به نظر می رسد!
در مرحله بعد، می‌توانید از انیماتور Scale استفاده کنید تا حباب را بعد از اینکه نقطه‌های نشان‌دهنده تایپ متحرک انجام می‌شوند، با کوچک کردن آن تا 0 برای هر دو محور X و Y ناپدید کنید:
3. در حالی که حباب پیام هنوز انتخاب شده است، هد پخش را 2.2 ثانیه بکشید، روی Animate کلیک کنید و Scale را انتخاب کنید (یا فقط Shift+ را Sروی صفحه کلید فشار دهید) تا اولین فریم Scale را تنظیم کنید، سپس هد پخش را روی 2.5 ثانیه بکشید.
4. ویژگی های مقیاس را برای هر دو محور X و Y (در پانل سمت راست) روی 0 تنظیم کنید. حباب در این مرحله دیگر قابل مشاهده نخواهد بود.
توجه : برای حفظ نسبت در حین تغییر مقادیر مقیاس، مطمئن شوید که نسبت‌ها را حفظ کنید (نماد پیوند در کنار ورودی‌های مقیاس).
برای افزودن جذابیت بیشتر به این حرکت مقیاس‌بندی، یک عملکرد پیش‌تنظیمی ساده اضافه کنید:
5. ابتدا، به اولین فریم کلیدی Scale برگردید (همچنین می‌توانید روی فریم کلیدی دوبار کلیک کنید تا هد پخش را درست روی آن بپرید).
6. Easing Panel را در کنار نشانگر زمان باز کنید و در لیست از پیش تعیین شده به پایین اسکرول کنید، سپس Ease in Back را انتخاب کنید . به دلیل خارج شدن بیشتر از نمودار، این تابع آسان‌کننده یک افکت برگشتی برای انیمیشن مقیاس ایجاد می‌کند.
توجه : می‌توانید بیزیر یک پیش‌تنظیم ساده را تنظیم کنید و یک عملکرد سفارشی جدید ایجاد کنید که در بالای لیست ظاهر می‌شود.
به خاطر داشته باشید که اگر می‌خواهید تخفیف را اعمال کنید، حداقل باید یک فریم کلیدی انتخاب کنید. تابع easing از فریم کلیدی انتخاب شده به سمت فریم کلیدی بعدی در سمت راست اعمال می شود. البته، شما می توانید یک easing خاصی را برای چندین فریم کلیدی به طور همزمان اعمال کنید.
برای اینکه وقتی حباب پیام ناپدید می‌شود، یک انتقال روان‌تر داشته باشید، یک انیمیشن Opacity یک میلی‌ثانیه‌ای در پایان مقیاس‌بندی اضافه کنید:
7. Opacity را از لیست انیماتورها انتخاب کنید و اولین فریم کلیدی را روی 2.4 ثانیه تنظیم کنید، سپس هد پخش را روی 2.5 ثانیه بکشید تا با فریم کلیدی پایانی از انیمیشن مقیاس بالا مطابقت داشته باشد.
8. از پانل Appearance ، نوار لغزنده Opacity را تا 0 درصد به سمت چپ بکشید.
# ایجاد یک آیکون ایمیل
برای اینکه مفهوم پشت این انیمیشن کامل شود، بیایید یک اعلان «ایمیل جدید» به عنوان پاسخی به شخصیت ارسال کننده آن پیام ایجاد کنیم (و بعداً متحرک کنیم).
یک بار دیگر، کتابخانه دارایی SVGator برای این مرحله مفید است:
1. از کتابخانه به نوار جستجو بروید و ” mail ” را تایپ کنید ، سپس روی دارایی ایمیل از نتایج کلیک کنید.
2. آن را در جایی بالای لپ تاپ قرار دهید. نماد ایمیل را برای تطبیق بهتر با سبک انیمیشن ویرایش کنید:
3. گروه ایمیل را باز کنید و مستطیل را از پشت انتخاب کنید.
4. رنگ پر شدن آن را به بنفش تیره تغییر دهید.
5. با استفاده از نوار لغزنده Radius گوشه ها را گرد کنید .
6. با حذف این دو خط از قسمت پایین پاکت، طرح عنصر را مینیمال کنید.
7. فلپ مهر و موم پاکت را که عنصر Polyline در گروه است، بالای مستطیل انتخاب کنید.
8. یک بنفش روشن تر برای پر اضافه کنید، استروک را روی عرض 2 پیکسل تنظیم کنید و همچنین آن را سفید کنید.
برای جالب‌تر کردن انیمیشن، یک هشدار اعلان در گوشه سمت راست بالای پاکت ایجاد کنید:
9. از ابزار Ellipse (O) از نوار ابزار بالا استفاده کنید و یک دایره در گوشه سمت راست بالای پاکت بکشید.
10. یک رنگ قرمز خوب برای پر کردن انتخاب کنید، و استروک را روی سفید با عرض 2 پیکسل قرار دهید.
11. برای انتخاب ابزار Text روی نماد T کلیک کنید .
12. بر روی دایره کلیک کنید و “1” را تایپ کنید.
13. رنگ را روی سفید قرار دهید و روی نماد “B” کلیک کنید تا پررنگ شود.
14. هم دایره قرمز و هم عدد را انتخاب کنید و آنها را گروه بندی کنید: راست کلیک کرده و Group را بزنید.
همچنین می توانید روی صفحه کلید خود Command یا Ctrl + G را بزنید. روی گروه تازه ایجاد شده دوبار کلیک کنید تا نام آن را به «اعلان» تغییر دهید.
15. هم گروه اعلان و هم گروه ایمیل زیر را انتخاب کنید و یک گروه جدید ایجاد کنید که می توانید نام آن را “ایمیل جدید” بگذارید.
# انیمیشن گروه ایمیل جدید
بیایید ایمیل جدیدی را که از لپ‌تاپ بیرون می‌آید، بلافاصله پس از پایان ارسال پیامک توسط شخصیت، انیمیشن کنیم:
1. در حالی که گروه “ایمیل جدید” انتخاب شده است، دو بار روی نماد Move down از هدر کلیک کنید تا گروه در آخر قرار گیرد.
همچنین می توانید Commandیا Ctrl+ فلش را روی صفحه کلید خود فشار دهید.
2. گروه را در پشت لپ تاپ (روی بوم) بکشید تا کاملاً پنهان شود و همچنین کمی آن را کوچک کنید.
3. با playhead در 3 ثانیه، انیماتورهای Scale و Position را اضافه کنید .
همچنین می توانید با فشار دادن Shift + S و Shift + P روی صفحه کلید خود این کار را انجام دهید.
4. playhead را در 3.3 دوم در خط زمانی بکشید.
5. گروه New Email را به بالای لپ تاپ منتقل کنید و کمی آن را بزرگ کنید.
6. همچنین می توانید خط مسیر حرکت را خم کنید تا یک مسیر منحنی برای انیمیشن موقعیت ایجاد کنید.
7. اولین فریم های کلیدی را در 3 دوم انتخاب کنید.
8. پنل easing را باز کنید.
9. و روی Ease Out Cubic از پیش تعیین شده کلیک کنید تا به هر دو فریم کلیدی اضافه شود.
# اعلان را متحرک کنید
بیایید نقطه اعلان را جداگانه متحرک کنیم. زمانی که گروه ایمیل نمایش داده می‌شود، آن را به نمایش در می‌آوریم.
1. گروه Notification را انتخاب کنید.
2. برای آن یک انیمیشن scale-up با 0 برای هر دو محور X و Y در 3.2 و 1 در 3.5 ثانیه ایجاد کنید.
3. اولین فریم کلیدی را انتخاب کنید و از پانل easing، Ease Out Back را انتخاب کنید . این عملکرد آسان‌کننده، افکت popping کردن را تضمین می‌کند.
# بیانگر بودن را بشخصیت اضافه کنید
در حین نگاه کردن به ایمیلی که به تازگی بیرون آمده است، شخصیتی خندان ایجاد کنید. برای این کار، باید دهان را متحرک کنید:
1. مسیر دهان را انتخاب کنید. می توانید از ابزار Node برای انتخاب مستقیم آن با یک کلیک استفاده کنید.
2. playhead را در 3.5 ثانیه بکشید، لحظه‌ای است که لبخند از آنجا شروع می‌شود.
3. آخرین فریم کلیدی انیماتور Stroke offset را از جدول زمانی انتخاب کنید و آن را در 3.5 دوم کپی کنید، یا می توانید از Ctrl یا Cmd + D برای تکرار استفاده کنید.
4. playhead را در 3.9 دوم بکشید.
5. به پنل properties بروید و Offset را روی 0 قرار دهید. اکنون Stroke ، مسیر را تا انتها پر می کند و یک انیمیشن stroke offset به مدت 4 میلی ثانیه ایجاد می کند.
# ویرایش نهایی
هنوز هم می‌توانید همه نوع تنظیمات را قبل از صادرات انیمیشن خود انجام دهید. در این مورد، بیایید رنگ انیمیشن Lottie اولیه را که برای شروع این پروژه استفاده کردیم، تغییر دهیم:
1. از ابزار Node برای انتخاب تمام مسیرهای سبز رنگی که بازوها و تنه شخصیت را تشکیل می دهند، استفاده کنید .
2. رنگ را به دلخواه تغییر دهید.
# اکسپورت لوتی
پس از اتمام ویرایش، می توانید انیمیشن را با کلیک بر روی دکمه Export بالا سمت راست و انتخاب فرمت Lottie صادر کنید. همچنین، می‌توانید Command یا Ctrl+ E را روی صفحه‌کلید خود فشار دهید تا مستقیماً به پنل صادرات بپرید، از آنجا همچنان می‌توانید انیمیشنی را که می‌خواهید صادر کنید انتخاب کنید.
1. مطمئن شوید که قالب Lottie از منوی کشویی انتخاب شده است. در پنل اکسپورت، می‌توانید نامی برای فایلی که می‌خواهید صادر کنید، نرخ فریم و سرعت انیمیشن را انتخاب کنید، یا رنگ پس‌زمینه تنظیم کنید.
2. می توانید پیش نمایش انیمیشن Lottie را با پخش کننده Lottie مشاهده کنید.
توجه : این مرحله توصیه می‌شود تا مطمئن شوید که همه انیمیشن‌ها در قالب Lottie با پیش‌نمایش آن در یک صفحه وب با استفاده از پخش‌کننده Lottie پشتیبانی می‌شوند. پیش نمایش در پنل Export یک انیمیشن Lottie واقعی نیست.
3. به پنل Export بازگردید و برای دانلود Lottie JSON به سادگی بر روی Export کلیک کنید.
# اندیشه‌های نهایی
اکنون که کارتان با انیمیشن تمام شده است، فراموش نکنید که علاوه بر Lottie، گزینه‌های Export زیادی دارید. می‌توانید همان پروژه را در رسانه‌های اجتماعی به صورت ویدیویی ارسال کنید، آن را به عنوان یک انیمیشن SVG برای وب صادر کنید، یا آن را به یک برچسب GIF یا هر نوع تصویر دیگری که فکرش را بکنید تبدیل کنید.
انیمیشن‌های GIF همچنین می‌توانند در ارائه‌ها و نمونه‌های اولیه Figma به‌عنوان پیش‌نمایش با کیفیت بالا از فایل Lottie استفاده شوند.
امیدواریم از این مقاله لذت برده باشید و الهام بخش شما برای ایجاد انیمیشن های شگفت انگیز Lottie در پروژه بعدی شما باشد.
منبع: smashingmagazine
