فلش‌کارت‌های آموزشی انیمیشن‌های پیشرفته در فلاتر

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

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

عنوان دوره: انیمیشن‌های پیشرفته در فلاتر

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

موضوع میانی: فلاتر (Flutter)

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

• 1. مقدمه و مبانی انیمیشن در فلاتر
• 2. چرا انیمیشن در رابط کاربری اهمیت دارد؟
• 3. بررسی اکوسیستم انیمیشن فلاتر
• 4. مبانی انیمیشن: مدت زمان، منحنی‌ها و Tween
• 5. تنظیم پروژه فلاتر برای انیمیشن
• 6. آشنایی با TickerProviderStateMixin و SingleTickerProviderStateMixin
• 7. مفهوم setState و بازسازی ویجت در انیمیشن
• 8. مبانی APIهای انیمیشن فلاتر
• 9. کلاس Animation: قلب هر انیمیشن
• 10. AnimationController: کنترل‌کننده اصلی انیمیشن
• 11. متدهای forward, reverse, repeat, stop در AnimationController
• 12. Tween: تعریف محدوده و نوع انیمیشن
• 13. انواع Tween: ColorTween, BorderRadiusTween, RectTween
• 14. Curves: منحنی‌های تسهیل‌کننده (Easing Curves)
• 15. بررسی منحنی‌های داخلی فلاتر (ease, easeInOut, bounce, elastic)
• 16. ایجاد منحنی‌های تسهیل‌کننده سفارشی (Custom Curve)
• 17. AnimationStatus: وضعیت‌های مختلف انیمیشن
• 18. استفاده از addListener برای واکنش به تغییرات انیمیشن
• 19. ترکیب AnimationController, Tween و Curve
• 20. ویجت AnimatedBuilder برای بهینه‌سازی انیمیشن
• 21. کلاس پایه AnimatedWidget
• 22. ساخت انیمیشن محو شدن (Fade) با AnimatedBuilder
• 23. ساخت انیمیشن تغییر مقیاس (Scale) با AnimatedBuilder
• 24. انیمیشن‌های ضمنی (Implicit Animations)
• 25. معرفی انیمیشن‌های ضمنی و سادگی آن‌ها
• 26. AnimatedContainer: انیمیشن‌های چندگانه یکجا
• 27. AnimatedOpacity برای تغییر شفافیت
• 28. AnimatedAlign برای انیمیشن تراز بندی
• 29. AnimatedPositioned و AnimatedPositionedDirectional
• 30. AnimatedPadding برای انیمیشن فاصله داخلی
• 31. AnimatedTheme و DefaultTextStyleTransition
• 32. AnimatedSwitcher: جابه‌جایی ویجت‌ها با انیمیشن
• 33. TweenAnimationBuilder: ساخت انیمیشن‌های ضمنی سفارشی
• 34. استفاده از TweenAnimationBuilder برای ویژگی‌های پیچیده
• 35. انیمیشن‌های انتقال (Transition Widgets)
• 36. معرفی ویجت‌های Transition برای انیمیشن‌های رایج
• 37. FadeTransition برای انیمیشن محو شدن
• 38. ScaleTransition برای انیمیشن تغییر اندازه
• 39. RotationTransition برای انیمیشن چرخش
• 40. SlideTransition برای انیمیشن جابجایی
• 41. SizeTransition برای انیمیشن تغییر اندازه در یک محور
• 42. DecoratedBoxTransition برای انیمیشن دکوراسیون باکس
• 43. AlignTransition برای انیمیشن تراز بندی
• 44. PositionedTransition در Stack
• 45. RelativePositionedTransition در Stack
• 46. انیمیشن‌های Hero
• 47. مفهوم انیمیشن Hero و کاربرد آن
• 48. پیاده‌سازی انیمیشن Hero پایه بین دو صفحه
• 49. سفارشی‌سازی پرواز Hero (Hero flight animations)
• 50. انیمیشن Hero در لیست‌ها و گریدها
• 51. نکات و بهترین روش‌ها در استفاده از Hero
• 52. انیمیشن‌های مرحله‌ای (Staggered Animations) و زنجیره‌ای
• 53. مقدمه‌ای بر انیمیشن‌های مرحله‌ای (Staggered Animations)
• 54. استفاده از Interval برای زمان‌بندی بخش‌های انیمیشن
• 55. ساخت انیمیشن‌های مرحله‌ای پیچیده
• 56. پیاده‌سازی انیمیشن گرید مرحله‌ای
• 57. زنجیره‌ای کردن چند AnimationController
• 58. استفاده از addStatusListener برای انیمیشن‌های ترتیبی
• 59. انیمیشن‌های هماهنگ بین چند ویجت
• 60. ساخت انیمیشن بارگذاری چند عنصری
• 61. انیمیشن ورود و خروج آیتم‌های لیست
• 62. پیاده‌سازی انیمیشن جریان معرفی پیچیده
• 63. نقاشی سفارشی و انیمیشن (Custom Painting & Animations)
• 64. معرفی CustomPainter برای نقاشی‌های دلخواه
• 65. انیمیشن‌سازی ویژگی‌های CustomPainter با AnimatedBuilder
• 66. کشیدن اشکال و مسیرهای پویا
• 67. انیمیشن‌سازی کشیدن مسیر (Path drawing)
• 68. ایجاد نشانگرهای پیشرفت سفارشی و متحرک
• 69. پیاده‌سازی انیمیشن موج با CustomPainter
• 70. انیمیشن‌سازی عناصر گرافیکی: دایره‌ها، خطوط، چندضلعی‌ها
• 71. تبدیلات در CustomPainter: ترجمه، چرخش، مقیاس‌گذاری (Canvas.translate, rotate, scale)
• 72. نقاشی سفارشی پیشرفته: گرادیانت‌ها و سایه‌ها
• 73. ساخت انیمیشن نمودار سفارشی
• 74. انیمیشن‌های مبتنی بر فیزیک (Physics-Based Animations)
• 75. مقدمه‌ای بر کتابخانه Flutter/Physics
• 76. SpringSimulation: ایجاد انیمیشن‌های فنری و ارتجاعی
• 77. FrictionSimulation: شبیه‌سازی کاهش سرعت طبیعی
• 78. GravitySimulation: شبیه‌سازی سقوط اجسام
• 79. اعمال فیزیک به AnimationController.fling
• 80. انیمیشن‌های مبتنی بر ژست (Gesture-Driven Animations)
• 81. یکپارچه‌سازی GestureDetector با انیمیشن‌ها
• 82. ساخت انیمیشن‌های قابل کشیدن (Draggable) و تعاملی
• 83. ویجت Dismissible برای حذف با کشیدن
• 84. انیمیشن‌سازی بر اساس رویدادهای کشیدن کاربر
• 85. ایجاد عناصر تعاملی سفارشی (مانند انیمیشن pull-to-refresh)
• 86. تبدیلات پیشرفته و سه‌بعدی (Advanced Transformations & 3D)
• 87. ویجت Transform: ترجمه، چرخش، مقیاس‌گذاری
• 88. استفاده از Matrix4 برای تبدیل‌های دو بعدی پیچیده
• 89. پرپسپکتیو و چرخش‌های ساده سه بعدی
• 90. انیمیشن Flip Card با استفاده از Transform
• 91. انیمیشن‌سازی ClipRRect, ClipPath, ClipOval
• 92. بهینه‌سازی عملکرد (Performance Optimization)
• 93. تفاوت TickerProviderStateMixin و SingleTickerProviderStateMixin
• 94. نقش RepaintBoundary در بهینه‌سازی انیمیشن
• 95. ملاحظات عملکردی برای انیمیشن‌های پیچیده
• 96. اشکال‌زدایی مسائل مربوط به عملکرد انیمیشن
• 97. بارگذاری تنبل و حذف (dispose) کنترل‌کننده‌های انیمیشن
• 98. کتابخانه‌های انیمیشن خارجی
• 99. یکپارچه‌سازی Lottie برای انیمیشن‌های After Effects
• 100. استفاده از Rive (Flare سابق) برای انیمیشن‌های وکتور

