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

Question

我正在使用 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 的补间参数仅采用单个开始值和结束值，而不是不同开始值和结束值的列表，然后我可以将其分配给变换的不同属性。

Answer 1

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

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

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

Flutter: How to apply TweenAnimation to multiple properties of Transform?

flutter

flutter-animation