如何使用 A 帧同步对象上的动画？

Question

我在index.html中有以下代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>

      <!--  Meta  -->
      <meta charset="UTF-8" />
      <title>Alchem Figher!</title>

      <!--  Styles  -->
      <link rel="stylesheet" href="styles/index.processed.css">

      <!-- Scripts -->
      <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

        <script src="https://unpkg.com/aframe-particle-system@1.0.x/dist/aframe-particle-system-component.min.js"></script>
      <script src="jquery.js"></script>
      <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.0/dist/aframe-extras.min.js"></script>
    </head>
    <body>

    <a-scene>
      <a-text value="Rational Bonding Presents" position="-3 7 -10" color="#EF2D5E">
        <a-text value="Alchem Fighter" height="30" width="20" position=".5 -.5 0" color="#02e8f4"></a-text>
      </a-text>
      <a-sphere id="proton" position="0 2.5 -6" radius=".05" color="#EF2D5E">
        <a-sphere id="eclouds1e1"  radius=".53" color="#02e8f4" opacity=".4">
        <a-entity id="s1e1" material="color: #02e8f4"  rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >
          <a-animation attribute="position" dur="250" from=".53 0 0" to="-.53 0 0" direction="alternate" repeat="indefinite"></a-animation>
          <a-animation attribute="geometry.radius"  dur="125" from=".01" to=".53" direction="alternate" repeat="indefinite"></a-animation>
        </a-entity>
      </a-sphere>
      <a-sky src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Earth_Western_Hemisphere.jpg"></a-sky>
    </a-scene>

      <!-- Scripts -->
      <script src="scripts/index.js"></script>
    </body>
    </html>

圆环 ID：s1e1

在这里，<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >，它附有两个动画。一个用于从左向右移动，一个用于扩展和收缩。

问题：

我希望这些动画同步，以便环面在中间扩展并在两端收缩。它代表了氢原子中围绕单个质子运行的电子的可视化，但我不知道如何处理它。

Answer 1

我正在输入回复，建议使用 animation 组件（包含在 0.9.0 核心中）而不是 a-animation（已弃用，并在0.9.0)，我仍然会在一般实践中推荐，但我意识到动画实际上仍然不同步。

我假设这是由于以下任一原因造成的：

极短的间隔（dur）。设置得越高，计时问题就越不明显。
由于动画属性的目标方式不同，开销有所不同，例如，原始属性与属性（在幕后使用 setAttribute）。
IIRC，循环在引擎盖下设置为 setTimeout 或 setInterval。与其依赖于此，您可能希望禁用循环并通过发出定时事件来触发这些动画，这样您就可以保证它们同时执行。您可以使用节流的 tick 处理程序、setTimeout 或 setInterval.

我还建议使用 linear 或 easeInOutQuad 作为缓动，因为默认设置仅在一个方向上缓动，这可能会导致不良影响。

无论哪种方式，您都可以将此作为错误提交到 A-Frame 存储库：https://github.com/aframevr/aframe/issues/new

如何使用 A 帧同步对象上的动画？

How do I synchronize animations on an object using A-frame?

aframe