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

太阳系位置错误

1 个答案: