I am making a solar system for school and I was wondering how I would get the planets to move around the sun, I have tried using positions and begin times but when I run the code the planets bug back and forward between positions, I have tried changing the begin timers, however nothing seems to be working on this issue. How would I be able to get the planets to move around the sun, but without the animation tags moving too quickly, For example to planets are moving and then their timers slowly get off causing them to just constantly move back and forth rely fast on, not following their intended path. This is the code:
<!--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>
Firstly, I'd recommend a totally different approach. At the moment You are trying to make squares around the sun, why not circles with a setup like this:
<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>
I'm rotating the frame of reference, inside which is the planet. You can see it working here.
Your approach has an issue with timing. If you check when do your animation start You'll get:
animation 1: 4 9 14 19
animation 2: 5 11 17 23
animation 3: 6 13 20 27
animation 4: 7 15 24 32
The first iteration is in the right order. In the second one , the third iteration of animation1 comes after the second of animation3. Hence the sphere teleports around and it looks random.
The solution to your approach is starting an animation, when the previous one ended:
firstAnimation.addEventListener("animationend", (e) => {
secondAnimation.emit("start")
})
in a setup like this:
<a-animation id="first" begin="start"></a-animation>
<a-animation id="second" begin="start"></a-animation>
Check it out here