دوره تکنیک‌های پیشرفته انیمیشن SVG با جاوااسکریپت و کتابخانه‌ها همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره تکنیک‌های پیشرفته انیمیشن SVG با جاوااسکریپت و کتابخانه‌ها

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

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

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

• 1. مقدمه‌ای بر انیمیشن SVG در وب
• 2. مبانی SVG: عناصر و ساختار
• 3. مقدمه بر جاوااسکریپت برای انیمیشن
• 4. اتصال جاوااسکریپت به SVG
• 5. انتخاب عناصر SVG با جاوااسکریپت
• 6. تغییر ویژگی‌های عناصر SVG با جاوااسکریپت
• 7. ایجاد انیمیشن‌های ساده با تغییر ویژگی‌ها
• 8. استفاده از `setInterval` و `setTimeout` برای انیمیشن
• 9. مفهوم فریم و نرخ فریم در انیمیشن
• 10. انیمیشن‌های مبتنی بر زمان در جاوااسکریپت
• 11. استفاده از `requestAnimationFrame` برای انیمیشن‌های روان
• 12. مقدمه‌ای بر کتابخانه‌های انیمیشن SVG
• 13. معرفی GSAP (GreenSock Animation Platform)
• 14. نصب و پیکربندی GSAP
• 15. انیمیشن‌های پایه با GSAP (تغییر موقعیت، اندازه، چرخش)
• 16. استفاده از TimelineMax برای مدیریت توالی انیمیشن‌ها
• 17. ایجاد انیمیشن‌های پیچیده با GSAP
• 18. کنترل انیمیشن‌ها در GSAP (پخش، توقف، معکوس)
• 19. استفاده از توابع callback در GSAP
• 20. انیمیشن‌های مبتنی بر مسیر (Motion Path) با GSAP
• 21. معرفی Anime.js
• 22. نصب و پیکربندی Anime.js
• 23. انیمیشن‌های پایه با Anime.js
• 24. استفاده از Timeline در Anime.js
• 25. کنترل انیمیشن‌ها در Anime.js
• 26. انیمیشن‌های مبتنی بر مسیر با Anime.js
• 27. معرفی Vivus (برای انیمیشن کشیدن خط)
• 28. استفاده از Vivus برای انیمیشن SVG
• 29. تنظیمات و گزینه‌های Vivus
• 30. انیمیشن‌های سفارشی با Vivus
• 31. معرفی Snap.svg
• 32. نصب و پیکربندی Snap.svg
• 33. انیمیشن‌های پایه با Snap.svg
• 34. مدیریت رویدادها در Snap.svg
• 35. انیمیشن‌های پیچیده با Snap.svg
• 36. استفاده از مسیرها در Snap.svg
• 37. معرفی SMIL (Synchronized Multimedia Integration Language)
• 38. مبانی SMIL برای انیمیشن SVG
• 39. عناصر انیمیشن در SMIL (`<animate>`, `<animateTransform>`)
• 40. توالی و همزمانی انیمیشن‌ها با SMIL
• 41. انتقال و تغییر شکل با SMIL
• 42. استفاده از مسیرها در SMIL
• 43. مقایسه SMIL با جاوااسکریپت و کتابخانه‌ها
• 44. اصول طراحی انیمیشن‌های مؤثر
• 45. روان‌شناسی رنگ در انیمیشن
• 46. تایمینگ و اسپیسینگ در انیمیشن
• 47. اصول حرکت (Ease-in, Ease-out)
• 48. استفاده از انیمیشن برای بهبود تجربه کاربری (UX)
• 49. انیمیشن‌های بارگذاری (Loading Animations)
• 50. انیمیشن‌های تعاملی (Interactive Animations)
• 51. انیمیشن‌های هدایت کاربر (Onboarding Animations)
• 52. بهینه‌سازی انیمیشن‌های SVG برای عملکرد
• 53. کاهش حجم فایل‌های SVG
• 54. استفاده از CSS برای انیمیشن‌های ساده SVG
• 55. ترکیب جاوااسکریپت و CSS برای انیمیشن
• 56. انیمیشن‌های مبتنی بر اسکرول
• 57. پیاده‌سازی انیمیشن‌های اسکرول با جاوااسکریپت
• 58. استفاده از کتابخانه‌های اسکرول انیمیشن
• 59. انیمیشن‌های پارالاکس (Parallax Scrolling)
• 60. تکنیک‌های پیشرفته انیمیشن SVG
• 61. انیمیشن‌های مبتنی بر داده (Data-driven Animations)
• 62. استفاده از SVG برای نمایش نمودارها و گراف‌ها
• 63. انیمیشن‌های انتقال بین وضعیت‌ها (State Transitions)
• 64. انیمیشن‌های انیمیت کردن متن
• 65. انیمیشن‌های انیمیت کردن آیکون‌ها
• 66. انیمیشن‌های انیمیت کردن اشکال هندسی پیچیده
• 67. استفاده از ماسک‌ها و کلیپ‌پث‌ها در انیمیشن
• 68. انیمیشن‌های مبتنی بر فیزیک (Physics-based Animations)
• 69. شبیه‌سازی جاذبه و فنر در انیمیشن
• 70. مدل‌سازی رفتار اشیاء در انیمیشن
• 71. انیمیشن‌های واقع‌گرایانه با جاوااسکریپت
• 72. ملاحظات دسترسی‌پذیری (Accessibility) در انیمیشن SVG
• 73. کنترل انیمیشن‌ها برای کاربران با نیازهای ویژه
• 74. استفاده از `prefers-reduced-motion`
• 75. تست و اشکال‌زدایی انیمیشن‌های SVG
• 76. ابزارهای توسعه‌دهنده برای انیمیشن SVG
• 77. روش‌های تست عملکرد انیمیشن
• 78. بهترین شیوه‌ها در کدنویسی انیمیشن SVG
• 79. مدیریت کد انیمیشن‌های پیچیده
• 80. سازگاری مرورگرها برای انیمیشن‌های SVG
• 81. نکات پیشرفته در GSAP
• 82. نکات پیشرفته در Anime.js
• 83. ساخت انیمیشن‌های سفارشی با کتابخانه‌های موجود
• 84. تکنیک‌های انیمیشن برای رابط‌های کاربری پویا
• 85. انیمیشن‌های مبتنی بر رویدادهای ماوس و لمس
• 86. نمونه‌های عملی انیمیشن‌های پیشرفته SVG
• 87. پروژه‌های پیشرفته و خلاقانه با SVG Animation
• 88. کاربرد انیمیشن SVG در بازی‌های تحت وب
• 89. انیمیشن‌های تعاملی پیچیده
• 90. اصول طراحی انیمیشن برای وب‌سایت‌های مدرن
• 91. جمع‌بندی تکنیک‌های پیشرفته انیمیشن SVG
• 92. نکات نهایی برای توسعه‌دهندگان انیمیشن SVG