فلش‌کارت‌های آموزشی انیمیشن‌های فریم‌محور با requestAnimationFrame

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

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

عنوان دوره: دوره انیمیشن‌های فریم‌محور با requestAnimationFrame

موضوع کلی: برنامه نویسی

موضوع میانی: انیمیشن‌های وب (Web Animations)

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

• 1. مبانی و پیش‌نیازها:
• 2. HTML, CSS, و JavaScript: مروری سریع
• 3. درک DOM و نحوه دستکاری آن
• 4. مبانی انیمیشن در CSS و ترنزیشن‌ها
• 5. مفاهیم اولیه requestAnimationFrame
• 6. نصب و راه‌اندازی محیط توسعه (IDE)
• 7. آشنایی با مرورگر Developer Tools
• 8. ساختار کلی یک پروژه انیمیشن‌سازی وب
• 9. اصول اولیه کدنویسی تمیز و خوانا
• 10. اهمیت کامنت‌گذاری در کد
• 11. مفاهیم متغیرها، داده‌ها و عملگرها در JavaScript
• 12. ساختارهای کنترلی: if/else و switch
• 13. حلقه‌ها: for, while و do...while
• 14. توابع و اهمیت آن‌ها در کدنویسی
• 15. آرایه‌ها و اشیاء در JavaScript
• 16. مروری بر رویدادها در JavaScript
• 17. مدیریت خطا در JavaScript
• 18. مفاهیم اساسی asynchronous programming
• 19. آشنایی با Console و استفاده از آن برای دیباگ
• 20. Git و GitHub: مفاهیم اولیه و کنترل نسخه
• 21. انتخاب و تنظیم ویرایشگر کد (VS Code, Sublime Text, ...)
• 22. فلسفه و اهمیت انیمیشن در طراحی وب
• 23. تاثیر انیمیشن بر تجربه کاربری (UX)
• 24. معرفی requestAnimationFrame: چیستی و چرایی
• 25. مقایسه requestAnimationFrame با setTimeout و setInterval
• 26. چرخه عمر requestAnimationFrame
• 27. شروع کار با requestAnimationFrame: اولین انیمیشن
• 28. گرفتن زمان با performance.now()
• 29. اندازه‌گیری و تنظیم نرخ فریم (FPS)
• 30. ایجاد انیمیشن‌های ساده: حرکت، تغییر اندازه، چرخش
• 31. انیمیشن‌های خطی و غیرخطی (Easing functions)
• 32. کار با Math.random() و ایجاد افکت‌های تصادفی
• 33. استفاده از CSS برای سبک‌دهی و قرار دادن المان‌ها
• 34. استفاده از کتابخانه‌های کمکی (مانند GSAP) - معرفی
• 35. کار با چندین المان به طور همزمان
• 36. انیمیشن‌های زنجیره‌ای و متوالی
• 37. انیمیشن‌های موازی
• 38. ایجاد انیمیشن‌های تعاملی بر اساس رویدادها (Click, Hover)
• 39. بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر
• 40. آشنایی با Chrome DevTools و پروفایل انیمیشن‌ها
• 41. شناسایی گلوگاه‌های عملکرد و راه‌حل‌ها
• 42. استفاده از Request Animation Frame برای انیمیشن‌های پیچیده
• 43. انیمیشن‌های پارالاکس (Parallax)
• 44. انیمیشن‌های مبتنی بر اسکرول (Scroll-triggered animations)
• 45. انیمیشن‌های واکنش‌گرا (Responsive animations)
• 46. ایجاد انیمیشن‌های متن (Text animations)
• 47. کار با فونت‌ها و تایپوگرافی در انیمیشن‌ها
• 48. انیمیشن‌های SVG با استفاده از requestAnimationFrame
• 49. ایجاد اینتراکشن‌های پیشرفته: Drag & Drop
• 50. انیمیشن‌های سه‌بعدی با CSS Transforms و requestAnimationFrame
• 51. افزودن صدا به انیمیشن‌ها
• 52. وارد کردن فایل‌های ویدئویی و استفاده از آن‌ها در انیمیشن‌ها
• 53. معرفی WebGL و نقش آن در انیمیشن‌های وب
• 54. انیمیشن‌های WebGL با استفاده از requestAnimationFrame (مقدماتی)
• 55. آشنایی با کتابخانه‌های WebGL (سه.js, Babylon.js)
• 56. استفاده از فیلترهای CSS برای ایجاد افکت‌های ویژه
• 57. ایجاد افکت‌های شیدر سفارشی (مقدماتی)
• 58. انیمیشن‌های تعاملی با استفاده از WebSockets
• 59. کار با داده‌های خارجی و API‌ها در انیمیشن‌ها
• 60. افکت‌های ذرات (Particle effects)
• 61. ایجاد اینترفیس‌های کاربری انیمیشنی (Animated UI)
• 62. انیمیشن‌های بارگذاری (Loading animations)
• 63. انیمیشن‌های منو و ناوبری (Menu animations)
• 64. افکت‌های تغییر تصویر (Image transitions)
• 65. ایجاد انیمیشن‌های مبتنی بر داده (Data-driven animations)
• 66. بهینه‌سازی برای دستگاه‌های تلفن همراه
• 67. استفاده از سرویس workerها برای بهبود عملکرد
• 68. معرفی و استفاده از IndexedDB برای ذخیره داده‌های انیمیشن
• 69. ایجاد انیمیشن‌های چندرسانه‌ای
• 70. مبانی طراحی انیمیشن و اصول آن (Timing, Spacing, Easing)
• 71. اصول طراحی رابط کاربری انیمیشنی
• 72. اصول دسترسی‌پذیری در انیمیشن‌ها (Accessibility)
• 73. تست و اشکال‌زدایی انیمیشن‌ها
• 74. بهره‌وری و چگونگی استفاده از کد‌های آماده
• 75. ارائه و انتشار پروژه‌های انیمیشنی
• 76. آشنایی با کتابخانه‌های انیمیشن دیگر (Anime.js, Velocity.js)
• 77. مقایسه و انتخاب ابزارهای مناسب برای انیمیشن‌سازی
• 78. مدیریت پروژه و همکاری تیمی
• 79. نسخه‌بندی و نگهداری از کد
• 80. کار با فریم‌ورک‌های JavaScript (React, Vue, Angular) - مقدماتی
• 81. استفاده از requestAnimationFrame در فریم‌ورک‌ها
• 82. ایجاد کامپوننت‌های انیمیشنی
• 83. مفاهیم پیشرفته Easing functions
• 84. ایجاد easing function سفارشی
• 85. آشنایی با تکنیک‌های کدنویسی پیشرفته (closures, prototypes)
• 86. بهبود عملکرد و بهینه‌سازی کدهای انیمیشن
• 87. انیمیشن‌های پیشرفته SVG
• 88. بهینه‌سازی انیمیشن‌های SVG
• 89. کار با Canvas API و ترکیب آن با requestAnimationFrame
• 90. ایجاد بازی‌های ساده با استفاده از requestAnimationFrame
• 91. مبانی هوش مصنوعی در انیمیشن‌ها (مقدماتی)
• 92. یادگیری ماشینی در انیمیشن‌ها (مقدماتی)
• 93. چالش‌ها و ایده‌های خلاقانه برای پروژه‌های انیمیشنی
• 94. منابع و ابزارهای یادگیری بیشتر
• 95. نکات کلیدی برای موفقیت در انیمیشن‌سازی وب
• 96. جمع‌بندی و مرور مطالب
• 97. ارزیابی و آزمون
• 98. پروژه‌های عملی و نمونه‌کار
• 99. آینده انیمیشن‌های وب و روندهای جدید
• 100. موفقیت در مسیر یادگیری