فلش‌کارت‌های آموزشی پیاده‌سازی تعاملات کوچک با JavaScript و Web Animation API

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره پیاده‌سازی تعاملات کوچک با JavaScript و Web Animation API

موضوع کلی: طراحی و پروتوتایپینگ

موضوع میانی: کاربرد میکرواینترکشن برای بهبود UX

📋 سرفصل‌های دوره

• 1. مبانی میکرواینترکشن و جایگاه آن در UX
• 2. اهداف UX در بازخورد، هدایت توجه و تأیید اقدام
• 3. اجزای تعامل: محرک، قانون، بازخورد و حلقه
• 4. نقشه‌برداری از لحظه‌های میکرواینترکشن در جریان کاربر
• 5. اصول حرکت در رابط کاربری و کاربرد آن در مقیاس کوچک
• 6. زمان‌بندی، مدت و احساس سرعت در تعاملات
• 7. منحنی‌های easing و انتخاب حس حرکت مناسب
• 8. سلسله‌مراتب حرکتی و جلوگیری از شلوغی بصری
• 9. مدل‌سازی وضعیت‌ها برای تعاملات قابل پیش‌بینی
• 10. معیارهای انتخاب میان انیمیشن ضروری و تزئینی
• 11. دسترسی‌پذیری حرکتی و احترام به ترجیح کاهش حرکت
• 12. مبانی عملکرد رندر و محدودیت‌های انیمیشن وب
• 13. مدل رویدادها در JavaScript و چرخه عمر تعامل
• 14. انتخاب هدف‌ها و مدیریت مرجع عناصر DOM
• 15. نمایش وضعیت با کلاس‌ها، ویژگی‌های داده و state
• 16. مقایسه CSS Transitions، JavaScript و Web Animation API
• 17. معماری Web Animation API و مدل AnimationEffect
• 18. ساخت انیمیشن با Element.animate
• 19. تعریف keyframeها و میانه‌های حرکت
• 20. تنظیم duration، delay و endDelay
• 21. کنترل play، pause، reverse و cancel
• 22. مدیریت currentTime و playbackRate
• 23. حالت‌های fill و رفتار پیش و پس از بازه فعال
• 24. تکرار، جهت و حالت alternate در انیمیشن‌ها
• 25. ترکیب انیمیشن‌ها با composite و جایگزینی مقادیر
• 26. ساخت easing سفارشی با cubic-bezier و steps
• 27. ثبت حالت نهایی با commitStyles و persist
• 28. بهینه‌سازی transform و opacity برای اجرای روان
• 29. درک layout، paint و composite در مرورگر
• 30. جلوگیری از اندازه‌گیری اجباری و جابه‌جایی layout
• 31. پیاده‌سازی تکنیک FLIP برای تغییر مکان عناصر
• 32. طراحی hover، focus و click با رفتارهای متمایز
• 33. میکرواینترکشن دکمه و بازخورد فشار و رها کردن
• 34. تغییر شکل آیکون بین وضعیت‌های معنایی
• 35. ساخت toggle و switch با وضعیت روشن و خاموش
• 36. تعامل checkbox و radio با بازخورد بصری دقیق
• 37. تمرکز، ورود متن و افکت‌های میدان فرم
• 38. نمایش خطا، موفقیت و وضعیت اعتبارسنجی فرم
• 39. ساخت شمارنده، stepper و تغییر عددی روان
• 40. دکمه ارسال با وضعیت loading و غیرفعال‌سازی
• 41. نشانگرهای پیشرفت خطی و حلقوی
• 42. ساخت skeleton و shimmer برای انتظار کوتاه
• 43. طراحی toast و Snackbar با ورود، مکث و خروج
• 44. پیاده‌سازی tooltip و popover سبک
• 45. ساخت accordion و disclosure با ارتفاع پویا
• 46. انیمیشن منوی dropdown و مدیریت جهت بازشدن
• 47. جابه‌جایی بین tabها با نشانگر حرکتی
• 48. باز و بسته کردن modal با تمرکز و حرکت هماهنگ
• 49. کارت‌های تعاملی و بازخورد hover بدون اختلال در محتوا
• 50. افزودن و حذف آیتم‌های فهرست با حرکت مرحله‌ای
• 51. مرتب‌سازی کشیدنی و به‌روزرسانی موقعیت آیتم‌ها
• 52. کار با Pointer Events برای ماوس، قلم و لمس
• 53. محاسبه سرعت، اینرسی و پایان حرکت لمسی
• 54. انیمیشن‌های وابسته به اسکرول و پارالاکس محدود
• 55. راه‌اندازی تعامل با IntersectionObserver
• 56. پشتیبانی از صفحه‌کلید و دسترس‌پذیری تعاملات
• 57. مدیریت focus در تعاملات پویا
• 58. اعلام تغییرات به فناوری‌های کمکی با ARIA Live
• 59. پیاده‌سازی prefers-reduced-motion و حالت کم‌حرکت
• 60. لغو، وقفه و تعویض امن انیمیشن‌های هم‌زمان
• 61. هماهنگ‌کردن چند انیمیشن روی یک عنصر
• 62. ترتیب‌بندی و اجرای زنجیره‌ای تعاملات
• 63. ساخت timelineهای سفارشی برای سناریوهای چندمرحله‌ای
• 64. استفاده از finished و Promise برای پایان‌یافتن انیمیشن
• 65. پاک‌سازی effectها و جلوگیری از نشت حافظه
• 66. مقایسه Web Animation API با requestAnimationFrame
• 67. ترکیب Web Animation API با CSS Transitions
• 68. شبیه‌سازی حرکت فنری با JavaScript
• 69. حرکت وابسته به سرعت برای تعامل‌های فیزیکی
• 70. مدیریت تفاوت مرورگرها و شناسایی پشتیبانی API
• 71. عیب‌یابی انیمیشن‌ها در DevTools
• 72. تست تعاملات در نقاط واکنش‌گرا، ورودی‌ها و حالت‌های دسترسی‌پذیری
• 73. ساخت توابع کمکی قابل استفاده مجدد برای میکرواینترکشن‌ها
• 74. طراحی توکن‌های حرکت برای duration و easing
• 75. ماژول‌سازی کد تعامل و جداسازی منطق از نما
• 76. پیاده‌سازی پروژه نمونه فرم تعاملی کامل
• 77. پیاده‌سازی پروژه نمونه فهرست وظایف با تعامل‌های هم‌زمان