Animate an object on a closed path

[You need to add “Animation on vectors” in the categories of the forum.]

I wanted to create an animated Solar System with Hype and I realised that it is easy to move an object from point A to point B and then to change the line into a curved path.

But how to just select an object and a circle and make the object rotate following the path of the circle? I tried to open the circle or to find it's beginning, I tried to recreate a circle from a straight path, but that's A. complex B. not perfect.

I used another method with a “straight wire” that connects the Moon to Earth, and then a wire that connects the ‘Earth+Moon’ symbol to the Sun. It's OK if the orbits were perfect circles but they are not, they are elliptical. And this is were it requires a lot of additional work.

Can you please confirm that making an object to follow a path that we select separately is impossible?

The result so far

you can change the origin of the element that should rotate. may help orbiting.hype.zip (10.0 KB)

Thank you for the proposal, it can be useful in other cases.

BTW, how did you figure out the X Transformation value?
I can't select the Moon's reference point to position it on the Sun.

draggable by a shortcut. but i'm not on a mac atm

Ok, it's Cmd.

I cannot confirm this, because it is possible .

Vector Shape paths can be pasted onto animation motion paths.

Make an elliptical path

1. Create an Ellipse element
2. Extend it out from a circular shape, because Aristotle Was Wrong™
3. Choose Edit > Convert to Vector Shape
4. Exit Vector Shape mode, but keep the Ellipse selected

Copy the Vector Shape

1. Edit > Copy

1. Create a new element
2. You will need to give it some sort of animation, such that it has a motion path line

Paste the path

1. Click to select the motion path line and double click so it is editing it as a path
2. Choose Edit > Paste

Of course, a purely circular animation is much easier with an anchor point.

1 Like

The fact that applying morphing between paths / and / motion on paths via an obscure method of Copying and Pasting makes it odd, unintuitive and complicated but at least we can do nice things in Hype.

Just one thing: for the Moon always facing Earth, we need to add a rotation of 360°.

When I do step 7, regardless if I make a basic move from left to right or right to left,
When then I paste the Elliptic shape, it always rotate clockwise because it seems that the drawing order of an Elliptical shape in Hype is Top, Right, Bottom, Left.

But the Moon rotates counterclockwise if we look from the Top. Is there a feature in Hype to Reverse the path? I don't see it.
I tried to rotate the Ellipse on the Y axis but the Ellipse is then shifted slightly to the left.

There's not currently a way to reverse anchor point ordering or set a first anchor point, though these are on the list to do.

I'm not sure I follow - you should be able to move the group to align the motion path to match, even if it is rotated 180 degrees.

Alternatively if your motion path is on a different timeline, you can have an action play the timeline in reverse.

It's because of the default Perspective effect with rotations.
I disabled it.

To solve the problem, I grouped everything and rotated Y 180%. But then I need to rotate the opposite way all graphic assets. Not the easiest way to do a Earth-Moon system.

Fixing the rotation direction with the Y rotation on each symbol and by disabling perspective.

Next step: making it faster or slower depending of the position on the orbit… Youhou...

2 Likes

Haha yes this can be taken quite far :). Though I do imagine you could take a linear timing function for the animation and just change it to curve a bit in the middle?

P.S. I don't think Hype's physics engine is going to support general relativity anytime soon!

To make a Solar System, we really need the ability to reverse direction of a path.
I created my demo file without taking that into account and then when it is finished I rotate individual elements when needed but for some planets it's complicated because of the moons.

What as designers we need the most in Hype:

1. Changing the position of a Persistent Symbol is enough to make it move on all Scenes without going inside the Symbol to do so.

2. Copying vectors from Adobe Illustrator and pasting them in Hype should also create selectable.editable anchor points.

3. Inverse the direction of a vector path.

4. Hitting Tab in the Inspector's fields selects the content the next field.
Using Up and Down arrows on the keyboard to change the values. With the Shift key, the increment is 10.

5. A shortcut or button to center the scene.

6. No 3D perspective should be the default, but possible to enable it with an option.

7. Animating Dotted Line.