Flutter AnimatedSwitcher：让切换退出动画正向执行而非反向

AnimatedSwitcher默认会给退出的子组件使用反向动画（动画值从1到0），进入的子组件则用正向动画（0到1），这就是导致你看到RotationTransition方向相反的原因。要让旋转方向统一且不影响淡入淡出，只需判断子组件的进入/退出状态，单独调整RotationTransition的动画逻辑：

AnimatedSwitcher(
  transitionBuilder: (child, anim) {
    // 判断当前子组件是否处于退出状态
    final isExit = child is AnimatedSwitcherLayoutEntry && child.isExit;

    return RotationTransition(
      // 退出时反转动画，保持正向旋转
      turns: isExit ? ReverseAnimation(anim) : anim,
      child: FadeTransition(
        // 淡入淡出保留原有动画逻辑
        opacity: anim,
        child: child,
      ),
    );
  },
  duration: const Duration(milliseconds: 500), // 根据需求调整动画时长
)

关键说明： #

• AnimatedSwitcherLayoutEntry是AnimatedSwitcher内部包装子组件的类，通过它的isExit属性可以精准判断当前子组件是进入还是退出状态。
• ReverseAnimation(anim)会将退出时的反向动画（1→0）反转成正向（0→1），让RotationTransition在进入、退出时都执行相同方向的旋转。
• FadeTransition继续使用原anim，确保进入时淡入、退出时淡出的逻辑不受影响。

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