برای استفاده از Auto-Animate، شما یک آرتبورد اولیه و یک آرتبورد نهایی که وضعیت پایانی انیمیشن را نشان میدهد، طراحی میکنید. سپس در حالت Prototype، یک عنصر را از آرتبورد اول به آرتبورد دوم متصل کرده و Action را روی Auto-Animate تنظیم میکنید. XD به صورت خودکار یک انیمیشن نرم بین عناصری که در هر دو آرتبورد نام لایه یکسانی دارند، ایجاد میکند.
قانون اصلی Auto-Animate: تطابق نام لایهها
این مهمترین نکتهای است که باید به خاطر بسپارید. جادوی Auto-Animate زمانی اتفاق میافتد که Adobe XD یک عنصر را در آرتبورد اول (مثلاً یک دایره به نام circle-1) پیدا کرده و همان عنصر را با همان نام در آرتبورد دوم جستجو میکند. سپس به صورت هوشمند، تغییرات ویژگیهای آن عنصر (مانند اندازه، موقعیت، رنگ، چرخش یا شفافیت) را متحرکسازی میکند.
اگر نام لایهها یکسان نباشد، به جای انیمیشن نرم، یک محو شدن (Fade) ساده اتفاق میافتد.
آموزش گام به گام: ساخت انیمیشن یک دکمه تاگل (Toggle Switch)
بیایید یک دکمه ساده بسازیم که از حالت خاموش به روشن تغییر وضعیت میدهد.
گام ۱: طراحی حالت اولیه (خاموش)
- یک آرتبورد جدید بسازید.
- یک مستطیل با گوشههای گرد به رنگ خاکستری کمرنگ برای پسزمینه دکمه رسم کنید. این لایه را track بنامید.
- یک دایره کوچکتر به رنگ سفید در سمت چپ این مستطیل قرار دهید. این لایه را handle بنامید.
گام ۲: طراحی حالت نهایی (روشن)
- آرتبورد اول را به طور کامل انتخاب کرده و آن را کپی کنید (Ctrl+D در ویندوز یا Cmd+D در مک). این کار تضمین میکند که نام تمام لایهها یکسان باقی میماند.
- در آرتبورد دوم:
- لایه track را انتخاب کرده و رنگ آن را به سبز تغییر دهید.
- لایه handle را انتخاب کرده و آن را به سمت راست مستطیل منتقل کنید.
گام ۳: اتصال در حالت پروتوتایپ (Prototype)
- به تب Prototype در بالای سمت چپ نرمافزار بروید.
- در آرتبورد اول، گروه دکمه تاگل (شامل track و handle) را انتخاب کنید.
- یک فلش آبی ظاهر میشود. آن را بکشید و روی آرتبورد دوم رها کنید.
گام ۴: تنظیمات تعامل (Interaction)
پس از اتصال، پنل تنظیمات در سمت راست ظاهر میشود.
- Trigger (ماشه): آن را روی Tap (لمس یا کلیک) تنظیم کنید.
- Action (عمل):
- Type: این مهمترین بخش است. آن را روی Auto-Animate قرار دهید.
- Destination: باید آرتبورد دوم باشد (که به صورت خودکار تنظیم شده است).
- Animation (انیمیشن):
- Easing (شتاب): گزینهای مانند Ease In-Out را برای یک حرکت نرم و طبیعی انتخاب کنید.
- Duration (مدت زمان): مدت زمان انیمیشن را مشخص کنید (مثلاً 0.4 ثانیه).
گام ۵: ایجاد مسیر برگشت
حالا همین فرآیند را برعکس انجام دهید: دکمه تاگل را در آرتبورد دوم انتخاب کرده، آن را به آرتبورد اول متصل کنید و همان تنظیمات Auto-Animate را اعمال نمایید.
پیشنمایش انیمیشن
آرتبورد اول را انتخاب کرده و روی آیکون Desktop Preview (شکل Play) در بالای سمت راست کلیک کنید. حالا با کلیک روی دکمه تاگل، باید یک انیمیشن نرم و زیبا بین دو حالت خاموش و روشن مشاهده کنید.
ایدههای دیگر برای تمرین
با همین تکنیک ساده میتوانید انیمیشنهای UI پیچیدهتری بسازید:
- باز شدن یک کارت (Card): کارتی که با کلیک، بزرگتر شده و اطلاعات بیشتری را نمایش میدهد.
- انیمیشن لایک: یک آیکون قلب توخالی که با کلیک، به رنگ قرمز درآمده و کمی بزرگتر میشود.
- منوی همبرگری: آیکون سه خط که با کلیک، به شکل یک ضربدر (X) درمیآید.
- صفحه لودینگ: یک نوار پیشرفت که به آرامی پر میشود.
تسلط بر Auto-Animate به شما اجازه میدهد تا پروتوتایپهای بسیار واقعیتر و جذابتری در ادوبی ایکس دی بسازید که تجربه کاربری نهایی را به خوبی شبیهسازی میکنند.