Flutter Flame中Tiled图层透明度修改无效问题求助

问题根源 #

你遇到的核心问题有两个：

• 修改图层opacity后没有触发重绘，Flame不会自动检测属性变更并重新渲染
• elapsedTime未在动画结束后重置，导致后续触发fade时直接跳过动画过程

修复方案 #

1. 修改opacity后触发重绘 #

每次修改图层opacity后，调用markNeedsPaint()方法通知Flame该图层需要重新渲染：

backgroundOff.opacity = opacity;
backgroundOff.markNeedsPaint(); // 新增这行触发重绘

2. 重置计时变量 #

在触发新的fade操作时重置elapsedTime，保证每次动画都从初始状态开始：

void collidedWithPlayer() {
  initiateFade = visible = !visible;
  elapsedTime = 0.0; // 重置计时
}

同时在动画结束时也重置计时，避免后续逻辑异常：

if (isAnimationDone) {
  initiateFade = false;
  elapsedTime = 0.0;
}

3. 完善淡入淡出逻辑（可选） #

当前代码仅处理了淡出效果，若需要切换时同时支持淡入，可调整opacity计算逻辑：

double opacity;
if (visible) {
  // 淡入：透明度从0升至1
  opacity = (elapsedTime / fadeTime).clamp(0.0, 1.0);
} else {
  // 淡出：透明度从1降至0
  opacity = 1.0 - (elapsedTime / fadeTime).clamp(0.0, 1.0);
}

完整修改后的代码 #

class HiddenSwitch extends PositionComponent
    with HasGameRef<TheGame>, CollisionCallbacks {
  HiddenSwitch({
    super.position,
    super.size,
  });

  bool visible = false;
  bool offLayerVisible = false;
  bool onLayerVisible = false;

  double lifeTime = 0.8;
  double fadeTime = 2;
  double elapsedTime = 0.0;
  bool initiateFade = false;

  void collidedWithPlayer() {
    initiateFade = visible = !visible;
    elapsedTime = 0.0; // 重置计时
  }

  double map(
      double value, double start1, double stop1, double start2, double stop2) {
    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
  }

  @override
  void update(double dt) {
    if (initiateFade) {
      elapsedTime += dt;

      final backgroundOff = game.tileMap.getLayer("BackgroundOff");
      if (backgroundOff != null) {
        double opacity;
        if (visible) {
          // 淡入逻辑
          opacity = (elapsedTime / fadeTime).clamp(0.0, 1.0);
        } else {
          // 淡出逻辑
          opacity = 1.0 - (elapsedTime / fadeTime).clamp(0.0, 1.0);
        }

        backgroundOff.opacity = opacity;
        backgroundOff.markNeedsPaint(); // 触发重绘

        // 判断动画是否结束
        final isAnimationDone = visible ? (opacity >= 1.0) : (opacity <= 0.0);
        if (isAnimationDone) {
          initiateFade = false;
          elapsedTime = 0.0;
        }
      }
    }

    super.update(dt);
  }

  @override
  FutureOr<void> onLoad() async {
    add(RectangleHitbox());
    return super.onLoad();
  }
}

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