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

📌 Основные понятия

1. Animation

Это объект, который выдает последовательные значения (обычно от 0.0 до 1.0) в течение определённого времени. Эти значения можно интерпретировать как:

• изменения размера;

• положения;

• прозрачности;

• цвета и т.д.

Пример:

Animation<double> animation;

2. AnimationController

Управляет временем анимации. Контроллер можно запускать, останавливать, воспроизводить назад, задавать продолжительность.

AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
)

Контроллер обязательно требует TickerProvider, обычно через SingleTickerProviderStateMixin.

3. Tween

Определяет, как значения изменяются во времени — от начального до конечного:

Tween(begin: 0.0, end: 100.0).animate(controller)

Можно использовать ColorTween, SizeTween, RectTween, AlignmentTween и другие.

4. CurvedAnimation

Позволяет применить нелинейное ускорение/замедление. Например, easeIn, bounceOut, decelerate.

CurvedAnimation(
parent: controller,
curve: Curves.easeInOut,
)

🛠 Виды анимаций

1. Имплицитные (Implicit animations)

Это вид анимаций, при которых вы просто меняете значение, а Flutter сам анимирует переход.

✅ Удобны, когда не нужно полный контроль.

Примеры:

• AnimatedContainer

• AnimatedOpacity

• AnimatedAlign

• AnimatedCrossFade

• AnimatedPositioned

• AnimatedSwitcher

Пример AnimatedContainer:

AnimatedContainer(
duration: Duration(seconds: 1),
width: isExpanded ? 200 : 100,
height: 100,
color: isExpanded ? Colors.blue : Colors.red,
)

2. Явные (Explicit animations)

Даёт полный контроль над анимацией. Включает AnimationController, Tween, AnimatedBuilder.

Используется, когда:

• необходимо последовательное воспроизведение;

• синхронизация с другими анимациями;

• точная настройка поведения.

Пример с AnimatedBuilder:

AnimationController \_controller;
Animation<double> \_animation;
@override
void initState() {
super.initState();
\_controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
\_animation = Tween(begin: 0.0, end: 300.0).animate(\_controller);
\_controller.forward();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: \_animation,
builder: (context, child) {
return Container(
width: \_animation.value,
height: 100,
color: Colors.blue,
);
},
);
}

🎭 Hero-анимации

Используются при переходе между экранами. Позволяют «переходить» элементу (например, изображению) между страницами с эффектом перемещения.

Hero(
tag: 'my-image',
child: Image.asset('img.jpg'),
)

На втором экране должен быть Hero с тем же tag.

🔁 Анимации с повторением и обратным воспроизведением

AnimationController имеет методы:

• repeat() — зацикливание;

• reverse() — воспроизведение в обратную сторону;

• statusListener — можно отследить, когда закончилась или началась анимация.

_controller.repeat(reverse: true);

🎨 AnimatedBuilder и CustomPainter

Для кастомных анимаций можно использовать AnimatedBuilder или даже CustomPaint, если нужно рисовать вручную.

📦 TweenSequence

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

TweenSequence(\[
TweenSequenceItem(tween: Tween(begin: 0.0, end: 50.0), weight: 1),
TweenSequenceItem(tween: Tween(begin: 50.0, end: 100.0), weight: 2),
\])

🧩 Сложные анимации

Можно использовать:

• AnimationController + Future для цепочек;

• StaggeredAnimation для последовательных анимаций;

• AnimatedList, SliverAnimatedList для анимации в списках;

• PageRouteBuilder и PageTransitionsBuilder для кастомных переходов между страницами.

⚠️ Производительность

• Всегда использовать vsync для AnimationController — это уменьшает нагрузку на GPU.

• Избегать анимаций вне AnimatedBuilder — из-за лишнего setState.

• Анимации с addListener могут вызывать setState, что дорого.

🧱 Пакеты и библиотеки

• flutter_sequence_animation — для построения последовательностей.

• rive — для сложных визуальных анимаций.

• lottie — поддержка JSON-анимаций из After Effects.

• flutter_animate — декларативная запись анимаций.

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