Shape Morphing

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:

circleSquareTriangle.zip

This is a fairly long screencast, it covers a lot. So, we’ve only added the critical steps below.

Not All Shapes Are Created Equal

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.

A Square and a Circle

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

1. Create an artboard, make it: 37x37
2. Add a 30x30 rectangle
3. Duplicate the artboard
4. Delete the second rectangle
5. Create a 30x30 circle
6. Import and animate between these two artboards.

Unexpected Behaviour

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

Numbers of Points

For a smooth animation, you want both your shapes to have the same number of path points.

This step starts at 02:28

1. Double-click into the square shape (in Sketch)
2. You’ll see there are 4 points
3. Double-click into the circle shape
4. You’ll see there are 4 points… with control-point handles

This critical difference is important, but we’ll get back to this in a bit…

Path Point Order

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.

In Sketch…

1. Select the square
2. Rotate it by 180
3. Flatten it
4. Create a new timeline in Flow

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

In Sketch…

1. Double-click your square
2. Swap the positions of the bottom-left and top-right points
3. Create a new timeline in Flow

Jagged Artifacting

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

1. Select the top-left point of the square
2. Convert it to a Mirrored point
3. Move it’s top-right control point to x=3.6 y=3.4
4. Create a new timeline in Flow

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.

Crafting Your Shapes

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.

Build a Circle from a Square

In a nutshell, this is how I animate smoothly betwen a square and circle.

This step starts at 07:46

1. Create a rectangle
2. Change its corner radius to 1
3. Flatten the shape (it should now have 8 path points)
4. Move the horizontal points to x=18.4 (left points) and x=18.6 (right points)
5. Move the vertical points to y=18.4 (upper points) and y=18.6 (lower points)
6. Move the control points of each path point so that the shape looks like a circle
7. Create a new timeline in Flow

Reality Check

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

1. Export your timeline to iOS
2. Open Xcode
3. Hit Play
4. Watch the animation in the sim

Build a Triangle from a Square

Let’s take the same approach as before. We’ll modify a square into a triangle.

In Sketch…

This step starts at 13:12

1. Duplicate the square artboard
2. Double-click into path edit mode
3. Move the two top-left points down so the bottom point is at y=18.4
4. Move the two bottom-left points up so the top point is at y=18.6
5. Modify the control points of the other two poins so the shape looks smooth
6. Create a new timeline in Flow, by using all three artboards
7. Take a reality check

I also changed the color of the stroke and fill before creating the animation

Spinner 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.

A Continuous Loop

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

1. Zoom the timeline out so you have a bit more space
2. Select the first path keyvalue
3. Option+drag and release at 3s

Now, you have an animation that starts and ends with a square, so it will smoothly loop.

Rotate Effect

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

1. Move the playhead to 1s and change the shape’s rotation to 90
2. At 2s change the rotation to 180
3. At 3s change the rotation to 270

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.

1. Area-select the last 3 keyvalues for both the rotation and path tracks.
2. Option+drag until the first keyvalue in the selection is at 4s.
3. At 4s change the rotation to 360
4. At 5s change the rotation to 450
5. At 6s change the rotation to 540

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.

1. Area-select all keyvalues, except the first, for both the rotation and path tracks.
2. Option+drag until the first keyvalue in the selection is at 7s.
3. At 7s change the rotation to 630
4. … and just keep going until you’ve incremented all keyvalues by 90 degrees.

Now you should have a 12s animation.

That’s It

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.