انیمیشن‌ها نقش مهمی در رابط کاربری برنامه‌ها ایفا می‌کنند و می‌توانند تجربه کاربری را جذاب‌تر، تعاملی‌تر و بصری‌تر کنند. فلاتر، فریم‌ورک محبوب توسعه اندروید و iOS با استفاده از زبان برنامه نویسی دارت، ابزارهای قدرتمندی برای ایجاد انیمیشن‌های روان و جذاب ارائه می‌دهد.

در اینجا به طور خلاصه به موضوعات کلیدی انیمیشن در فلاتر می‌پردازیم:

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

در فلاتر، دو دسته اصلی انیمیشن وجود دارد:

۱. انیمیشن‌های ضمنی (Implicit Animations):

• این انیمیشن‌ها به طور خودکار توسط فلاتر برای انجام وظایف خاص مانند تغییر اندازه ویجت‌ها یا جابجایی بین صفحات استفاده می‌شوند.

• نیازی به کد نویسی توسط توسعه‌دهنده ندارند و به طور خودکار با توجه به وضعیت برنامه اجرا می‌شوند.

• نمونه‌هایی از انیمیشن‌های ضمنی عبارتند از:

  • تغییر اندازه یک Container زمانی که محتوای آن تغییر می‌کند.
  • محو شدن یک ویجت هنگام ناوبری بین صفحات.
  • نمایش یک منوی کشویی با انیمیشن.

۲. انیمیشن‌های صریح (Explicit Animations):

• این انیمیشن‌ها توسط توسعه‌دهنده با استفاده از کد Dart ایجاد می‌شوند.
• کنترل دقیق‌تری بر زمان‌بندی، حرکت، و سایر جنبه‌های انیمیشن به شما می‌دهند.
• برای ایجاد انیمیشن‌های پیچیده و سفارشی که با نیازهای خاص شما مطابقت دارند، ایده‌آل هستند.
• از کتابخانه Animation API یا کتابخانه‌های شخص ثالث مانند Rive یا Flare برای ایجاد انیمیشن‌های Explicit استفاده می‌شود.

انواع مختلف انیمیشن‌های Explicit که می‌توانید با کد ایجاد کنید:

• انیمیشن‌های حرکتی: موقعیت، اندازه یا شکل یک ویجت را در طول زمان تغییر دهید.
• انیمیشن‌های شفافیت: شفافیت یک ویجت را در طول زمان تغییر دهید.
• انیمیشن‌های رنگی: رنگ یک ویجت را در طول زمان تغییر دهید.
• انیمیشن‌های تبدیل: چندین انیمیشن را با هم ترکیب کنید تا افکت‌های پیچیده‌تری ایجاد کنید.

انتخاب نوع مناسب انیمیشن:

• از انیمیشن‌های ضمنی برای انیمیشن‌های ساده و رایج استفاده کنید که نیازی به کنترل دقیق ندارند.
• از انیمیشن‌های Explicit برای انیمیشن‌های پیچیده و سفارشی که به رفتار خاصی نیاز دارند استفاده کنید.

۲. کتابخانه‌های انیمیشن در فلاتر:

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

۱. کتابخانه‌های داخلی فلاتر:

• Animation API: کتابخانه پایه فلاتر برای ایجاد انیمیشن‌های Explicit. به شما امکان می‌دهد انیمیشن‌های مختلفی مانند انیمیشن‌های حرکتی، شفافیت، رنگ و تبدیل را با استفاده از کد Dart ایجاد کنید.
• AnimatedWidget: ویجت پایه برای ایجاد انیمیشن‌های Explicit. این ویجت به شما امکان می‌دهد هر ویجتی را در برنامه خود انیمیشن‌سازی کنید.
• AnimatedContainer: ویجتی برای انیمیشن‌سازی خواص مختلف یک Container، مانند اندازه، موقعیت، رنگ و غیره.
• AnimatedOpacity: ویجتی برای انیمیشن‌سازی شفافیت یک ویجت.
• AnimatedCrossFade: ویجتی برای محو شدن بین دو ویجت.

مزایا:

• به طور پیش فرض در فلاتر موجود هستند و نیازی به نصب کتابخانه اضافی ندارند.
• با سایر اجزای فلاتر به خوبی ادغام می‌شوند.
• عملکرد کارآمدی دارند.

معایب:

• برای انیمیشن‌های پیچیده و تعاملی ممکن است انعطاف‌پذیری کافی نداشته باشند.
• یادگیری API آنها ممکن است کمی دشوار باشد.

