如何在 JavaScript 中保存动画后的对象位置？

Question

我正在尝试为游戏中的对象设置动画，在该游戏中，球应该在按下用户按钮时向上、向右、向左和向下移动。我试图通过在球上使用 .animate() 函数来实现这一点。但是在每个动画事件之后，球都会重置到它的初始位置，并且不会继续从它的“新”位置移动。有没有办法做到这一点？

为简单起见，以下是我的压缩代码 sn-p：

/* Animation */

var item = document.getElementById('item');
var anim;
function myMoveLeft(){
 anim=item.animate([
  // keyframes
  { transform: 'translateX(0px)' }, 
  { transform: 'translateX(-60px)' }
], {
     duration: 1000,
     iterations: 1
  });


}

function myMoveDown(){
 anim=item.animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(60px)' }
], {
     duration: 1000,
     iterations: 1
  });

  // anim.onfinish(()=>{console.log("onfinish ran")})

}

item.addEventListener('animationend', () => {
  console.log('Animation ended');
});

button{
  display:inline-block;
  height:40px;
  width:80px;
}
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: lightgray ;
}

#item {
  background: orange;
  position: absolute;
  right:30px;
  top:30px;
  height: 30px;
  width: 30px;
  border-radius:50%;
}

<p>
  <button onclick="myMoveLeft()">Left</button> 
<button  onclick="myMoveDown()">Down</button> 
</p>

<div id ="myContainer">
  <div id="item"></div>
</div>

正如所见，我已经尝试过使用 .onfinish() 和事件监听器 'animationend' 希望我可以更新新的 'right' 和 'top' 位置，但它不起作用。不确定这是否是正确的方法。

有人可以建议如何将元素保存到新位置并从该新位置进一步对其进行动画处理吗？

PS：如果您觉得还有其他更好的方法可以做到这一点，我也愿意接受建议/技术。

非常感谢提前！！

Answer 1

1. 可以使用fill选项让小球得到最终的变换值，和css动画中的animation-fill-mode一样。

2. 为了在做下一个动画时不覆盖transform，可以将x和y值保存为变量，根据当前x和y状态做任何动画。 （从 x 到 x-60，而不是从 0 到 -60 等）

例子：

/* Animation */

var item = document.getElementById('item');
var anim;
var x=0, y=0;
function myMoveLeft(){
 anim=item.animate([
  // keyframes
  { transform: `translate(${x}px, ${y}px)` }, 
  { transform: `translate(${x-60}px, ${y}px)` }
], {
     duration: 1000,
     iterations: 1,
     fill: 'forwards'
  });
  x -= 60;

}

function myMoveDown(){
 anim=item.animate([
  // keyframes
  { transform: `translate(${x}px, ${y}px)` }, 
  { transform: `translate(${x}px, ${y+60}px)` }
], {
     duration: 1000,
     iterations: 1,
     fill: 'forwards'
  });
  y += 60;
  // anim.onfinish(()=>{console.log("onfinish ran")})

}

item.addEventListener('animationend', () => {
  console.log('Animation ended');
});

button{
  display:inline-block;
  height:40px;
  width:80px;
}
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: lightgray ;
}

#item {
  background: orange;
  position: absolute;
  right:30px;
  top:30px;
  height: 30px;
  width: 30px;
  border-radius:50%;
}

<p>
  <button onclick="myMoveLeft()">Left</button> 
<button  onclick="myMoveDown()">Down</button> 
</p>

<div id ="myContainer">
  <div id="item"></div>
</div>