In this run-through, we create an orbit animation using easing curves and offsets for the X and Y positions of a layer. Then, we use groups to rotate the animation after we're finished.
You can Bruce Lee this and do the tutorial from scratch, or just dl the file and have look at how it’s done:
Let’s start by changing the scene size.
This step starts at 0:20
We need 2 circles to make this animation.
We’re adding an orbit shape for visual effect – it will not actually be the motion path for the orb.
This step starts at 0:42
There’s no trashcan for turning a color (or any other property) on and off. The main reason has to do with animations. If at a later time you want your color to fade in, then it needs to start as the proper color in the first place.
Unlike Sketch, Flow has no trashcan for properties.
Now let’s make the dot.
This step starts at 1:30
First, let’s get a basic animation path for the orbit by positioning the orb at key times.
This step starts at 2:06
Now you should have a diamond-like animation.
Next, let’s balance out our animation by distributing the animations evenly along our timeline.
This step starts at 2:47
Now the key moments of our orbit are evenly spaced throught the animation.
The way to think about an orbit animation is as 2 separate X and Y animations. If you time each of them properly, then the combination is an orbit-like motion. Let’s do it.
The animation actually starts at the top of the orb. So, for the
Y position, we need only a single keyvalue at
This step starts at 3:26
Ytrack, select the keyvalue at
When you delete a keyvalue, it may appear as though it is switching TO an easing curve icon. This happens when the keyvalue is directly between the two values to its left and right. The easing curve icon then gets redrawn in the center. So, they aren’t switching, it just happens to look that way.
We’re getting close.
We need 2 keyvalues at the points where the orb is at the left and right edges of the orbit.
This step starts at 4:22
Xtrack, select the keyvalue at
We’re getting very close.
You’ll notice that there is a very small visual blip of motion as the animation loops. This is because there are
ease-in-ease-out curves between
1.5 > 2.0s and
0.0 > 0.5s. Over the course of the “looping” interval from
1.5 > 0.5s there are 2 curves.
This step starts at 4:55
1.5 > 2.0sto ease in.
0.0 > 0.5sto ease out.
There you go.
Two small steps will put our animation its final state.
This step starts at 5:32
result(s) found for “”.