Javascript动画？ [关闭]

Question

在网页上我们想把它游戏化一下 - 所以当用户完成一个动作时我们会给它们奖励硬币。

理想情况下，我们希望将他们的总硬币列在页面顶部，然后制作一个动画，其中硬币会飙升，并在获得时增加他们赚取的总硬币。这在许多手机游戏中非常普遍。

我在理论上知道我可以生成一堆具有绝对位置的divs，然后编写一个类似这样的函数：

function moveCoin() {
  var elem = document.getElementById("coinOne");   
  var pos = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}

但是，将所有设备尺寸设置为正确且响应迅速并不是一件好事。如果有人知道我们可以用来实现这种动画的任何javascript / angular库，我很好奇吗？

Answer 1

正如其他人所说，你必须手动计算结束位置。

这并不像听起来那么强硬;您可以使用getBoundingBox()来计算硬币的最终目的地的位置，然后相应地设置硬币的CSS attrs'x'和'y'。 （注意getBoundingBox会进行重新绘制，因此最好考虑尽早找到位置并缓存结果。）

我还建议你只设置一次top和left，然后使用CSS动画来设置路径。这意味着您只需要一个Javascript中断而不是300.否则您的动画可能会有明显的延迟，具体取决于设备CPU的强大程度（如果在桌面上开发或使用功能强大的设备，您可能不会注意到滞后）。

您的硬币类可以具有如下样式：

{
  transition: all 2s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

您可以使用工具来确定您的路径应该是什么样的，例如http://cubic-bezier.com。

如果你不认为立方贝塞尔函数是足够的（例如你希望你的硬币以某种方式超调），你可以使用keyframes来编码你的对象应该在50％到75％通过时的位置等等这里有一个很好的指南：http://tobiasahlin.com/blog/curved-path-animations-in-css/

Answer 2

您正在寻找的交互是非常具体的，您不太可能找到它的库。要使这类事情正确，可能需要做很多工作，但这里是每个动画需要调用的基本功能。你可以填写他们的内心。

getCoinPosition(coinEl)

getTotalCoinsPosition(coinEl)

moveTo(startPosition, endPosition, coinElement)

我也会看看Tween.js。

Important Performance Consideration:

不要为position属性设置动画，因为那些无法获得硬件加速的优势。你需要为transform CSS属性设置动画，并使用translateX()和translateY()来移动硬币。由于该属性存储为Matrix字符串，因此需要额外考虑。关于动画你可以寻找的transform属性还有其他问题。

只是不要期望通过改变top和left获得平滑的动画。