قم بإنشاء رسوم متحركة Lottie مخصصة باستخدام SVGatorن های سفارشی Lottie با 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