Animating a Popup
Learn the basics of C4 Studio, while animating a popup.
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:
Or, if you want to just see how everything works:
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.
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
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
Flatten the combined shape (
Layer > Paths > Flatten)
Rename the shape to
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
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
We are now ready to create the final state artboard.
Startartboard, rename it to
Plugins > C4 Studio > Duplicate Artboard)
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
Create a new C4 Studio project, connect the sketch file you just created and link both the
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
yvalue 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.
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.
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.