جادوگری کنید: با دوره انیمیشن‌های پیشرفته در فلاتر، به اپلیکیشن‌های خود جان ببخشید!

آیا تا به حال به این فکر کرده‌اید که چه چیزی یک اپلیکیشن خوب را از یک اپلیکیشن عالی و به‌یادماندنی متمایز می‌کند؟ پاسخ در یک کلمه خلاصه می‌شود: تجربه. در دنیای رقابتی امروز، تنها کدنویسی تمیز و عملکرد بی‌نقص کافی نیست. کاربران به دنبال تجربه‌ای لذت‌بخش، روان و چشم‌نواز هستند و انیمیشن‌ها، زبان بصری این تجربه هستند. انیمیشن‌ها می‌توانند مفاهیم پیچیده را ساده کنند، توجه کاربر را جلب کنند و حسی از پویایی و زندگی را به رابط کاربری شما تزریق کنند. اپلیکیشن‌های بی‌روح و استاتیک به سرعت فراموش می‌شوند، اما یک اپلیکیشن با انیمیشن‌های هوشمندانه و زیبا، در ذهن کاربر حک می‌شود.

فلاتر به عنوان یکی از قدرتمندترین فریمورک‌های توسعه اپلیکیشن، ابزارهای فوق‌العاده‌ای برای ساخت انیمیشن در اختیار ما قرار می‌دهد. اما تسلط بر این ابزارها و استفاده از آن‌ها برای خلق تجربیات کاربری نفس‌گیر، یک هنر و مهارت تخصصی است. دوره «انیمیشن‌های پیشرفته در فلاتر» دقیقاً برای همین هدف طراحی شده است: تبدیل شما از یک توسعه‌دهنده فلاتر به یک هنرمند دیجیتال که می‌تواند با کد، جادو کند. در این دوره، ما فراتر از انیمیشن‌های ساده می‌رویم و به شما یاد می‌دهیم چگونه انیمیشن‌های پیچیده، تعاملی و بهینه‌ای بسازید که کاربران شما را شگفت‌زده کند و ارزش اپلیکیشن شما را چندین برابر کند.

