Что такое неявные анимации?

Неявные анимации в Flutter

Неявные анимации — это встроенный механизм Flutter для плавного переходу между состояниями без явного управления анимационными контроллерами. Это один из самых удобных способов добавления анимаций в приложение.

Определение и основная концепция

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

Примеры неявных анимаций: TweenAnimationBuilder, AnimatedContainer, AnimatedOpacity, AnimatedPositioned, AnimatedAlign и многие другие.

Как работают неявные анимации

stateChanged()
  ↓
Change widget parameter
  ↓
Flutter detects the change
  ↓
Automatically create animation from old to new value
  ↓
Rebuild with interpolated values during animation

Пример 1: AnimatedContainer

Это самый популярный виджет для неявных анимаций.

class AnimatedContainerExample extends StatefulWidget {
  @override
  State<AnimatedContainerExample> createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isExpanded = !_isExpanded;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOut,
        width: _isExpanded ? 200 : 100,
        height: _isExpanded ? 200 : 100,
        decoration: BoxDecoration(
          color: _isExpanded ? Colors.blue : Colors.red,
          borderRadius: BorderRadius.circular(_isExpanded ? 50 : 10),
        ),
        child: Center(
          child: Text('Нажми'),
        ),
      ),
    );
  }
}

В этом примере при нажатии на контейнер:

• Ширина и высота плавно меняются с анимацией
• Цвет переходит от красного к синему
• Border radius плавно изменяется

Пример 2: AnimatedOpacity

class FadeInOutButton extends StatefulWidget {
  @override
  State<FadeInOutButton> createState() => _FadeInOutButtonState();
}

class _FadeInOutButtonState extends State<FadeInOutButton> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedOpacity(
          opacity: _isVisible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 300),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _isVisible = !_isVisible;
            });
          },
          child: Text('Скрыть/Показать'),
        ),
      ],
    );
  }
}

Пример 3: TweenAnimationBuilder

Для более сложных случаев используется TweenAnimationBuilder, который позволяет анимировать произвольные значения.

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: _targetValue),
  duration: Duration(milliseconds: 500),
  builder: (context, value, child) {
    return Text(
      '${value.toStringAsFixed(1)}',
      style: TextStyle(fontSize: value * 3),
    );
  },
)

Неявные vs явные анимации

Неявные (Implicit):

• Простая в использовании
• Меньше кода
• Подходит для простых переходов
• Flutter управляет всем автоматически

Явные (Explicit):

• Больше контроля
• Требует AnimationController
• Подходит для сложных сценариев
• Нужно вручную управлять lifecycle

Ключевые параметры

duration — длительность анимации в миллисекундах

curve — кривая анимации (Curves.easeInOut, Curves.linear, Curves.bounceIn и т.д.)

onEnd — callback, который вызывается после завершения анимации

Когда использовать неявные анимации

✅ Простые переходы между состояниями ✅ Изменения размера, цвета, opacity ✅ Быстрое прототипирование ✅ Анимации при взаимодействии с UI

❌ Сложные многошаговые анимации ❌ Синхронизированные анимации ❌ Бесконечные повторяющиеся анимации (используй explicit)

Заключение

Неявные анимации — это мощный инструмент в Flutter, который позволяет быстро добавлять полировку в приложение. Они требуют минимум кода и отлично подходят для большинства сценариев. Для более сложных случаев всегда можно перейти на явные анимации с AnimationController.