Flutter：如何将 TweenAnimation 应用于 Transform 的多个属性？答案

【问题标题】：Flutter: How to apply TweenAnimation to multiple properties of Transform?Flutter：如何将 TweenAnimation 应用于 Transform 的多个属性？
【发布时间】：2020-04-14 12:11:46
【问题描述】：

我正在使用 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 的 tween 参数只接受一个开始和结束值，而不是一个不同开始和结束值的列表，然后我可以将它们分配给变换的不同属性。

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

在 Flutter 中，要添加多个动画，我们可以使用所谓的Staggered Animation。我为 2 个属性创建了 2 个补间 - 平移和缩放，然后动画由 AnimationController 控制。

使用交错动画，单个元素（如容器）上的多个动画可以同时或按顺序进行。

【讨论】：