۲. کتابخانه‌های شخص ثالث:

• Rive: کتابخانه‌ای قدرتمند برای ایجاد انیمیشن‌های برداری تعاملی با استفاده از فایل‌های Lottie. به شما امکان می‌دهد انیمیشن‌های پیچیده و با جزئیات بالا را به راحتی ایجاد کنید و آنها را در برنامه‌های خود ادغام کنید.
• Flare: کتابخانه دیگری برای ایجاد انیمیشن‌های برداری با کارایی بالا. شبیه به Rive است، اما دارای ویژگی‌ها و قابلیت‌های منحصر به فرد خود است.
• Lottie: کتابخانه‌ای برای بارگیری و نمایش انیمیشن‌های Lottie در برنامه‌های زبان فلاتر.
• Spring: کتابخانه‌ای برای ایجاد انیمیشن‌های فیزیکی واقعی، مانند انیمیشن‌های فنری یا انیمیشن‌های حرکتی با اصطکاک.

مزایا:

• امکان ایجاد انیمیشن‌های پیچیده و تعاملی را فراهم می‌کنند.
• غالباً دارای ویژگی‌ها و قابلیت‌های پیشرفته‌ای هستند که در کتابخانه‌های داخلی فلاتر یافت نمی‌شوند.
• استفاده از آنها نسبتاً آسان است.

معایب:

• ممکن است به نصب کتابخانه‌های اضافی و پیکربندی آنها نیاز داشته باشند.
• ممکن است عملکرد آنها به اندازه کتابخانه‌های داخلی فلاتر کارآمد نباشد.

انتخاب کتابخانه مناسب:

• اگر به دنبال ایجاد انیمیشن‌های ساده و رایج هستید، از کتابخانه‌های داخلی فلاتر استفاده کنید.
• اگر به دنبال ایجاد انیمیشن‌های پیچیده و تعاملی هستید، از کتابخانه‌های شخص ثالث مانند Rive یا Flare استفاده کنید.
• اگر می‌خواهید از انیمیشن‌های Lottie موجود استفاده کنید، از کتابخانه Lottie استفاده کنید.
• اگر می‌خواهید انیمیشن‌های فیزیکی واقعی ایجاد کنید، از کتابخانه Spring استفاده کنید.

همچنین بخوانید » آموزش نصب فلاتر | تفاوت فلاتر و ری اکت | معرفی کتابهای فلاتر | نقشه راه فلاتر | انیمیشن ها در فلاتر

۳. ویجت‌های انیمیشنی در فلاتر: دنیایی از حرکت و پویایی با رابط کاربری

ویجت‌های انیمیشنی در فلاتر ابزاری قدرتمند برای ایجاد رابط‌های کاربری جذاب و پویا هستند. این ویجت‌ها در فلاتر به شما امکان می‌دهند بدون نیاز به نوشتن کد پیچیده، انیمیشن‌های مختلفی را به برنامه خود اضافه کنید.

برخی از ویجت‌های انیمیشنی پیش‌فرض موجود در فلاتر عبارتند از:

• AnimatedWidget: ویجت پایه برای ایجاد انیمیشن‌های سفارشی. این ویجت به شما امکان می‌دهد هر ویجتی را در برنامه خود انیمیشن‌سازی کنید.
• AnimatedContainer: ویجتی برای انیمیشن‌سازی خواص مختلف یک Container، مانند اندازه، موقعیت، رنگ و غیره.
• AnimatedOpacity: ویجتی برای انیمیشن‌سازی شفافیت یک ویجت.
• AnimatedCrossFade: ویجتی برای محو شدن بین دو ویجت.
• AnimatedDecoratedWidget: ویجتی برای انیمیشن‌سازی Decoration یک ویجت.
• SliverAnimatedWidget: ویجتی برای انیمیشن‌سازی ویجت‌های موجود در Sliver list.

نحوه استفاده از ویجت‌های انیمیشنی در فلاتر:

1. ویجت مورد نظر خود را از کتابخانه فلاتر وارد کنید.
2. از constructor مناسب برای ویجت استفاده کنید و آرگومان‌های لازم را برای تعریف انیمیشن خود ارائه دهید.
3. از متدهای setter ویجت برای تغییر مقادیر انیمیشن در طول زمان استفاده کنید.

مثال:

import 'package:flutter/material.dart';

