Basic understanding of CADisplayLink

Jun 13 · 4 min read

CADisplayLink is a small class that synchronizes its drawing to screen refresh rate of the display. As you add your displayLink into the run loop , your target function will be called at each screen refresh. Let’s think like this; you have device that re-draws its content ten times in a second. So if you add your displayLink to main run loop , the target function will be called 10 times in a second. Run loop feature is mostly used in game development to draw its content at each frame display time. Suppose you want to animate a game character. You have 10 images of walking . Then you should use screen refresh rate to show each images at appropriate time intervals. At first , it may be hard to understand the usage of displayLink. When I was young , I made flip book cartoons at the corners of the books. Display Link is exactly the same as making flip book cartoon.

First of all let’s see how to add display link in main run loop.

Implementation of CADisplayLink is the same as adding target to any UIControl. It is simple to implement , but hard to use.

We will develop two simple applications that use CADisplayLink. Before starting , let’s look into the performance of CADisplayLink in your device. So we will develop a performance app. The main design is like this.

It is very straight forward. With auto layout , determine the places of UILabels. I will not get into the details of auto layout here, because it is very huge and different subject.

At code side :

If you run this code in your device you would get app display like :

The actual frame rate seems close to 60 fps . It is very good for now. If you same results in your device , then it is very good for you too :)

As you know the most appropriate screen refresh rate is 60 frames per seconds. Human eye can see more than 60 fps. But above some value , human eye cannot distinguish the frame rate. For an electronic device , it is a trade off between performance and quality. So most of Apple devices aims to reach 60 fps. Let’s get into the applications that we will develop.

The first application we will develop is a simple chronometer app with a pulsing animation around chronometer label.

For simplicity , we will create a wrapper class for CADisplayLink called “DisplayLink”.

There is a counting label and the pulsing animation layer in the screen. First , we will create the counter label.

After running , you should see a screen like this ;

Now we should add pulsating layer as a background. After adding pulsating layer we will animate it with display link’s screen refresh.

Now we can see that ; counter label is animating . But pulsating pink layer is not moving or animating. Lets animate the pulsating layer.

(1) We have created pulsing animation as a struct. “PulseConfiguration” is responsible to hold the dynamic and static values in encapsulated fashion. This decreases the mass of view controller. I strongly suggest that, remove as much code as possible from view controller. By this way you will have more clean and more reusable code. Also by this way , when you want to remove the animation you can delete only one line of code from your view controller.

(2) in order to make our struct unit testable ; we should add a “currentScale” parameter to scale() function. By this way we can easily test values as it is shown in (2a)

Thats it :) I hope now you have a basic understanding of the usage of CADisplayLink. In next days , we will make more complex apps that are using CADisplayLink class.

You may download the source codes from :

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade