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>

标识为s1e1

的圆环

在此处：<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >

它附带2个动画。一个用于左右移动，另一个用于扩展和收缩。

问题：

我希望这些动画能够同步，以使圆环在中间扩展，在两端收缩。它代表了一个电子在氢原子中绕一个质子运动的可视化效果，但我不知道该如何接近。

Answer 1

我正在输入响应，建议使用animation组件（包含在0.9.0内核中）而不是a-animation（已弃用，并在{{ 1}}），我仍然会在一般实践中建议这样做，但我意识到动画实际上确实仍然不同步。

我认为这是由于以下任何原因造成的：

极短的间隔（0.9.0）。设置得越高，计时问题就越不明显。
由于如何定位动画属性（例如原始属性与属性）（在引擎盖下使用dur）而导致的开销差异。
IIRC，使用setAttribute或setTimeout在后台设置循环。与其依赖于此，您可能不希望通过发出定时事件来禁用循环并触发这些动画，从而可以保证它们同时执行。您可以创建一个自定义组件，使用受限制的setInterval处理程序tick或setTimeout来执行此操作。

我还建议使用setInterval或linear进行缓动，因为默认设置只会沿一个方向缓和，这可能会导致不良效果。

无论哪种方式，您都可能希望将其作为错误提交给A帧存储库：https://github.com/aframevr/aframe/issues/new

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

1 个答案: