带有“动态”坐标的Konva .to

Question

我正在使用Konva创建一个小游戏。

您可以控制一个可以在地图中移动的单个单元，并将“相机”平移到它上面。我通过将屏幕居中放在单位的x，y坐标上，然后绘制与此相关的其他所有内容来实现此效果：

class GameWorld {

  public entities = new Map();

  public width = window.innerWidth;

  public height = window.innerHeight;

  public center = {

    x: 0,

    y: 0

  };

  tick(world: any) {

    world.forEach((entity: any) => {

      ...

      if (entity.id === user.id) {

        // this is the user's unit

        this.center.x = entity.x;

        this.center.y = entity.y;

      }

      ...

      let dx = this.dx(entity.x);

      let dy = this.dy(entity.y);

      entity.shape.position({ x: dx, y: dy });

      ...

    });

    this.layer.draw();

  }

  dx(x: number) {

    return x - this.center.x + this.width / 2;

  }

  dy(y: number) {

    return y - this.center.y + this.height / 2;

  }

}

目前，我遇到的问题是一个简单的血液飞溅效果，它的工作原理是创建5个“大”红色圆圈和15个小圆圈，以不同的速度在死亡单位（不是玩家单位）周围的随机方向和距离上散布。

let bloodDot = (x: number, y: number, size: number) => {

  let dx = this.dx(x);

  let dy = this.dy(y);

  let dot = new Konva.Circle({

    x: dx,

    y: dy,

    radius: size,

    fill: 'red',

  });

  this.layer.add(dot);

  let dir = Math.random() * Math.PI * 2;

  let dis = Math.random() * size * 5;

  dot.to({

    x: dx + Math.cos(dir) * dis,

    y: dy + Math.sin(dir) * dis,

    duration: Math.random() * 3,

    easing: Konva.Easings.StrongEaseOut,

    onFinish: () => dot.destroy()

  });

}

for (let lg = 0; lg < 5; lg++) {

  for (let sm = 0; sm < 3; sm++) {

    bloodDot(entity.x, entity.y, entity.size / 6);

  }

  bloodDot(entity.x, entity.y, entity.size / 3);

}

使用该方法会带来问题。如果玩家是静止的，这一切都很好，但是如果玩家正在移动，因此其他一切，包括血液，都应该相对于它们移动，则使用中的x和y仍然是创建血点时的x和y，似乎血液正在跟随玩家或更确切地说是卡在屏幕上的同一位置， 而其他一切都相对移动。.to().to

如何在Konva仍在制作动画时动态更改补间的属性（坐标）？

Answer 1

好吧，这不是对所提问题的直接回答，但它是问题的解决方案，所以在这里。我没有找到一种方法在动画处理补间的属性时对其进行修改，但我发现我可以对点进行分组，然后相对于该组进行动画处理，并且我必须在派生的x，y上绘制组，这很容易。let bloodDot = (size: number) => {&nbsp; let dot = new Konva.Circle({&nbsp; &nbsp; x: 0,&nbsp; &nbsp; y: 0,&nbsp; &nbsp; radius: size,&nbsp; &nbsp; fill: 'red',&nbsp; });&nbsp; let dir = Math.random() * Math.PI * 2;&nbsp; let dis = Math.random() * size * 5;&nbsp; g.add(dot);&nbsp; dot.to({&nbsp; &nbsp; x: Math.cos(dir) * dis,&nbsp; &nbsp; y: Math.sin(dir) * dis,&nbsp; &nbsp; duration: Math.random() * 3,&nbsp; &nbsp; easing: Konva.Easings.StrongEaseOut,&nbsp; &nbsp; onFinish: () => dot.destroy()&nbsp; });}let g = new Konva.Group({&nbsp; x: this.dx(entity.x),&nbsp; y: this.dy(entity.y)});this.layer.add(g);for (let lg = 0; lg < 5; lg++) {&nbsp; for (let sm = 0; sm < 3; sm++) {&nbsp; &nbsp; bloodDot(entity.size / 6);&nbsp; }&nbsp; bloodDot(entity.size / 3);}setTimeout(() => g.destroy(), 3000);