Flutter и TweenAnimationBuilder

Flutter и TweenAnimationBuilder

Что, если я хочу создать свою собственную анимацию…? Хмм…

Все в одном ресурсе Flutter: https://flatteredwithflutter.com/tweenanimationbuilder-in-flutter/

Начать…

В этой статье основное внимание уделяется следующим виджетам

• TweenAnimationBuilder
• ColorFiltered
• Кнопка-переключатель

TweenAnimationBuilder…

Проще говоря, теперь вы можете создавать свои собственные пользовательские неявные анимации с помощью TweenAnimationBuilder…

Примечание. Чтобы использовать TweenAnimationBuilder, у вас должен быть последний стабильный канал Flutter (1.12.13 + исправление-5).

Что такое TweenAnimationBuilder…?

Конструктор виджетов, который анимирует свойство виджета к целевому значению ...

TweenAnimationBuilder(
  duration: // YOUR DURATION,
  tween: // YOUR TWEEN,
  builder: (_, angle, __) {
   return child;
  },
)

• tween: тип анимации (например, ColorTween, RectTween, Tween ‹double› и т. д.)
• продолжительность: продолжительность, в течение которой должна выполняться анимация.
• строитель: что нужно построить во время анимации

На примере…

TweenAnimationBuilder(
    duration: const Duration(seconds: 5),
    tween: Tween<double>(begin: 0, end: 2 * math.pi),
    builder: (_, double angle, __) {
     return Transform.rotate(
      angle: angle,
      child: earth,
     );
    },
),

Здесь у нас есть следующие свойства:

• продолжительность: 5 секунд
• tween: анимация типа double, при первом построении виджета происходит переход от Tween.begin к Tween.end.
• builder: виджет для создания ... (в нашем случае Transform, который принимает значение из Tween ‹double›)

Когда использовать TweenAnimationBuilder…

Как рекомендует команда Flutter, мы должны использовать TweenAnimationBuilder для вышеуказанных случаев использования ...

Оптимизация производительности…

Согласно официальной документации…

1. Если ваша функция построитель содержит поддерево, не зависящее от анимации, эффективно построить это поддерево один раз.
2. передать предварительно созданное поддерево как дочерний параметр

Пример использования,

final Image sun = Image.asset('assets/images/sun.jpeg');
static final colorTween = ColorTween(begin: Colors.blue, end: Colors.orange);
///////
TweenAnimationBuilder(
  child: sun,
  duration: const Duration(seconds: 5),
  tween: colorTween,
  builder: (_, Color color, Widget child) {
    return ColorFiltered(
        colorFilter: ColorFilter.mode(color, BlendMode.modulate),
    child: child,
    );
  },
)
///////

Здесь у нас есть следующие свойства:

• продолжительность: 5 секунд
• tween: анимация цвета, на этот раз статическая анимация движения, определенная вне TweenAnimationBuilder.
• builder: виджет для сборки ... (в данном случае только виджет с фильтром с цветовой фильтрацией)

ColorFiltered Widget…

Применяет ColorFilter к своему дочернему элементу,

Пример использования:

ColorFiltered(
 colorFilter: ColorFilter.mode(Colors.orange, BlendMode.modulate),
 child: // YOUR CHILD,
)

Здесь у нас есть следующие свойства:

• colorFilter: какой цвет вы хотите отображать вместе с BlendMode
• child: к какому дочернему элементу вы хотите применить этот фильтр…

Кнопка переключения…

Горизонтальный набор кнопок-переключателей.

Список детей выложен в ряд. Состояние каждой кнопки контролируется isSelected.

Длина isSelected должна соответствовать длине списка потомков.

final isSelected = <bool>[false, false, false];
////
ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

Здесь у нас есть следующие свойства:

• дети: нет. виджетов в кнопке переключения
• isSelected: список логических значений (должен быть равен дочерним виджетам)
• onPressed: изменение состояния выбора элементов внутри переключателя.

Статьи, связанные с Flutter: