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

问题出在使用.to()方法。如果播放器静止不动，则一切正常，但是如果播放器正在移动，因此包括血液在内的所有其他东西都应相对于它们移动，则.to中使用的x和y仍为在创建血点的时候，似乎是血液在追随玩家，或者卡在屏幕上的同一位置，而其他所有东西都相对移动。

当Konva仍在设置动画时，如何动态更改补间的属性（坐标）？

Answer 1

不是这不是对所提问题的直接回答，但它是解决问题的方法，因此就可以了。

我没有找到一种方法来修改补间动画时的属性，但是我发现可以对点进行分组，然后将这些点相对于该组进行动画处理，而我必须在派生的x上绘制该组， y，这很容易。

let bloodDot = (size: number) => {
  let dot = new Konva.Circle({
    x: 0,
    y: 0,
    radius: size,
    fill: 'red',
  });

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

  g.add(dot);

  dot.to({
    x: Math.cos(dir) * dis,
    y: Math.sin(dir) * dis,
    duration: Math.random() * 3,
    easing: Konva.Easings.StrongEaseOut,
    onFinish: () => dot.destroy()
  });
}

let g = new Konva.Group({
  x: this.dx(entity.x),
  y: this.dy(entity.y)
});
this.layer.add(g);

for (let lg = 0; lg < 5; lg++) {
  for (let sm = 0; sm < 3; sm++) {
    bloodDot(entity.size / 6);
  }
  bloodDot(entity.size / 3);
}

setTimeout(() => g.destroy(), 3000);