Estimated Time
10 minutes


Loading Animation

Sketch has its own unique way of rendering shapes, which sometimes cannot translate directly to how a developer might render them on a platform like iOS. For example, when creating a shape with rounded corners, Sketch allows you to edit the radius of each corner, generating a shape. Whereas, iOS only allows you to specify a single radius that gets applied to all four corners of a layer (i.e. not a shape).

But! Fear not! There are ways to make things lovely between C4 Studio and Sketch when you get into advanced techniques.

To demonstrate this we will create a loading animation that looks like liquid filling a pill. To do so, we will need to creat a rectangle with corner radius and properly flatten it into a layer that works in C4 Studio. Then, we’ll use that layer to create a mask.

Here’s what that will look like in the end:

Grab a starter file that already has the wave shape in it:

Starter Sketch File

Or, if you want to just see how everything works:

Final Design Files

Create A Mask

The effect we’re going for is to have the wave shape move smoothly through a rounded rectangle. To do this, we’re going to set up a “mask” that looks like a rounded rectangle.

The Pill

We’ll need to create a rounded rectangle using a little bit of a trick.

Create a rectangle (240 x 25) and set its corner radius to 25

This creates a shape with a radius characteristic, but we need to flatten the shape for it to work in C4 Studio.

Create a second (smaller) rectangle and center it over the rounded one

Union the two shapes

Then…

Flatten the combined shape (Layer > Paths > Flatten)

Rename the shape to PILL

The Mask

We now have our pill shape but we want it to act as a mask for our water shape. So we need to create a layer that fills the entire artboard and then subtract the pill shape.

Create a white rectangle that fills the artboard

Then…

Bring the pill to the front

… and, with both the pill and rectangle selected…

Subtract the pill from the rectangle (Layer > Combine > Subtract)

Now we can see the liquid shape only through the mask.

Position the wave shape so that it is just outside the mask

The End State

We are now ready to create the final state artboard.

Duplicate the Start artboard, rename it to End (Plugins > C4 Studio > Duplicate Artboard)

On our End artboard let’s reposition the wave.

Move the liquid layer horizontally so that it fills in the pill shape completely.

… and …

Move it vertically down so that the animation looks more dynamic.

Our Sketch file is now set up.

Save it as loadingAnimation.sketch.

C4 Studio

Create a new C4 Studio project, connect the sketch file you just created and link both the Start and End artboards.

Hit Play.

The animation happens pretty quickly so let’s slow it down by using the stopwatch in the top right of the timeline.

Change the timeline duration to 1.5 seconds.

When you play this back it will still look a bit stiff. We can fix this by exaggerating the liquid feel with some easing.

Select only the y value of the wave layer’s animation, change it’s easing to Ease In + Out

Now, the animation looks a little better.

Save the C4 Studio project.

Export Code or Movie

If we look inside the File menu we can now pass code to a developer by using the Export Code command, or we can Export Movie and share a QuickTime file to get approvals.

Conclusion

This lesson explained how to prepare paths for C4 Studio and how we can create masks. Now keep experimenting, maybe some rotation would improve the effect, or try filling in a vertical instead of horizontal pill.