درباره دوره

این دوره یک سفر جامع و پروژه-محور به دنیای انیمیشن در فلاتر است. ما از اصول بنیادین شروع می‌کنیم و به تدریج به سمت مفاهیم پیچیده و تکنیک‌های حرفه‌ای حرکت می‌کنیم. در این مسیر، شما نه تنها با تمام ابزارهای انیمیشن‌سازی فلاتر (از Implicit و Explicit Animations گرفته تا CustomPainter و Rive) آشنا می‌شوید، بلکه یاد می‌گیرید که «چرا» و «کجا» از هر تکنیک استفاده کنید تا بهترین نتیجه را بگیرید. این دوره تئوری محض نیست؛ شما با ساخت پروژه‌های واقعی و جذاب، مفاهیم را به صورت عملی درک کرده و به مجموعه مهارت‌های خود اضافه خواهید کرد.

موضوعات کلیدی دوره

• درک عمیق تفاوت انیمیشن‌های Implicit و Explicit
• تسلط کامل بر AnimationController، Tweenها و Curveها
• ساخت انیمیشن‌های پیچیده و سفارشی با CustomPainter و Canvas API
• پیاده‌سازی انیمیشن‌های مبتنی بر فیزیک برای ایجاد حرکات طبیعی
• استفاده از کتابخانه‌های قدرتمند مانند Lottie و Rive برای انیمیشن‌های وکتوری
• تکنیک‌های پیشرفته برای ساخت Transitionهای زیبا بین صفحات و ویجت‌ها
• بهینه‌سازی عملکرد انیمیشن‌ها برای جلوگیری از افت فریم و لگ
• ساخت UIهای پیچیده و داینامیک با انیمیشن‌های ترکیبی (Staggered Animations)