class MyWidget extends AnimatedWidget {
  const MyWidget({
    Key? key,
    required Animation<double> animation,
  }) : super(key: key, animation: animation);

  @override
  Widget build(BuildContext context) {
    final animationValue = animation.value;
    return Transform.scale(
      scale: animationValue,
      child: Container(
        color: Colors.blue,
        width: ۱۰۰,
        height: ۱۰۰,
      ),
    );
  }
}

در این مثال، یک ویجت Container را با استفاده از AnimatedWidget و Transform.scale انیمیشن‌سازی می‌کنیم. انیمیشن مقیاس ویجت را در طول زمان تغییر می‌دهد.

مزایای استفاده از ویجت‌های انیمیشنی  در فلاتر:

• استفاده از آنها آسان است و نیازی به نوشتن کد پیچیده ندارند.
• به شما امکان می‌دهند انیمیشن‌های مختلفی را به برنامه خود اضافه کنید.
• رابط کاربری برنامه شما را جذاب‌تر و تعاملی‌تر می‌کنند.

۴. زمان‌بندی انیمیشن در فلاتر: کنترل دقیق حرکت و گذر زمان

در فلاتر، ابزارها و تکنیک‌های مختلفی برای کنترل دقیق زمان‌بندی و نحوه اجرای انیمیشن‌ها در دسترس شماست. این امر به شما امکان می‌دهد انیمیشن‌های روان، طبیعی و جذاب خلق کنید که با نیازها و سلیقه شما مطابقت داشته باشند.

مفاهیم کلیدی زمان‌بندی انیمیشن در فلاتر:

• Duration: مدت زمان طول کشیدن انیمیشن.
• Curve: منحنی که سرعت حرکت انیمیشن را در طول زمان کنترل می‌کند.
• Begin: مقدار اولیه انیمیشن در شروع.
• End: مقدار نهایی انیمیشن در پایان.
• Repeat: تعداد دفعات تکرار انیمیشن.
• Reverse: جهت انیمیشن را معکوس می‌کند.

ابزارهای زمان‌بندی انیمیشن در فلاتر:

• AnimationController: ابزاری برای مدیریت و کنترل انیمیشن‌ها. به شما امکان می‌دهد انیمیشن را شروع، متوقف، معکوس و تکرار کنید.
• Curves: کتابخانه‌ای از منحنی‌های پیش‌فرض برای کنترل سرعت انیمیشن.
• Custom Curves: امکان ایجاد منحنی‌های سفارشی برای انیمیشن‌های منحصر به فرد.
• Tween: ابزاری برای تعریف مقادیر شروع و پایان انیمیشن و نحوه تغییر آنها در طول زمان.

تکنیک‌های زمان‌بندی انیمیشن در فلاتر:

• استفاده از Curves: از منحنی‌های مختلف برای ایجاد انیمیشن‌های با سرعت‌های گوناگون، مانند شتاب‌گیری یا کند شدن تدریجی، استفاده کنید.
• ایجاد Curves سفارشی: برای انیمیشن‌های خاص که نیاز به رفتار منحصر به فردی دارند، Curves سفارشی بسازید.
• ترکیب انیمیشن‌ها: از AnimationController برای زنجیره‌سازی و ترکیب انیمیشن‌های مختلف با یکدیگر استفاده کنید.
• انیمیشن‌های تعاملی: از ژست‌ها و ورودی کاربر برای کنترل زمان‌بندی انیمیشن‌ها به صورت پویا استفاده کنید.

۵. زنجیره‌سازی انیمیشن‌ها در فلاتر: خلق انیمیشن‌های پیچیده و هماهنگ

زنجیره‌سازی انیمیشن‌ها در فلاتر به شما امکان می‌دهد انیمیشن‌های مختلف را به صورت متوالی یا همزمان اجرا کنید و به این ترتیب انیمیشن‌های پیچیده و هماهنگ با سناریوهای مختلف ایجاد کنید.

دو روش اصلی برای زنجیره‌سازی انیمیشن‌ها در فلاتر وجود دارد:

۱. زنجیره‌سازی متوالی:

• در این روش، انیمیشن‌ها به صورت one after the other اجرا می‌شوند.
• به عنوان مثال، می‌توانید یک انیمیشن محو شدن را به دنبال یک انیمیشن حرکت اجرا کنید.

برای زنجیره‌سازی متوالی انیمیشن‌ها می‌توانید از:

