Konva .to 坐标 "dynamic"

Question

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

你控制一个可以在地图中四处移动的单位，"camera" 被平移到它。我通过将屏幕居中在单位的 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 个 "large" 红色圆圈和 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);

Konva .to 坐标 "dynamic"

Konva .to with "dynamic" coordinates

javascript

canvas

game-physics

typescript

konvajs