In this run-through, we create an orbit animation using easing curves and offsets for the X and Y positions of a layer. We also quickly discuss why we fade, rather than trashcan properties, and 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:
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:20
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 orb.
This step starts at 1:18
Easy. But! We performed the last few steps with Relative Mode off.
If you end up forgetting to turn on Relative Mode, and you don’t want any animations that you created, you can always click a keyvalue on a parent layer to select its underlying keyvalues.
This step starts at 1:42
1s, of the timeline track.
Clicking the keyvalue of a parent layer select all the child keyvalues at the same time.
First, let’s get a basic animation for the orbit by positioning the orb at key times.
This step starts at 2:05
Now you should have a diamond-like 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:06
Ytrack, delete keyvalues at
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 3:30
Xtrack, delete the keyvalue at
We’re getting very close.
You’ll notice that there is a very small visual hiccup 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:03
0.0 > 0.5sto ease out.
1.5 > 2.0sto ease in.
There you go.
Two small steps will put our animation its fina state.
This step starts at 4:45
result(s) found for “”.