چگونه در ایکس دی یک Animate Path بسازیم

مدرس: بردیا بسطامی

نمونه سازی اولیه در نرم افزار XD بعد جدیدی داره و اون بعد، انیمیشنه.
حالا باید بدونید که بعد از این پست شما می تونید تمام Object های موجود در یک Artboard رو متحرک سازی کنید.

کاربران XD در روند کار در این نرم‌افزار عادت دارن؛ چندین صفحه نمایش رو طراحی کرده و هنگام تکمیل پروژه اون ها رو به هم متصل کنن.
در روند ایجاد انیمیشن یک Object، شما مسیر انتهایی و ابتدایی مورد نظرتون رو در دو صفحه جدا مشخص می‌کنید و در آخر این خود XD هست که به طور هوشمند و اتوماتیک انیمیشن رو به Artboard شما اضافه میکنه.

البته این بعد از طراحی در این نرم افزار که سروکار مستقیمی با طراحی وب سایت و اپلیکیشن داره؛ تقریباً الزامیه.

چون شما قطعاً امروزه در فضای اپلیکیشن ها و وبسایت ها میبینید که از انیمیشن های کوچک بر روی Object های مختلف استفاده میشه.
در این آموزش ساعت شنی یاد می گیریم چطور با روشی بسیار ساده یک نمودار رو به دلخواه در نرم افزار XD متحرک سازی کنیم.

  • نرم‌افزار ایکس دی رو باز می‌کنیم.
  • ابتدا Artboard مورد نظرمون رو در حالت انتخاب قرار می‌دیم و با نگه داشتن کلید Alt و کلیک و درگ کردن از اون یک کپی میگیریم لایه‌ی زیرین رو به لایه‌ی بالایی Parent می کنیم.
  • سپس روی Pathمورد نظرمون دابل کلیک میکنیم و اون رو جا به جا می کنیم.
  • کافیه وارد قسمت Prototype بشیم و روی اسم Artboard اول کلیک کنیم و لینک مورد نظرمون رو ایجاد کنیم.
  • در قسمت Interaction حالت Typeرو روی Auto Animate قرار می‌دیم و Ease In رو به حالت Ease in – out تغییر میدیم.
  • حالا روی Art board دوم کلیک میکنیم و یک لینک به Artboard اول میدیم.
  • در نهایت روی قسمت Playکلیک میکنیم تا فرایند بوجود اومده رو ببینیم.