اپلیکیشن اندرویدی فلش‌کارت آموزشی انیمیشن SVG: از SMIL تا JS و CSS

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب انیمیشن SVG: از SMIL تا JS و CSS

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

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

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مقدمه ای بر انیمیشن SVG
• 2. تاریخچه انیمیشن SVG
• 3. SMIL چیست؟
• 4. چرا SMIL؟
• 5. محدودیت های SMIL
• 6. معرفی انیمیشن در SVG
• 7. انواع انیمیشن SVG
• 8. انیمیشن مبتنی بر زمان
• 9. انیمیشن مبتنی بر رویداد
• 10. انیمیشن مبتنی بر جاوا اسکریپت
• 11. انیمیشن مبتنی بر CSS
• 12. انیمیشن های CSS در مقابل انیمیشن های SMIL
• 13. انیمیشن های جاوا اسکریپت در مقابل انیمیشن های SMIL
• 14. مزایای انیمیشن SVG
• 15. کاربرد انیمیشن SVG
• 16. ابزارهای ایجاد انیمیشن SVG
• 17. مبانی SVG
• 18. ساختار کلی فایل SVG
• 19. عناصر SVG پایه (rect, circle, ellipse, line, polyline, polygon, path)
• 20. ویژگی های SVG (fill, stroke, stroke-width, opacity)
• 21. فضای نام SVG
• 22. واحدها در SVG (px, pt, em, %)
• 23. کدنویسی SMIL
• 24. عنصر `animate`
• 25. ویژگی `attributeName`
• 26. ویژگی `from` و `to`
• 27. ویژگی `begin`
• 28. ویژگی `dur`
• 29. ویژگی `repeatCount`
• 30. ویژگی `repeatDur`
• 31. ویژگی `fill`
• 32. ویژگی `calcMode`
• 33. ویژگی `keyTimes` و `keySplines`
• 34. عنصر `animateTransform`
• 35. انواع `type` در `animateTransform` (translate, scale, rotate, skewX, skewY)
• 36. عنصر `animateMotion`
• 37. ویژگی `path`
• 38. ویژگی `rotate`
• 39. ویژگی `keyPoints`
• 40. عنصر `animateColor`
• 41. عنصر `animateMotion` و مسیرهای پیچیده
• 42. گروه بندی عناصر با `g`
• 43. استفاده از `use` برای تکرار عناصر
• 44. انیمیشن های مشروط با `set`
• 45. ایجاد انیمیشن های پیچیده با ترکیب عناصر SMIL
• 46. انیمیشن های مبتنی بر رویداد در SMIL
• 47. `begin` با مقادیر رویداد (click, mouseover, etc.)
• 48. `end` با مقادیر رویداد
• 49. مدیریت زمان در SMIL
• 50. `restart` در SMIL
• 51. `additive` و `accumulate`
• 52. استفاده از `mpath`
• 53. استفاده از `audio`
• 54. نکات پیشرفته SMIL
• 55. اشکال زدایی انیمیشن های SMIL
• 56. سازگاری مرورگرها با SMIL
• 57. محدودیت های SMIL و گذار به راهکارهای مدرن
• 58. معرفی CSS برای انیمیشن SVG
• 59. انتقال (Transitions) در CSS
• 60. ویژگی `transition-property`
• 61. ویژگی `transition-duration`
• 62. ویژگی `transition-timing-function`
• 63. ویژگی `transition-delay`
• 64. انتقال بر روی ویژگی های SVG
• 65. انتقال بر روی موقعیت (transform)
• 66. انتقال بر روی رنگ (fill, stroke)
• 67. انتقال بر روی اندازه (width, height)
• 68. انتقال بر روی opacity
• 69. انیمیشن های CSS (Animations)
• 70. قوانین `@keyframes`
• 71. استفاده از `from` و `to` در `@keyframes`
• 72. استفاده از درصد در `@keyframes`
• 73. ویژگی `animation-name`
• 74. ویژگی `animation-duration`
• 75. ویژگی `animation-timing-function`
• 76. ویژگی `animation-delay`
• 77. ویژگی `animation-iteration-count`
• 78. ویژگی `animation-direction`
• 79. ویژگی `animation-fill-mode`
• 80. انیمیشن بر روی عناصر SVG با CSS
• 81. انیمیشن شکل (morphing) با CSS
• 82. انیمیشن مسیر (path animation) با CSS
• 83. انیمیشن های پیچیده با CSS
• 84. ترکیب انیمیشن های CSS
• 85. انتقال های CSS در مقابل انیمیشن های CSS
• 86. نکات پیشرفته CSS برای انیمیشن SVG
• 87. استفاده از `transform` در CSS برای انیمیشن SVG
• 88. استفاده از `filter` در CSS برای انیمیشن SVG
• 89. استفاده از `clip-path` در CSS برای انیمیشن SVG
• 90. سازگاری مرورگرها با انیمیشن های CSS
• 91. اشکال زدایی انیمیشن های CSS
• 92. معرفی جاوا اسکریپت برای انیمیشن SVG
• 93. مزایای استفاده از جاوا اسکریپت
• 94. انتخاب کتابخانه جاوا اسکریپت مناسب
• 95. GSAP (GreenSock Animation Platform)
• 96. معرفی GSAP
• 97. نصب و راه اندازی GSAP
• 98. دستورات پایه GSAP (to, from, fromTo)
• 99. انیمیشن بر روی ویژگی های SVG با GSAP
• 100. انیمیشن مسیر با GSAP