Что такое Tween в анимациях Flutter?

«Что такое Tween в анимациях Flutter?» — вопрос из категории Анимации, который задают на 29% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Tween (от in-between) — это объект, который интерполирует (вычисляет промежуточные значения) между начальным (begin) и конечным (end) значением за время анимации. Это ядро для создания плавных переходов не только чисел, но и цветов, размеров, положений и даже пользовательских типов.

Основная концепция: Tween сам по себе не анимирует. Он определяет диапазон значений. Анимация создается при связывании Tween с AnimationController через метод .animate().

Пример анимации изменения размера и цвета контейнера:

class AnimatedBox extends StatefulWidget {
  @override
  _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _sizeAnimation;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true); // Бесконечная анимация туда-обратно

    // Tween для размера от 50 до 200 пикселей
    _sizeAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(_controller);
    // Tween для цвета от синего до красного
    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          width: _sizeAnimation.value,
          height: _sizeAnimation.value,
          color: _colorAnimation.value,
        );
      },
    );
  }

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

Встроенные и специализированные Tween-классы:

  • ColorTween: Интерполяция цветов.
  • SizeTween: Интерполяция размеров (Size).
  • RectTween: Интерполяция прямоугольников (Rect).
  • BorderRadiusTween: Интерполяция скругления углов.
  • AlignmentTween, EdgeInsetsTween и многие другие.

Для сложных последовательностей используйте TweenSequence:

final animation = TweenSequence<double>([
  TweenSequenceItem(tween: Tween(begin: 0.0, end: 100.0), weight: 50.0),
  TweenSequenceItem(tween: Tween(begin: 100.0, end: 50.0), weight: 50.0),
]).animate(_controller);