این دوره برای چه کسانی مناسب است؟

• توسعه‌دهندگان فلاتر که می‌خواهند مهارت‌های UI/UX خود را به سطح بالاتری برسانند.
• برنامه‌نویسانی که از ساخت اپلیکیشن‌های ثابت و بی‌روح خسته شده‌اند و به دنبال ایجاد تمایز هستند.
• فریلنسرهایی که می‌خواهند با ارائه اپلیکیشن‌هایی با ظاهر حرفه‌ای‌تر، پروژه‌های بزرگ‌تر و گران‌تری بگیرند.
• طراحان UI/UX که می‌خواهند با نحوه پیاده‌سازی طرح‌های متحرک خود در فلاتر آشنا شوند.
• دانشجویان و علاقه‌مندانی که قصد دارند یک پورتفولیو (نمونه کار) قوی و چشم‌گیر برای ورود به بازار کار بسازند.

چرا باید در این دوره شرکت کنید؟

گذراندن این دوره یک سرمایه‌گذاری مستقیم روی آینده حرفه‌ای شماست. در اینجا چند دلیل کلیدی برای شرکت در این دوره آورده شده است:

• یادگیری پروژه-محور: شما تئوری‌ها را در قالب پروژه‌های جذاب و واقعی یاد می‌گیرید که می‌توانید مستقیماً در نمونه کارهای خود قرار دهید.
• جامع و کامل: با بیش از ۱۰۰ سرفصل دقیق، این دوره تمام جنبه‌های انیمیشن در فلاتر را پوشش می‌دهد و شما را از هر منبع دیگری بی‌نیاز می‌کند.
• افزایش ارزش و درآمد: توانایی ساخت انیمیشن‌های حرفه‌ای یک مهارت کمیاب و پرتقاضا است که شما را از سایر توسعه‌دهندگان متمایز کرده و پتانسیل درآمد شما را به شدت افزایش می‌دهد.
• صرفه‌جویی در زمان: به جای ساعت‌ها جستجو در منابع پراکنده و نامعتبر، تمام دانش مورد نیاز خود را به صورت یکجا، ساختاریافته و با بالاترین کیفیت دریافت کنید.
• درک عمیق مفاهیم: ما فقط به شما یاد نمی‌دهیم «چگونه» کاری را انجام دهید، بلکه «چرا»ی آن را نیز به شما آموزش می‌دهیم تا بتوانید خلاقیت خود را برای حل هر چالشی به کار بگیرید.

سرفصل‌های جامع دوره (بیش از 100 سرفصل کاربردی)

این دوره با پوشش بیش از ۱۰۰ سرفصل، شما را به یک متخصص انیمیشن در فلاتر تبدیل می‌کند. در ادامه نگاهی به بخشی از این سرفصل‌ها می‌اندازیم:

• فصل اول: مبانی و اصول انیمیشن
  1. انیمیشن چیست و چرا در UI/UX اهمیت دارد؟
  2. آشنایی با ۱۲ اصل انیمیشن دیزنی
  3. مفهوم نرخ فریم (Frame Rate) و Vsync
  4. معرفی انواع انیمیشن در فلاتر (Implicit vs. Explicit)
  5. راه‌اندازی پروژه و آشنایی با ابزارهای DevTools برای پروفایل کردن انیمیشن
  6. مفهوم Ticker و SingleTickerProviderStateMixin
  7. مفهوم TickerProviderStateMixin برای کنترل چندین انیمیشن
  8. آشنایی با مفهوم State Management در انیمیشن‌ها
  9. بررسی چرخه حیات یک انیمیشن
  10. اصول طراحی انیمیشن‌های معنادار (Meaningful Animations)
