Sprite Sheet跳跃/下落动画与重力、跳跃速度同步问题求助

我遇到Sprite Sheet跳跃精灵动画与游戏重力、跳跃速度逻辑不匹配的问题：动画播放卡顿，且再次触发时似乎从上次中断的帧开始播放。希望跳跃/下落动画能完美匹配代码中的重力与跳跃速度逻辑，求解决方案。

当前效果：

预期效果：

相关代码 #

// Represents a player in the game world.
class Player extends SpriteAnimationComponent with CollisionCallbacks, KeyboardHandler{

  //late ThePixelDead gameRef = GlobalGameReference.instance.gameReference;

  int _hAxisInput = 0;
  bool _jumpInput = false;
  bool _isOnGround = false;


  final double _gravity = 20;
  final double _jumpSpeed = 400;
  final double _moveSpeed = 64;

  final Vector2 _up = Vector2(0, -1);
  final Vector2 _velocity = Vector2.zero();

  // Limits for clamping player.
  late Vector2 _minClamp;
  late Vector2 _maxClamp;

  Player(
    SpriteAnimation spriteAnimation, {
    required Rect levelBounds,
    Vector2? position,
    Vector2? size,
    Vector2? scale,
    double? angle,
    Anchor? anchor,
    int? priority,
  }) : super(
          animation: spriteAnimation,
          position: position,
          size: size,
          scale: scale,
          angle: angle,
          anchor: anchor,
          priority: priority,
        ) {
    // Since anchor point for player is at the center,
    // min and max clamp limits will have to be adjusted by
    // half-size of player.
    final halfSize = size! / 2;
    _minClamp = levelBounds.topLeft.toVector2() + halfSize;
    _maxClamp = levelBounds.bottomRight.toVector2() - halfSize;
  }

  @override
  Future<void>? onLoad() {
    add(CircleHitbox());
    return super.onLoad();
  }

  @override
  void update(double dt) {


   // animationLogic();

    // Modify components of velocity based on
    // inputs and gravity.
    _velocity.x = _hAxisInput * _moveSpeed;
    _velocity.y += _gravity;

    // Allow jump only if jump input is pressed
    // and player is already on ground.
    if (_jumpInput) {
      if (_isOnGround) {
        AudioManager.playSfx('Jump_15.wav');
        _velocity.y = -_jumpSpeed;
        _isOnGround = false;
        animation = gameRef.jump;
      }
      _jumpInput = false;
    }

    // Clamp velocity along y to avoid player tunneling
    // through platforms at very high velocities.
    _velocity.y = _velocity.y.clamp(-_jumpSpeed, 150);

    // delta movement = velocity * time
    position += _velocity * dt;

    // Keeps player within level bounds.
    position.clamp(_minClamp, _maxClamp);

    // Flip player if needed.
    if (_hAxisInput < 0 && scale.x > 0) {
      flipHorizontallyAroundCenter();

    } else if (_hAxisInput > 0 && scale.x < 0) {
      flipHorizontallyAroundCenter();
    }


    super.update(dt);
  }

  @override
  bool onKeyEvent(RawKeyEvent event, Set<LogicalKeyboardKey> keysPressed) {
    _hAxisInput = 0;
    _hAxisInput += keysPressed.contains(LogicalKeyboardKey.keyA) ? -1 : 0;
    _hAxisInput += keysPressed.contains(LogicalKeyboardKey.keyD) ? 1 : 0;
    _jumpInput = keysPressed.contains(LogicalKeyboardKey.space);

    return true;
  }

  @override
  void onCollision(Set<Vector2> intersectionPoints, PositionComponent other) {
    if (other is Platform) {
      if (intersectionPoints.length == 2) {
        // Calculate the collision normal and separation distance.
        final mid = (intersectionPoints.elementAt(0) +
                intersectionPoints.elementAt(1)) /
            2;

        final collisionNormal = absoluteCenter - mid;
        final separationDistance = (size.x / 2) - collisionNormal.length;
        collisionNormal.normalize();

        // If collision normal is almost upwards,
        // player must be on ground.
        if (_up.dot(collisionNormal) > 0.9) {
          _isOnGround = true;
          animation = gameRef.idle;
        }

        // Resolve collision by moving player along
        // collision normal by separation distance.
        position += collisionNormal.scaled(separationDistance);
      }
    }
    super.onCollision(intersectionPoints, other);
  }


  // This method runs an opacity effect on player
  // to make it blink.
  void hit() {
    add(
      OpacityEffect.fadeOut(
        EffectController(
          alternate: true,
          duration: 0.1,
          repeatCount: 5,
        ),
      ),
    );
  }

  // Makes the player jump forcefully.
  void jump() {
    _jumpInput = true;
    _isOnGround = true;
  }


}



//-------------------



// Represents the game world
class ThePixelDead extends FlameGame with HasCollisionDetection, HasKeyboardHandlerComponents, HasTappables {

  final WorldData worldData;


  ThePixelDead({required this.worldData}) {
    globalGameReference.gameReference = this;
  }

  GlobalGameReference globalGameReference = Get.put(GlobalGameReference());


  // Reference to common spritesheet
  late Image spriteSheet;


  final double stepTime = 0.2;

  late SpriteSheet walkSS;
  late SpriteSheet runSS;
  late SpriteSheet jumpSS;
  late SpriteSheet idleSS;

