How to use a Timer and CATransition to achieve the effect of a news ticker?

Learn Swift from scratch and challenge to create 100 apps — Name Ticker App

The animation of the Name Ticker App is shown in Figure 1.

In this app, we’ll use a name ticker to display Demon Slayer character names. We utilize the Timer to change the character’s name every 3 seconds with a set animation.

Figure 1 The animation of the Name Ticker App

Now, we’re going to explain how to make this app step-by-step.

1. Add images to the ImageView

First, We have to put all the images we want to display into the Asset and display them using Imageview.

2. Creating an Array of Character Names

As shown in Figure 2, we create an array called ‘names’ to store all character names that we want to show on the Label.

Figure 2 An array to save all character names

3. Create a Timer

Next, since the Timer can be nil, we declare an optional Timer in the code. Then, use the ‘scheduledTimer’ property of the Timer to set up the parameters of this Timer, and the parameters are described as follows:

• withTimeInterval: Set the interval at which this Timer should be called, in seconds.
• repeats: Indicates whether the timer repeats itself or not. In the code, setting this to true means that the timer will keep running.
• Code in curly brackets: The code that needs to be executed each time the timer is triggered is shown in curly brackets. Here, the code is calling a function called nextName().

Figure 3 The code for creating the Timer

4. Setting the function content

Figure 4 illustrates how to make text appear with animation. The first line sets the index of the picture to be displayed. Use the remainder method to make the index go back to the first one when it reaches the last one.

Then, we create a CATransition object called ‘transition’. CATransition is a category provided by Core Animation for animating transitions between pictures or text.

• duration: the duration of the animation, in seconds.
• type: type of the transition, e.g. .push, .fade, .reveal, etc.
• subtype: the subtype of the transition, for instance, .fromTop, . fromBottom, .fromLeft, .fromRight, etc.

After that, we add this animating transition to the ‘showName’ Label to achieve the name ticker effect.

Figure 4 The code of animating transitions

Finally, the Name Ticker APP is done! The screenshot of the Name Ticker App is shown in Figure 5.

Figure 5 The screenshot of the Name Ticker App

If you have any questions or recommendations, feel free to comment below.