In this walkthrough, we'll create a morphing animation between a circle, a square and a triangle. Prepping your shapes is critical, so we'll look at how to avoid pitfalls in Sketch. Then, we'll turn a morph into an animation that is ready to be used in UIActivityIndicatorView..
You can Bruce Lee this and do the tutorial from scratch, or just dl the files and have look at how we set things up:
This is a fairly long screencast, it covers a lot. So, we’ve only added the critical steps below.
The first step in learning how to make amazing morph animations, is to understand how your shapes get created. The key reason is that the look and feel of a morph animation depends completely on the number and type of control points in your shape’s path.
Let’s start with a simple example.
Our final animation morphs between a square and a circle. Let’s create these in Sketch and animated them.
This step starts at 00:25
You’ll immediately see that there is a strange twisting happening in your newly created animation. The reason for this is that the points are out of order, and they have different types of control points. Let’s inspect things in sketch.
This step starts at 02:14
For a smooth animation, you want both your shapes to have the same number of path points.
This step starts at 02:28
This critical difference is important, but we’ll get back to this in a bit…
In pretty much any programming language, animating betwee paths will happen like this… The first point in shape A will animate to the first point in shape B, the second to the second… and so on. So! The order of points is important in your shapes. Let’s fix the order of points in our shapes.
This step starts at 03:58
Use Flow’s stroke start / end property to figure out the drawing order of points in your shapes.
Now the shape and the circle should have their starting points roughly in the same position.
But, it looks like the drawing direction is different. Let’s fix that too.
This step starts at 05:16
Now, the motion of our animation is spot on, but there’s some strange artifacting.
Watch the animation at 05:50
In our design, this artifacting happens because we’re going from points that have no control points to points that have control points.
You can experiment with this in Sketch.
This step starts at 06:35
The transition of the top-left animation is much smoother. Except, you now have this strange artifacting with the almost but not really a sharp corner.
To get the absolute best outcome for your morphs, you want craft your shapes so that then animate beautifully. Now, without getting into a long lecture.
Now. This stage take a lot of little steps so you may want to watch it on 2x.
In a nutshell, this is how I animate smoothly betwen a square and circle.
This step starts at 07:46
x=18.4(left points) and
y=18.4(upper points) and
Even though things look like butter in Flow, you always want to check your stuff in a real context. So, we’re going to see how this animation looks in iOS.
After a bit of renaming of files…
This step starts at 12:25
Let’s take the same approach as before. We’ll modify a square into a triangle.
This step starts at 13:12
I also changed the color of the stroke and fill before creating the animation
The goal of this is to create a simple, elegant, looping animation that can be used as a spinner. Specifically, we’re designing this for iOS.
On iOS a spinner is called an Activity Indicator.
To have an animation loop seamlessly, forever, and ever, to infinity and beyond, the start and end states need to be identical. In our case, the animation will start and end with a square.
This step starts at 17:00
Now, you have an animation that starts and ends with a square, so it will smoothly loop.
Now, I had an idea where the entire animation could rotate 90 degrees with each morph. This is pretty easy to achive.
This step starts at 17:36
1sand change the shape’s rotation to
2schange the rotation to
3schange the rotation to
Now, when you run this animation on a loop all the elements rotate.
But, that’s not the final aesthetic I had in mind. What I really want is for the entire animation to also look like it’s looping continuously, not just resetting and running again (which you can tell because the triangle always ends pointing to the right).
To get the effect I need to make 3 additional cycles, and edit the rotations all the way along.
4schange the rotation to
5schange the rotation to
6schange the rotation to
Getting there… But, I’m still not content. I want these cycles to happen two more times to complete a full rotation of the animation.
7schange the rotation to
Now you should have a 12s animation.
Ok, so we’re done our animation but the tutorial isn’t over. I spend the rest of the screencast showing you what the animation looks like in iOS, tweaking a bit of code and covering some other handy little tips.
result(s) found for “”.