SECRET OF CSS

Build a Viber Splash Screen With Animations in SwiftUI | by Kenan Begić | Jul, 2022


Create awesome animations

In this short article, we are going to build a Viber look-alike splash screen with a Viber logo simple animation.

Here’s a sneak peek at the final output:

1*q2tnZ65yMoCNFmFWTYIjjw

Now let’s get started.

Design of the screen is pretty simple as shown in the below gist. It consists of an icon, some text and a button — just like most login screens.

The most important thing is animation.

We need to break this animation into a few parts. As we can see in the final result (at the end of this tutorial), we need 5 moving parts.

The first part is the base image of the Viber logo that needs to be static.

Next, we have 5 parts that are moving, the logo circle, logo phone, and three curved lines one by one. All of these images are combined into ZStack.

For each of these images, we will apply scaling with offset movement with easeIn animation. The only difference is the duration of animation for each image and the delay of animation. Delay will be applied for the phone logo and three moving curved lines as the circle logo is the first image that we are animating.

And the final result is:

1*1iwSlzhuMrpT3L65D25YDA

That is it, hope you have enjoyed this short tutorial, and stay tuned for more content.

As always, code is available on the GitHub repository:



News Credit

%d bloggers like this: