Какие знаешь способы внедрения анимации в приложение?

Способы внедрения анимации в Flutter приложение

В Flutter существует несколько подходов к созданию анимаций, каждый из которых подходит для разных сценариев.

1. Implicit Animations (Неявные анимации)

Это самый простой способ - используются встроенные виджеты, которые автоматически анимируют изменения своих параметров:

• AnimatedContainer — анимирует свойства контейнера (размер, цвет, border)
• AnimatedOpacity — плавное изменение прозрачности
• AnimatedPadding — анимация отступов
• AnimatedPositioned — плавное перемещение виджетов в Stack
• AnimatedDefaultTextStyle — изменение стиля текста

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  color: isPressed ? Colors.blue : Colors.red,
  width: isPressed ? 100 : 200,
  height: 100,
)

2. Explicit Animations (Явные анимации)

Дают полный контроль над анимацией через AnimationController:

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeIn),
    );
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _animation,
      child: Container(width: 100, height: 100, color: Colors.blue),
    );
  }
}

3. Переходы между страницами (Page Transitions)

• Стандартные переходы — MaterialPageRoute, CupertinoPageRoute
• Кастомные переходы — PageRouteBuilder для контроля анимации

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => NextPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
        position: animation.drive(
          Tween(begin: Offset(1, 0), end: Offset.zero)
              .chain(CurveTween(curve: Curves.easeInOut)),
        ),
        child: child,
      );
    },
  ),
);

4. Встроенные Transition-виджеты

Флаттер предоставляет готовые виджеты переходов:

• SlideTransition — скольжение
• ScaleTransition — масштабирование
• RotationTransition — вращение
• FadeTransition — затухание
• SizeTransition — изменение размера

5. Сложные анимации (Hero Animation)

Для анимации элементов между экранами:

Hero(
  tag: "image",
  child: Image.asset("image.png"),
)

6. Использование пакетов

• flutter_animate — декларативное описание анимаций
• lottie — воспроизведение Lottie анимаций
• rive — интерактивные векторные анимации

Выбор подхода

Используй Implicit Animations для простых случаев (изменение цвета, размера, прозрачности). Это требует минимального кода и автоматически управляет ресурсами.

Используй Explicit Animations когда нужна точная синхронизация, повторяющиеся или последовательные анимации, или обратная связь с пользователем.

Используй готовые пакеты для сложных эффектов (Lottie, Rive), это экономит время разработки.