太阳系位置窃听错误

Question

我正在为学校制作一个太阳系，我想知道如何让行星围绕太阳运动，我尝试过使用位置和开始时间，但是当我运行代码出现行星错误时在位置之间来回移动，我尝试更改开始计时器，但似乎没有任何方法可以解决这个问题。我怎样才能让行星绕着太阳移动，但又没有动画标签移动得太快，例如，行星在移动，然后它们的计时器慢慢停止，导致它们不断地来回移动依赖于快速，没有遵循他们的预期路径。这是代码：

    <!--mercury-->    
    <a-sphere position="-10 -4 -100" radius="1" 
     src="https://codehs.com/uploads/fec19742fba1515d19f7c98a3034341a">
       <a-animation
       attribute="position"
       from="-10 -4 -100"
       to="0 -4 -90.2"
       dur="1000"
       begin="4000"
       repeat="1"
       ></a-animation>
       <a-animation
       attribute="position"
       from="0 -4 -90.2"
       to="10 -4 -100"
       dur="1000"
       begin="5000"
       repeat="1"
       ></a-animation>
       <a-animation
       attribute="position"
       from="10 -4 -100"
       to="0 -4 -110.2"
       dur="1000"
       begin="6000"
       repeat="1"
       ></a-animation>
       <a-animation
       attribute="position"
       from="0 -4 -110.2"
       to="-10 -4 -100"
       dur="1000"
       begin="7000"
       repeat="1"
       ></a-animation>

Answer 1

首先，我推荐一种完全不同的方法。目前你正在尝试围绕太阳做正方形，为什么不用这样的设置做圆圈：

<a-entity position="0 1 -5" 
 animation__rot="property: rotation; dur: 5000; easing: linear; loop: true; to: 0 360 0">
  <a-sphere position="-5 0 0" radius="1">
  </a-sphere>
</a-entity>

我正在旋转参照系，里面是行星。您可以看到它正在运行 here.

您的方法存在时间问题。如果你检查你的动画什么时候开始你会得到：

animation 1: 4 9  14 19
animation 2: 5 11 17 23
animation 3: 6 13 20 27
animation 4: 7 15 24 32

第一次迭代的顺序正确。在第二个中，animation1 的第三次迭代出现在 animation3 的第二次迭代之后。因此球体会四处传送，看起来是随机的。

您的方法的解决方案是在前一个动画结束时开始动画：

firstAnimation.addEventListener("animationend", (e) => {
   secondAnimation.emit("start")
})

在这样的设置中：

<a-animation id="first" begin="start"></a-animation>
<a-animation id="second" begin="start"></a-animation>

看看here

太阳系位置窃听错误

solar system position bugging error

html

aframe