Флаттер: как применить TweenAnimation к нескольким свойствам Transform? - PullRequest
Новая
       11

Флаттер: как применить TweenAnimation к нескольким свойствам Transform?

0 голосов
/ 14 апреля 2020

Я использую Transform для перемещения и масштабирования контейнера. 

Transform(
    transform: Matrix4.identity()
                ..translate(20, 20, 0.0)
                ..scale(0.9, 1.0, 1.0),
    child: _buildContainer(customColor),
)

Я могу использовать конструктор TweenAnimationBuilder, чтобы добавить анимацию для преобразования или масштабирования следующим образом: 

TweenAnimationBuilder(
    tween: Tween<Double>(begin: 0, end: 20),
    duration: Duration(seconds: 2),
    builder: (_, double translateVal, __) {
        return Transform(
            translate: Matrix4.identity()
                ..translate(translateVal, translateVal, 0.0)
                ..scale(0.9, 1.0, 1.0),
            child: _buildContainer(customColor),
        );
    }
)

Выше код работает, и я могу аналогичным образом добавить его в масштабе, но только удалив анимацию из перевода. Как добавить анимацию для перевода и масштабирования вместе? Поскольку аргумент анимации движения в TweenAnimationBuilder принимает только одно начальное и конечное значение, а не список различных начальных и конечных значений, которые я затем могу назначить различным свойствам преобразования.

1 Ответ

0 голосов
/ 15 апреля 2020

В Flutter, чтобы добавить несколько анимаций, мы можем использовать так называемую Staggered Animation . Я создал 2 анимации для 2 свойств - перевести и масштабировать, и анимация затем контролируется AnimationController.

Используя ступенчатую анимацию, возможна одновременная или последовательная анимация на одном элементе, например, контейнере.

...