Javascript动画？ [关闭]答案

【问题标题】：Javascript Animation? [closed]Javascript动画？ [关闭]
【发布时间】：2018-06-10 06:00:11
【问题描述】：

我们希望在网页上进行一些游戏化 - 因此当用户完成一项操作时，我们会奖励他们硬币。

理想情况下，我们希望将他们的总硬币列在页面顶部，然后制作一个动画，其中硬币会向上喷射并在每次赚取时增加其总赚取的硬币。这在许多手机游戏中很常见。

我知道理论上我可以生成一堆具有绝对位置的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 库？

【问题讨论】：

索取图书馆之类的东西是题外话，你应该知道这一点。

标签： javascript html css angularjs animation

【解决方案1】：

您正在寻找的交互非常具体，您不太可能找到适合它的库。把这类事情做好可能需要做很多工作，但这里是您需要为每个动画调用的基本函数。你可以填补他们的胆量。

getCoinPosition(coinEl)

getTotalCoinsPosition(coinEl)

moveTo(startPosition, endPosition, coinElement)

我也会研究 Tween.js。

重要的性能考虑：

不要为position 属性设置动画，因为它们无法利用硬件加速。您需要为transform CSS 属性设置动画，并使用translateX() 和translateY() 来移动硬币。它需要一些额外的考虑，因为该属性存储为矩阵字符串。还有其他关于动画 transform 属性的问题，您可以查找。

不要指望通过更改top 和left 来获得流畅的动画。

【讨论】：

【解决方案2】：

正如其他人所说，您将不得不手动计算结束位置。

这并不像听起来那么难；您可以使用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/

【讨论】：