如何实现从一点到另一点的动画轨迹？

Question

如何实现从一点到另一点的动画轨迹？ MovingParticle似乎可以实现但只能获得一分。我想要多个点，例如a-b-c-d，并且每两个点之间的动画时间不同。 还有一个相关的问题，如何实现从a-b移动的过程同时显示从不透明到透明的动画。 目前我已经实现了这两点，但是动画之间偶尔会出现卡顿的情况。我想知道有没有更好的办法

 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);
  }
}

在此输入图片描述

我想知道有没有更好的方法

Answer 1

您可以使用

MoveByPathEffect

并将您想要的所有点添加到

Path

。

final path = Path()..moveTo(100, 100)..lineTo(150, 150)..lineTo(200, -100),
final effect = MoveAlongPathEffect(
  path,
  EffectController(duration: 1.5),
);
yourComponent.add(effect);

PS。不要在

sprite.render

内手动调用

SpriteComponent

，这已经自动完成了。

来源： https://docs.flame-engine.org/latest/flame/effects.html#movealongpatheffect