Animated UILabel with CADisplayLink

3 min readJul 27, 2018

During develop, sometimes we need to redraw UIView regularly

Quick Look of CADisplayLink

If we want to redraw UIView regularly, we may first consider use NSTimer , however it will cause some issues, because NSTimer ’s RunLoop need to handle many input, this leads to NSTimer ’s minimum refresh period is between 50ms to 100ms.

If we want to see smooth animation, we need a 60Hz refresh rate, it means we need to refresh the screen in every 0.016 second, since NSTimer can not refresh so frequently, we need to use another timer from Core Animation , CADisplayLink.

CADisplayLink is similar to NSTimer, it also need to register to RunLoop, however, it will call the selector when the screen needs to refresh, in order to prepare the data next frame will display, so it will call the selector much more frequently than NSTimer.

Let’s Start

First we need to register the CADisplayLink to the RunLoop

After setting up our timer, it’s time to animate our string. For convenience, we will use NSAttributedString .

In method setupAnimatedText(from labelText: String?) , we need to use two arrays, one is durationArray, the other is delayArray, by configuring these two arrays, we can control every characters’ appear time and appear duration.

TypeWriter Effect

Every character’s appear time are same.
Next character will not appear until previous character is fully appeared.
By changing NSAttributedStringKey.baselineOffset to adjust characters’ position.

Shine Effect

Every character appear randomly.
Make sure every character will complete appearing within duration.
By changing NSAtrributedStringKey.foregroundColor.alpha to make characters disappear first.

Fade Effect

Every character’s appear time gradually decreases.
By changing NSAttributedStringKey.foregroundColor.alpha to make characters disappear first.

Update string display

Now is time to complete our update method. In this method, we will transform the string according to the configuration of the two arrays we have just configured.

Core Code

Calculate animation progress by start time and current time.
Calculate current character’s appear progress by durationArray and delayArray

Then we can update our label with this new attributedString .

What’s more

Use Trigonometric functions to perform progress animation

Let’s focus on the method which name wavePath() , in this method we will use sine function to draw some waves.

Wave animation’s update

Height grow with progress.
Wave fluctuate with progress.

Let’s go back to update method

Epilogue

These are all I use of CADisplayLink, in fact it has much more way to use, we can use it to perform much more complex animation.

Thanks for reading this article, I’ m not a native English speaker, if I have any mistakes or typo, please inform me to change.

If you like this repository , welcome to give a star in Github.