flame/examples/lib/stories/animations/animation_group_example.dart

import 'dart:ui';

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';

enum RobotState {
  idle,
  running,
}

class AnimationGroupExample extends FlameGame with TapCallbacks {
  static const description = '''
    This example shows how to create a component that can be switched between
    different states to change the animation that is playing.\n\n
    
    Usage: Click/tap and hold the screen to change state and then let go to go
    back to the original animation.
  ''';

  late SpriteAnimationGroupComponent<RobotState> robot;

  @override
  Future<void> onLoad() async {
    final running = await loadSpriteAnimation(
      'animations/robot.png',
      SpriteAnimationData.sequenced(
        amount: 8,
        stepTime: 0.2,
        textureSize: Vector2(16, 18),
      ),
    );
    final idle = await loadSpriteAnimation(
      'animations/robot-idle.png',
      SpriteAnimationData.sequenced(
        amount: 4,
        stepTime: 0.4,
        textureSize: Vector2(16, 18),
      ),
    );

    final robotSize = Vector2(64, 72);
    robot = SpriteAnimationGroupComponent<RobotState>(
      animations: {
        RobotState.running: running,
        RobotState.idle: idle,
      },
      current: RobotState.idle,
      position: size / 2 - robotSize / 2,
      size: robotSize,
    );

    add(robot);
  }

  @override
  void onTapDown(_) {
    robot.current = RobotState.running;
  }

  @override
  void onTapCancel(_) {
    robot.current = RobotState.idle;
  }

  @override
  void onTapUp(_) {
    robot.current = RobotState.idle;
  }

  @override
  Color backgroundColor() => const Color(0xFF222222);
}