How to achieve an animation track from one point to another? MovingParticle seems to be able to achieve but can only receive one point. I want multiple points, such as a-b-c-d, and the animation time between each two points is different.
There is also a related problem, how to realize the process of moving from a-b to show the animation from opaque to transparent at the same time.
At present, I have realized these two points, but occasionally there is a jam between animations. I want to know if there is a better way

 List<List<Vector2>> fromList = [
    [Vector2.zero()..y += 12, Vector2.zero()..y -= 3],
    [Vector2.zero()..y -= 3, Vector2.zero()],
    [Vector2.zero(), Vector2.zero()..y -= 1.5],
    [Vector2.zero()..y -= 1.5, Vector2.zero()]
  ];
  test() async {
    for (var i = 0; i < fromList.length; i++) {
      ParticleSystemComponent component = await play(fromList[i], i);
      world.add(component);[enter image description here](https://i.sstatic.net/7oHGix4e.gif)
      await Future.delayed(const Duration(milliseconds: 300));
    }
  }
  Future<ParticleSystemComponent> play(List<Vector2> list, int i) async {
    Sprite sprite = await loadSprite("atlantic/assemble_5.png",
        srcSize: Vector2(82, 82), srcPosition: Vector2(0, 320));
    MovingParticle? movingParticle;
    movingParticle = MovingParticle(
      from: list[0],
      lifespan: 0.3,
      to: list[1],
      child: MySpriteParticle(
          index: i,
          sprite: sprite,
          size: Vector2(5, 5),
          position: Vector2.zero(),
          anchor: Anchor.center),
    );

    return ParticleSystemComponent(
      particle: movingParticle,
    );
  }
class MySpriteParticle extends SpriteParticle {
  final Duration duration = const Duration(milliseconds: 300);
  late DateTime startTime;
  MySpriteParticle({
    required super.sprite,
    required Vector2 super.size,
    required Vector2 super.position,
    required super.anchor,
    required this.index,
  }) {
    startTime = DateTime.now();
  }
  final int index;
  @override
  void render(Canvas canvas) {
    DateTime now = DateTime.now();
    Duration elapsedTime = now.difference(startTime);
    double progress =
        (elapsedTime.inMilliseconds / duration.inMilliseconds).clamp(0.0, 1.0);
    double opacity = progress;
    Paint paint = Paint()..color = Colors.white.withOpacity(opacity);
    sprite.render(canvas,
        overridePaint: index == 0 ? paint : null,
        anchor: anchor,
        position: position,
        size: size);
  }
}

enter image description here

I want to know if there is a better way