Flutter中使用GetX实现3D动画时镜像翻转问题的解决方法

问题描述 #

使用GetX构建3D旋转动画时，动画结束后组件沿Y旋转轴出现镜像翻转效果：绕Y轴旋转180度后，背面的文字显示为反向状态（参考附带GIF）。当前逻辑通过动画值0.5作为分界，切换正反两面内容，同时用pi * animation.value驱动Y轴旋转。

解决方案 #

问题根源是绕Y轴旋转180度时，3D空间内的背面内容会自然呈现镜像状态。以下两种方案可快速解决：

方案1：预翻转背面内容抵消镜像

在显示背面内容时，对文字添加水平翻转效果，抵消旋转带来的镜像：

// 背面Text的修改部分
Transform(
  transform: Matrix4.identity()..scale(-1, 1),
  child: Text(
    "F",
    style: TextStyle(fontSize: 50, color: Colors.white),
  ),
)

方案2：限制旋转角度避免过度旋转

将旋转角度限制在90度（π/2），当动画值超过0.5时保持旋转角度不变，既完成翻转视觉效果，又避免镜像：

// Transform的rotateY修改部分
..rotateY(pi * min(_animasyonController.animation.value, 0.5) * 2)

推荐修改后的完整Widget代码 #

采用方案1的完整代码，保持完整180度旋转逻辑的同时修正镜像问题：

return Scaffold(
  body: Center(
    child: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const SizedBox(height: 20),
          GetBuilder(
            init: SevkiyatBilgiAnimasyonController(),
            builder: (controller) {
              final animValue = _animasyonController.animation.value;
              return Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                  ..setEntry(3, 2, 0.0005)
                  ..rotateY(pi * animValue),
                child: Card(
                  child: animValue <= 0.5
                      ? Container(
                          color: Colors.red,
                          width: 240,
                          height: 240,
                          child: Center(
                            child: Text(
                              "R",
                              style: TextStyle(fontSize: 50, color: Colors.white),
                            ),
                          ),
                        )
                      : Container(
                          color: Colors.grey,
                          width: 240,
                          height: 240,
                          child: Center(
                            // 添加水平翻转抵消镜像
                            child: Transform(
                              transform: Matrix4.identity()..scale(-1, 1),
                              child: Text(
                                "F",
                                style: TextStyle(fontSize: 50, color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                ),
              );
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_animasyonController.animationStatus == AnimationStatus.dismissed) {
                _animasyonController.animationController.forward();
              } else {
                _animasyonController.animationController.reverse();
              }
            },
            child: Text("Animation test"),
          ),
        ],
      ),
    ),
  ),
);

内容的提问来源于stack exchange，提问作者Doğukan Çiftçi