Replicating Apple Design Awarded Applications

Designers and developers of Apple awarded applications did a great job. But designing is only one part of the work. How difficult was it to turn these designs into native applications with all the custom controls and animations perfected for all screen sizes? In this article, I will show you how easy it can be done by recreating Auxy, Streaks and Zova interfaces.

This article is designed for educational purposes only. Please don’t use the source code for any other purpose.

As an underlying graphical interface library I will use Macaw — a Swift library that allows you to represent all graphics as high-level scene elements. I will not go into the core concepts and Macaw API so I recommend to read the Getting Started guide. Let’s get started!

Streaks

Streaks is a to-do list list that helps you form good habits. The first step is to define the graphical components and their relations.

The root node is responsible for building a 2x3 grid: “zero” X-coordinate for the first column, half of the screen width — for the second; the Y-coordinate depends on the row number and is equal to row*screen.width/2 (the grid has square cells). Root node is a 2x3 grid of streaks.

The streak node has a content group and a title under it. When the user taps a streak, its content is switched between three states: logo, calendar and statistics. We will implement this behaviour later.

For now let’s focus on the streak’s content: logo, calendar and statistics.

The logo node has a 2*PI arc shape and an image in the center. The radius value depends on the screen size. All nodes are positioned around (0, 0).

The calendar node contains different shapes for each day: “done”, “skip” or “future”. Again, all nodes are positioned around (0, 0). “Done” and “future” are simple circles. The cross node is a group of two crossed black lines.

The statistic element is a group that contains three bars with different Y-coordinates. The Y-coordinate depends on the bar index, the bar width depends on the screen width: in our case it takes up 80% of half of the screen (10% is a margin on each side).

Each bar has four nodes: two text nodes with different X-coordinates and two rounded rects with different widths. One rect is filled, the second is outlined.

We are now done with the streak’s contents. Let’s get on with its animation. By tapping a streak we want to change its content and put it in the center on the cell (each content has different widths). First animation is used to hide the old content and the second — to show new content.

Only one thing remains. By tapping the “Add Task” node we start an arc animation from 1.5*PI to 3.5*PI. You can read here for more information about content animation. In the end of the animation we open the “Add Task” controller.

Result

Xcode project is published on github.

Auxy Studio

Auxy is a music and beat maker for easy music creation. Blue squares represent sounds: the user adds and removes them tapping. When the user taps the play button, the white line starts moving from top to bottom in a cycle. A sound is played when the line crosses a square.

Auxy has four main components: sounds, play button, line runner and a background grid with bar lines.

The grid contains vertical and horizontal lines. Each fourth horizontal line is a bar line. The grid’s dimensions are 8x16: a cell’s width is equal to screen.width / columns, while the height is screen.height / rows.

When the user taps the screen we add a sound to the grid. We could calculate the sound’s column and row by the tap position. The sound node has two children nodes: background and foreground rects. Foreground has white color and opacity 0.0. We will highlight it when the line crosses it.

The bottom “play” button is the most complex element. There are two static elements: a filled circle and a shape with the arc form. The arc has a 0.05 shift near PI/2. Play and stop nodes are “Path” elements. Play path is (-1, 2), (2, 0), (-1, -2). Stop path is (-2, 2), (2, 2), (2, -2), (-2, -2). We will scale these paths to the real size.

When the user taps the “Play” button we will do the following:

• Replace the play path with the stop path (or vice versa)
• Start a cyclic arc animation: extent property animated from -PI/2+0.05 to 3*PI/2–0.1.

Only the “LineRunner” node remains. After pressing play the line is animated from top to bottom. When the runner crosses a sound it highlights it. If we know the animation time we can calculate when the runner crosses the sound, and this value will be the delay of the highlight animation:

Result

Xcode project is published on github.

Zova

Zova is a fitness and activity tracker. It has two components: activity circle in the center and activity bar at the bottom of the screen.

“ActivityCircle” contains eight cycles with different locations, one filled circle in the center, score value and a ⚡ emoji icon.

When the user taps the center circle we present all available emojis. Emoji icons are arranged in a circle around the center. If the distance from the center to icon is d then the coordinate of icon’s center is (cos(alpha) * d, sin(alpha) * d). Emojis icon are hidden by default (their opacity equals 0.0).

Before creating the circle animations let’s build a bar node. “ActivityBar” is a group containing a legend and a set of bar segments. The legend contains a rounded rectangle, “low” text and one more rectangle with a gradient color.

A segment includes a rectangle and a text under it. The X-coordinate of both rectangle and text is “zero”. Each segment has different X-coordinate, the last segment has a gradient color.

The legend node has a jumping effect: it moves back and forth along the vertical axis.

It’s time to address the activity animation. When a user taps the circle we launch a number of animations at the same time:

• Hide the top labels and the “ActivityBar” node`
• Collapse the background shadow circles
• Move and hide the label with the score value
• Move and scale the lightning emoji icon
• Show and translate emojis away from the center

Good news! We don’t need to take care about reverse animation, they are available automatically.

Result

Xcode project is published on github.

Summary

Turning award-winning design into actual applications is no easy feat. Developers have to implement custom controls and animations, make sure the app looks good on all screen sizes and runs smoothly. However, their work can be made easier by choosing right tools and libraries that provide proper abstractions and convenient APIs. Macaw is one of such libraries that can help create screen-size independent UI consisting of simple or composite graphics.