• فصل دوم: انیمیشن‌های ضمنی (Implicit Animations)
  1. کار با AnimatedContainer: ساده‌ترین راه برای انیمیشن
  2. آشنایی با AnimatedOpacity و AnimatedPadding
  3. ساخت انیمیشن‌های موقعیت با AnimatedPositioned
  4. کنترل استایل متن با AnimatedDefaultTextStyle
  5. ایجاد Cross-fade زیبا با AnimatedCrossFade
  6. کار با AnimatedSwitcher برای جابجایی بین ویجت‌ها
  7. انیمیشن‌های لیست با AnimatedList
  8. ساخت انیمیشن‌های فیزیکی با AnimatedPhysicalModel
  9. آشنایی با TweenAnimationBuilder برای انیمیشن‌های ضمنی سفارشی
  10. پروژه عملی: ساخت یک منوی متحرک با انیمیشن‌های ضمنی
• فصل سوم: انیمیشن‌های صریح (Explicit Animations) - قلب تپنده انیمیشن‌ها
  1. معرفی AnimationController: کنترل کامل بر زمان و مقدار
  2. آشنایی با Tween و نحوه تعریف بازه‌های انیمیشن
  3. مفهوم Curves و استفاده از منحنی‌های مختلف برای حرکت طبیعی
  4. کار با انواع Tween (ColorTween, RectTween, etc.)
  5. ساخت انیمیشن‌های تکرارشونده (Looping) و معکوس (Reverse)
  6. کنترل وضعیت انیمیشن با addStatusListener
  7. استفاده از addListener برای بازسازی UI
  8. تفاوت AnimatedBuilder و AnimatedWidget و کاربرد هرکدام
  9. بهینه‌سازی انیمیشن‌های صریح
  10. پروژه عملی: ساخت یک Loading Indicator سفارشی
• فصل چهارم: ویجت‌های انیمیشن آماده و قدرتمند
  1. جادوی Transition بین صفحات با Hero Widget
  2. کار با FadeTransition, ScaleTransition, RotationTransition
  3. آشنایی با SlideTransition و PositionedTransition
  4. ساخت افکت‌های زیبا با DecoratedBoxTransition
  5. انیمیشن‌های نسبی با RelativePositionedTransition
  6. ترکیب Transitionها برای ساخت انیمیشن‌های پیچیده‌تر
  7. آشنایی با AlignTransition و SizeTransition
  8. کنترل استایل متن با DefaultTextStyleTransition
  9. بررسی کامل پارامترهای ویجت Hero
  10. پروژه عملی: ساخت یک گالری عکس با انیمیشن Hero
• فصل پنجم: انیمیشن‌های سفارشی با CustomPainter و Canvas
  1. مقدمه‌ای بر CustomPaint و Canvas API
  2. رسم اشکال پایه: خط، دایره، مستطیل
  3. کار با Path برای رسم اشکال پیچیده
  4. اعمال رنگ و گرادیان روی اشکال
  5. ترکیب AnimationController با CustomPainter
  6. ساخت یک نمودار دایره‌ای (Pie Chart) متحرک
  7. ساخت یک Progress Bar متحرک و سفارشی
  8. کار با متدهای transform و clip در Canvas
  9. بهینه‌سازی نقاشی با isComplex و willChange
  10. پروژه عملی: ساخت یک افکت بارش باران متحرک
• فصل ششم: انیمیشن‌های ترکیبی و پیچیده
  1. مفهوم Staggered Animation (انیمیشن‌های پلکانی)
  2. پیاده‌سازی Staggered Animation با Interval
  3. ساخت انیمیشن‌های زنجیره‌ای با Chaining Tweens
  4. کار با CurvedAnimation برای ترکیب Curveها
  5. پیاده‌سازی انیمیشن‌های وابسته به اسکرول کاربر
  6. آشنایی با Slivers و ساخت انیمیشن‌های پیچیده در لیست‌ها
  7. ساخت Parallax Effect در اسکرول
  8. کنترل چندین AnimationController به صورت همزمان
  9. ساخت انیمیشن‌های تعاملی وابسته به درگ کردن (Gesture)
  10. پروژه عملی: ساخت صفحه ورود یک اپلیکیشن با انیمیشن‌های پلکانی