  late SpriteAnimation walk = walkSS.createAnimation(row: 0, stepTime: stepTime, to: 7);
  late SpriteAnimation run = runSS.createAnimation(row: 0, stepTime: stepTime, to: 7);
  late SpriteAnimation jump = jumpSS.createAnimation(row: 0, stepTime: stepTime, to: 7, loop: false);
  late SpriteAnimation idle = idleSS.createAnimation(row: 0, stepTime: stepTime, to: 7);


  final playerData = PlayerDataOrig();
  final textureSize = Vector2(32,32);

  Size getScreenSize() {
    return mat.MediaQueryData.fromWindow(mat.WidgetsBinding.instance.window).size;
  }

  @override
  Future<void>? onLoad() async {
    // Device setup
    await Flame.device.fullScreen();
    await Flame.device.setLandscape();

    // Loads all the audio assets
    await AudioManager.init();

    spriteSheet = await images.load('Spritesheet.png');

    idleSS = SpriteSheet(
      image: Flame.images.fromCache('player/idle.png'),
      srcSize: textureSize,
    );

    walkSS = SpriteSheet(
      image: Flame.images.fromCache('player/walk.png'),
      srcSize: textureSize,
    );

    runSS = SpriteSheet(
      image: Flame.images.fromCache('player/run.png'),
      srcSize: textureSize,
    );

    jumpSS = SpriteSheet(
      image: Flame.images.fromCache('player/jump.png'),
      srcSize: textureSize,
    );



    camera.zoom =  1.4;

    //camera.viewport = FixedResolutionViewport(Vector2(640, 230),);

    //    camera.viewport = FixedResolutionViewport(Vector2(getScreenSize().width / 2.5, getScreenSize().height / 2.5),);


    return super.onLoad();
  }
}

问题根源与修复方案 #

核心问题 #

1. 跳跃动画未重置：Flame的非循环SpriteAnimation播放结束后会保留当前进度，再次赋值时不会回到起始帧，导致重复跳跃时动画从断点继续。
2. 动画与物理状态脱节：仅在跳跃启动时切换动画，未根据玩家垂直速度（上升/下落）匹配对应动画帧，落地时的动画切换逻辑也不完善。
3. 固定步长不匹配物理节奏：固定的stepTime未和跳跃的物理时长关联，导致动画播放速度和实际跳跃速度不一致。

具体修复步骤 #

1. 重置跳跃动画状态

每次触发跳跃时，克隆并重置动画实例，确保每次跳跃都从第一帧开始：

// 替换原跳跃触发代码
if (_isOnGround) {
  AudioManager.playSfx('Jump_15.wav');
  _velocity.y = -_jumpSpeed;
  _isOnGround = false;
  // 克隆动画并重置到起始帧
  animation = gameRef.jump.clone()..reset();
}

2. 根据垂直速度切换动画阶段

在update方法中，根据_velocity.y判断上升/下落状态，对应切换动画（如果有拆分的上升/下落帧序列）：

@override
void update(double dt) {
  // ... 原有物理逻辑 ...

  // 新增动画状态判断
  if (!_isOnGround) {
    if (_velocity.y < 0) {
      // 上升阶段：播放跳跃上升动画
      if (animation != gameRef.jumpAscend) {
        animation = gameRef.jumpAscend.clone()..reset();
      }
    } else {
      // 下落阶段：播放下落动画
      if (animation != gameRef.jumpDescend) {
        animation = gameRef.jumpDescend.clone()..reset();
      }
    }
  } else {
    // 地面状态：根据水平输入切换 idle/walk
    animation = _hAxisInput != 0 ? gameRef.walk : gameRef.idle;
  }

  super.update(dt);
}

如果跳跃序列是完整的单张sheet，可以手动同步动画进度与物理状态：

// 计算跳跃总时长与当前进度
final totalJumpFrames = gameRef.jump.frames.length;
final ascendTime = _jumpSpeed / _gravity; // 上升到顶点的时间
final progress = _velocity.y < 0 
  ? (ascendTime - (_velocity.y.abs() / _gravity)) / ascendTime // 上升进度
  : 0.5 + (_velocity.y / 150) * 0.5; // 下落进度（150是最大下落速度）

// 强制设置当前动画帧
gameRef.jump.currentIndex = (progress * totalJumpFrames).clamp(0, totalJumpFrames - 1).floor();

3. 优化碰撞时的动画切换

在onCollision中，确保落地时不仅切换回idle，还要重置跳跃动画状态：

if (_up.dot(collisionNormal) > 0.9) {
  _isOnGround = true;
  gameRef.jump.reset(); // 重置跳跃动画，避免下次跳跃从断点开始
  animation = _hAxisInput != 0 ? gameRef.walk : gameRef.idle;
}

4. 动画实例缓存优化

避免频繁克隆动画的性能开销，可在Player类中缓存本地动画实例：

// Player类中添加
late SpriteAnimation _localJumpAnim;

@override
Future<void>? onLoad() {
  add(CircleHitbox());
  _localJumpAnim = gameRef.jump.clone();
  return super.onLoad();
}

// 触发跳跃时重置本地动画
if (_isOnGround) {
  // ... 物理逻辑 ...
  _localJumpAnim.reset();
  animation = _localJumpAnim;
}

额外优化建议 #

• 把跳跃动画拆分为上升帧和下落帧两个独立序列，能更精准匹配物理状态。
• 调整动画stepTime，让跳跃动画总时长等于实际跳跃的物理时长（上升时间+下落时间）。
• 使用Flame的AnimationController手动控制动画进度，实现动画与物理运动的完全同步。

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