• متد then() در AnimationController: این متد به شما امکان می‌دهد یک انیمیشن جدید را بعد از اتمام انیمیشن فعلی اجرا کنید.
• متد animateTo() در AnimationController: این متد به شما امکان می‌دهد انیمیشن را به طور مستقیم به مقدار نهایی خود هدایت کنید و سپس انیمیشن بعدی را اجرا کنید.

مثال:

final animationController1 = AnimationController(
  vsync: TickerProviderStateMixin.create(this),
  duration: const Duration(seconds: ۱),
);

final animationController2 = AnimationController(
  vsync: TickerProviderStateMixin.create(this),
  duration: const Duration(seconds: ۱),
);

animationController1.forward().then((_) => animationController2.forward());

در این مثال، ابتدا animationController1 به مدت ۱ ثانیه به جلو حرکت می‌کند و سپس animationController2 به مدت ۱ ثانیه دیگر به جلو حرکت می‌کند.

۲. زنجیره‌سازی همزمان:

• در این روش، انیمیشن‌ها به طور همزمان اجرا می‌شوند.
• به عنوان مثال، می‌توانید یک انیمیشن حرکت را به طور همزمان با یک انیمیشن تغییر رنگ اجرا کنید.

برای زنجیره‌سازی همزمان انیمیشن‌ها می‌توانید از:

• متد addStatusListener() در AnimationController: از این متد برای گوش دادن به وضعیت انیمیشن‌ها و اجرای انیمیشن‌های بعدی در زمان مناسب استفاده کنید.
• کتابخانه StaggeredAnimations: این کتابخانه ابزاری قدرتمند برای مدیریت و اجرای انیمیشن‌های همزمان به شما ارائه می‌دهد.

مثال:

final animationController1 = AnimationController(
  vsync: TickerProviderStateMixin.create(this),
  duration: const Duration(seconds: ۱),
);

final animationController2 = AnimationController(
  vsync: TickerProviderStateMixin.create(this),
  duration: const Duration(seconds: ۱),
);

animationController1.forward();
animationController2.forward();

animationController1.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    animationController2.forward();
  }
});

در این مثال، animationController1 و animationController2 به طور همزمان به جلو حرکت می‌کنند.

۶. ژست‌ها و انیمیشن‌ها در فلاتر: خلق رابط کاربری تعاملی و جذاب

در فلاتر، می‌توانید از ژست‌ها و ورودی کاربر برای کنترل انیمیشن‌ها به صورت پویا استفاده کنید و به این ترتیب رابط کاربری تعاملی و جذابی برای کاربران خود ایجاد کنید.

برخی از کاربردهای رایج ژست‌ها و انیمیشن‌ها در فلاتر:

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

ابزارها و تکنیک‌های مرتبط با ژست‌ها و انیمیشن‌ها:

• Gesture Detectors: ویجت‌هایی که به شما امکان می‌دهند ژست‌های کاربر را شناسایی کنید.
• AnimationController: ابزاری برای مدیریت و کنترل انیمیشن‌ها.
• Curves: کتابخانه‌ای از منحنی‌های پیش‌فرض برای کنترل سرعت انیمیشن.
• Custom Curves: امکان ایجاد منحنی‌های سفارشی برای انیمیشن‌های منحصر به فرد.
• Tween: ابزاری برای تعریف مقادیر شروع و پایان انیمیشن و نحوه تغییر آنها در طول زمان.

مثال:

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  AnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: TickerProviderStateMixin.create(this),
      duration: const Duration(seconds: ۱),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _controller?.forward();
      },
      child: AnimatedContainer(
        duration: _controller?.duration,
        curve: Curves.easeInOut,
        transform: Matrix4.identity()..scale(_controller?.value),
        child: const Text('Tap me to animate!'),
      ),
    );
  }
}

در این مثال، یک ویجت Container با استفاده از GestureDetector و AnimatedContainer انیمیشن‌سازی می‌شود. ضربه زدن به ویجت، انیمیشن مقیاس‌گیری را آغاز می‌کند.

۷. نکات و بهترین شیوه‌ها:

• از AnimatedWidgets برای انیمیشن‌های ساده و کارآمد استفاده کنید.
• از Rive یا Flare برای انیمیشن‌های پیچیده و تعاملی استفاده کنید.
• عملکرد انیمیشن را با استفاده از ابزارهای پروفایل‌سازی بررسی کنید.
• از انیمیشن‌ها برای افزایش وضوح، جذابیت و تعامل رابط کاربری خود استفاده کنید.