Estimated Time
10 minutes


Success Animation

In this lesson we will learn how to use the easing settings inside of C4 Studio to add more polish to our animations. We will create a success animation for a button that can be easily imported into an XCode project.

If you want a quick start for the tutorial you can download our sample file and follow along starting with importing into C4 Studio.

Final Design Files

Otherwise, we’ll build the design file from scratch.

Sketch File Setup

Here’s the plan. We’re going to make an animation with the following effects:

  1. A progress bar animates to the right
  2. The progress bar covers the initial text
  3. A new piece of text animates in over top of the progress bar
  4. The progress bar expands to cover the light-gray border of the original button

Let’s do it.

Sketch

We’re going to create 5 elements in our sketch file:

  1. A container with a grey outline
  2. Two fill bars (one to animate to the right, one to expand)
  3. Two pieces of text.

Create a new sketch file with an iPhone 6 sized artboard and name it Start.

Then, …

Create a new rectangle (200 x 44) with a clear fill and 2pt light gray border (rename it to BTN)

Create a piece of text called TEST, center it in the rectangle

Create a slightly smaller blue filled rectangle (198 x 42) inside the shape (rename it SUCCESS FILL)

Duplicate the previous shape, change its width to 1pt (rename it ANIMATE IN)

Create a piece of text called Success, center it on the shape

Duplicate the artboard (rename the duplicate to END)

Tailoring the States

On the End state…

Change the size and position of SUCCESS FILL to cover the gray outline of the BTN (ours moved up, left and changed to 202 x 46)

Change the opacity of TEST to 0%

On the Start state…

Change the opacity of SUCCESS FILL to 0%

Change the width of ANIMATE IN to 1pt, and its opacity to 0%

Your sketch file should look something like this:

The two states of our animation.

Save the file as successButton.sketch.

C4 Studio

Now that we have our design file ready, it’s time to import it into C4 Studio.

Create a new C4 Studio project

Import successButton.sketch file and link the Start and End artboards.

Test the animation…

By default C4 Studio makes all transitions start at the same time and have a length of 0.25s, which is too quick.

Adjust the timing

We want the animation to be smooth, so let’s start by changing the animation timing.

Click the stopwatch and extend the timeline to 2.0 seconds.

Test the animation again. Everything is slower now… but still too overlaid.

Text Animations

Let’s start by changing the animation duration and occurence for each of the text layers.

Change the duration of both SUCCESS and TEST to 0.25s

Offset the SUCCESS animation so that it starts at 1.5s

Offset the TEST animation so that it starts at 0.25s

Fill Animations

Next, we want to adjust the timelines of ANIMATE IN and SUCCESS FILL so that they appear as a single element that grows to the right, then expands to fill the original button.

Pull the start position of the ANIMATE IN animation to 0.5s

Pull the end position of the ANIMATE IN animation to some time before 1.5s, this will cause it to appear to finish before the SUCCESS text starts animating in

Then…

Pull the start position of the SUCCESS FILL animation to 1.5s so that it aligns with the text animation

Your timeline should look like this:

Adjusting the timing of animations makes the effect much nicer.

Play back the animation.

Easing

Easing inside C4 Studio works as it would in any other animation sofwtare. We have options for:

  • linear
  • easeIn
  • easeOut
  • easeInOut.

In C4 Studio you can apply easing to groups, and to individual layers. If you apply easing to a group then all of its layers will inherit that behaviour. If you apply it only to one layer in a group the others will not be affected.

To apply easing…

Click on the icon to the right of a layer’s name in the timeline

The easing pop shows 4 options.

Change the easing for SUCCESS to Ease In

Change the easing for all other layers to Ease Out

Hit play one more time…

AAAAAND our animation is done!

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 tutorial covered the use of easing and sequencing of timing within an animation.

Now go experiment some more or if you would like to keep going our next tutorial will get into how we can set up a transition from cover of story to reading an article.