آموزش کار با Auto animate و درگ پروتوتایپ در Adobe XD

مهمترین نکته ای که در Auto animate وجود دارد تا انیمیشن ما به درستی به تصویر کشیده شود، رعایت یکسان بودن نام و نوع موجودیت ها در 2 Artboard میباشد. اگر در صفحه اول نام یک شیپ را برابر با x قرار دهید، در صفحه دوم نیز باید نام شیپ را با x یکسان کنید. همچنین اگر در صفحه اول شیپ از نوع مربع میباشد، در صفحه دوم نیز باید شیپ مربع باشد.

حال اقدام به ساخت یک آرتبرد کرده و درون آن مربعی رسم کنید.

رسم مربع در adobe xd
رسم مربع در adobe xd

پس از رسم مربع یک خط و یک دایره ی کوچک بر روی آن ایجاد مینماییم به اصطلاح یک اسلایدر درست میکنیم.

ساخت اسلایدر (لورم ایپسوم فارسی)
ساخت اسلایدر (لورم ایپسوم فارسی)

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

آغاز فرایند ساخت انیمیشن
آغاز فرایند ساخت انیمیشن

وارد Prototype مود شوید و بر روی دایره ی اسلایدر در ارتبرد اول کلیک کنید، سپس آن را به ارتبرد دوم متصل نمایید و تنظیمات را مشابه تصویر زیر اعمال کنید.

این تنظیمات بیانگر این است که با کشیدن (درگ کردن) اسلایدر از ارتبرد اول به ارتبرد دوم به صورت انیمیشنی و خودکار هدایت میشویم.

اتصال پروتوتایپ به ارتبرد دوم
اتصال پروتوتایپ به ارتبرد دوم

حال همین کار از دایره اسلایدر ارتبرد دوم به اسلایدر ارتبرد اول انجام دهید

مرحله پایانی
مرحله پایانی

انیمیشن ما تکمیل گردید، برای مشاهده بر روی دکمه اجرا در بالا سمت چپ برنامه کلیک فرمایید.

خروجی انیمیشن
خروجی انیمیشن

دقت داشته باشید اگر شیپ شما از حالت شیپ به حالت Path تغییر پیدا کند باید در هر دو ارتبرد این تغییر لحاظ شود. برای مثال در ارتبرد دوم دوبار بر روی مربع کلیک کرده و گوشه مربع را به داخل کشیده و تصویر را دفرمه کنید.

تغییر شیپ در Auto animate
تغییر شیپ در Auto animate

همانطور که در تصویر پیداست شیپ ما از مدل Rectangle 1 به Path 1 تغییر پیدا کرد، این تغییر باید در ارتبرد اول نیز اعمال شود. برای اینکار بر روی مربع در ارتبرد اول دو بار کلیک کرده و روی یک نقطه ابی رنگ کلیک کنید ، سپس نام شیپ را به Path 1 تغییر دهید و دوباره برنامه را اجرا نمایید تا از دیدن خروجی متحیر شوید.

تغییر شیپ و انیمیشن
تغییر شیپ و انیمیشن

محتوای تولید شده توسط تیم آی لورم : لورم ایپسوم ساز فارسی و انگلیسی