Flutter中如何实现反转图标的旋转动画？

问题原因 #

你遇到的异常是因为变换顺序和变换原点未正确设置：

• 当RotationTransition包裹Transform(rotationY)时，旋转动画是绕父容器中心旋转整个Transform组件
• 未指定原点的Transform(rotationY)会让图标自身中心偏移，导致旋转时出现圆周轨迹移动
• 点击无响应可能是因为状态切换时未正确判断动画控制器的运行状态

解决方案 #

方案1：调整变换层级（推荐） #

将Transform（镜像）放在外层，RotationTransition放在内层，先完成镜像再做旋转动画，确保旋转是基于镜像后的图标自身中心：

@override
Widget build(final BuildContext context) {
  return Transform(
    transform: Matrix4.rotationY(pi),
    child: RotationTransition(
      turns: rotateAnimation,
      child: const Icon(Icons.sync),
    ),
  );
}

方案2：指定Transform的变换原点 #

如果不想调整层级，给Transform添加alignment: Alignment.center，确保镜像变换以图标自身中心为原点，避免偏移：

@override
Widget build(final BuildContext context) {
  return RotationTransition(
    turns: rotateAnimation,
    child: Transform(
      alignment: Alignment.center, // 关键：设置变换原点为中心
      transform: Matrix4.rotationY(pi),
      child: const Icon(Icons.sync),
    ),
  );
}

修复点击触发动画的问题 #

优化_animate方法，避免重复调用repeat()导致的状态异常：

void _animate() {
  if (widget.isActive) {
    if (!controller.isAnimating) {
      controller.repeat();
    }
  } else {
    controller.reset();
  }
}

备选方案：用单一Transform实现组合动画 #

直接通过Matrix4组合镜像和旋转动画，减少组件嵌套：

@override
Widget build(final BuildContext context) {
  return Transform(
    alignment: Alignment.center,
    // 先镜像，再旋转（rotateZ的参数是弧度，2*pi对应一圈）
    transform: Matrix4.rotationY(pi)..rotateZ(2 * pi * rotateAnimation.value),
    child: const Icon(Icons.sync),
  );
}

内容的提问来源于stack exchange，提问作者Abigotado