带有“动态”坐标的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) => {

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