我在 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" >中，它附有两个动画。一个用于从左至右运动，另一个用于扩展和收缩。
问题：
我希望这些动画同步，以便在中间扩展圆环并在末端收缩。它代表了电子在氢原子中绕单个质子绕的电子的可视化，但我不知道该如何处理。
i正在输入响应的过程中，建议使用animation组件（包括在0.9.0 Core中），而不是a-animation（已弃用，并在0.9.0中删除），我将在一般实践中仍然建议，但我意识到这些动画实际上仍然脱离同步。
我假设这是由于以下任何一项：
- 极短的间隔（
dur）。您设置的越高，时间问题就越不太明显。 - 由于如何针对动画属性，例如RAW属性与属性（使用
setAttribute）。 - IIRC，循环设置为
setTimeout或setInterval在引擎盖下。与其依靠这一点，您可能需要通过发出定时事件来禁用循环并触发这些动画，以便您可以同时执行它们。您可以创建一个自定义组件，可以使用节流的tick处理程序，setTimeout或setInterval。
我还建议使用 linear或 easeInOutQuad作为宽松设置仅在一个方向上放松，这可能会导致不良效果。
无论哪种方式，您都可能希望将其作为错误提交给A-Frame Repo：https：//github.com/aframevr/aframe/aframe/sissues/new