• فصل هفتم: انیمیشن‌های مبتنی بر فیزیک
  1. مقدمه‌ای بر فیزیک در انیمیشن
  2. آشنایی با Physics-Based Simulations
  3. کار با SpringSimulation برای ایجاد افکت فنری
  4. پیاده‌سازی افکت پرتاب کردن با GravitySimulation
  5. ساخت افکت کارت‌های کشیدنی (Draggable Cards) با فیزیک
  6. ترکیب انیمیشن‌های مبتنی بر فیزیک با AnimationController
  7. آشنایی با FrictionSimulation
  8. تنظیم پارامترهای فنر: Damping, Stiffness, Mass
  9. مقایسه انیمیشن‌های مبتنی بر زمان و مبتنی بر فیزیک
  10. پروژه عملی: ساخت یک منوی فنری
• فصل هشتم: ادغام با ابزارهای خارجی (Lottie و Rive)
  1. معرفی Lottie و مزایای آن
  2. نحوه اضافه کردن فایل‌های Lottie به پروژه فلاتر
  3. کنترل پخش انیمیشن‌های Lottie (Play, Stop, Loop)
  4. دریافت انیمیشن‌های Lottie از شبکه
  5. مقدمه‌ای بر Rive (Flare سابق)
  6. ساخت State Machineهای پیچیده در Rive
  7. کنترل انیمیشن‌های Rive از طریق کد فلاتر
  8. ارسال ورودی به State Machine در Rive
  9. مقایسه Lottie و Rive و انتخاب ابزار مناسب
  10. پروژه عملی: ساخت یک انیمیشن Onboarding تعاملی با Rive
• فصل نهم: بهینه‌سازی عملکرد انیمیشن
  1. شناسایی مشکلات عملکرد با Flutter DevTools
  2. استفاده از Performance Overlay برای دیدن افت فریم
  3. مفهوم RepaintBoundary و کاربرد آن در جداسازی لایه‌ها
  4. تکنیک‌های کاهش هزینه باز (Repaint)
  5. چه زمانی از AnimatedBuilder به جای setState استفاده کنیم؟
  6. بهینه‌سازی انیمیشن‌های لیست با builder constructor
  7. تاثیر Opacity و Clipping بر عملکرد
  8. استفاده از Isolates برای محاسبات سنگین در حین انیمیشن
  9. تست عملکرد انیمیشن روی دستگاه‌های واقعی
  10. نکات نهایی برای داشتن انیمیشن‌های 60fps
• فصل دهم: پروژه‌های پیشرفته و جمع‌بندی
  1. پروژه اول: ساخت یک Music Player با انیمیشن‌های پیچیده
  2. پروژه دوم: پیاده‌سازی یک اپلیکیشن خرید با Shared Element Transitions
  3. پروژه سوم: ساخت یک داشبورد متحرک با نمودارهای سفارشی
  4. آشنایی با پکیج‌های انیمیشن محبوب (مانند flutter_animate)
  5. معرفی Shaders و Flutter Impeller (موتور رندر جدید)
  6. چگونه برای انیمیشن‌ها ایده پیدا کنیم؟
  7. بررسی نمونه‌های الهام‌بخش از اپلیکیشن‌های معروف
  8. نکات مهم برای ارائه انیمیشن به مشتری یا تیم
  9. ساخت یک پکیج انیمیشن سفارشی و قابل استفاده مجدد
  10. جمع‌بندی نهایی و نقشه راه برای ادامه مسیر