时间戳

首页 > 解决方案 > 带有重新布局的颤动动画旋转

flutter - 带有重新布局的颤动动画旋转

问题描述

我需要用动画旋转一个小部件并执行重新布局。

RotatedBox 做我想要的，但没有动画。

我使用了 TweenAnimationBuilder 和 Transform.rotate。他们做动画旋转，但保持宽度限制并且不调整孩子的大小。

  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0, end: pi / 2),
      duration: const Duration(milliseconds: 500),
      builder: (BuildContext context, double angle, Widget? child) {
        return Transform.rotate(
          angle: angle,
          child: Stack(
            children: [
              Image.network('https://i.imgur.com/Xl3LjXZ.jpeg'),
              Image.network('https://i.imgur.com/tF3g1JA.jpeg',
                  width: 30, height: 30),
            ],
          ),
        );
      },
    );
  }

我可以使用缩放变换，但我不希望孩子中的所有小部件都被缩放。

如何使用子重新布局进行动画旋转？谢谢。

Dartpad 示例（使结果框架像移动设备一样窄）

标签： flutteranimation

解决方案

我想我已经找到了解决方案。

我使用旋转和缩放来制作动画，动画完成后我将我的小部件更改为 RotatedBox。

飞镖板代码

推荐阅读