A few nice animation effects for iOS app

Tram Ho

Make your application more beautiful? Why not?


You don’t need to have an in-depth knowledge of iOS app development, so feel free! All you need is a computer with MacOS and Xcode.

By the end of the lesson, we will have:

  1. Background animation rotates continuously through predefined colors.
  2. Countdown progress bar is in the middle.
  3. Pulsing animation around the progress bar.

Few, but I hope it helps a little when you get started with Core Animation!


Go ahead and create a new application in Xcode. First we will start with the background, and how to get such animation.

Gradient Background

For background, we will use CAGradientLayer to effect it. We will declare such variables:

First we created the CAGradientLayer and also an array that will contain many different colors, which will be used as the following gradient.

Once the View loads, we will create the gradient view as above.

  • Append all available colors to Set
  • Set the gradient frame to occupy the entire screen
  • Set the initial color used, which is the index 0 in our gradient set
  • We have defined the start and end points so that the gradient flow is diagonal from top left to bottom right.
  • And finally, I added the gradient as the first fairy layer in the sublayers.

After I’ve set up the gradient layer, it’s time to create effects for the layer!

  • Whenever this function is called, I will increase the currentGradient index to 1 and repeat accordingly.
  • Set CABasicAnimation to change colors
  • Set animation to animate toValue current color index in our set in 3 seconds time.
  • The next few lines to ensure that our gradient animations are not deleted upon completion.
  • Use the delegate animationDidStop to detect when our gradient animation has finished. If it has finished, update the current gradient color to our current index (this will work like fromValue in our animation) and call animateGradient ().

Great! Animating background through CAGradientLayer quite simple! Let go ahead and add a countdown progress bar!

Countdown Progress Bar

To achieve the above effect, we will need the following:

  • 3 CAShapeLayers – One for background, one for foreground and one for pulsation
  • 2 CAGradientLayer This is to have a stroke with some gradients compared to a solid UIColor
  • Timer to track the remaining time and update UILabel on the screen

First, I created a class and followed it up with UIView so I could use it programmatically or through the storyboard .

What I originally claimed was 3 necessary CAShapeLayer and a UILabel , which were lazy variables and I gave them the initial values. Lazy means closures will be executed when these variables are called at run time.

Also, because I have a timer , I’ve also added a deinit to make sure that the timer is invalid when the view is canceled:

Also, because I want my foreground and pulse to have some gradientc, I created 2 more variables, of type CAGradientLayer . We will cover our foreground and pulse on the gradient layers to achieve the effect we want.

I gave them some gradient colors as well as their position. These are all the variables we need to get started! The init function calls a loadLayers () method to allow to see what it does.

When we call the method, we first create a circular path that will be used by CAShapeLayers . Since we want the foreground and pulse to have gradients, I applied the corresponding mask. Finally, I added the UILabel in the middle of the View that will be used to display the remaining time.

Animating for layers

Now that we have all the layers set up, let’s look at how we can achieve animations. Below shows how we can do animate foreground layer.

We have declared CABasicAnimation with the keyPath 'StroEnd' This means we want to create the effect where the stroke will end.

The animation will go from beginning to end (a circle as specified in our path earlier) for a specified period of time. Finally, we don’t want our Animation to be deleted when it’s finished, so we set isRemondOnCompletion to false. The final step is to add Animation to our foregroundLayer (CAShapeLayer)

The pulsing layer animation is almost the same, except that we will group 2 animations. If you see the final result, our pulse layer scales outward and also becomes less visible toward the end.

We will declare 2 CABasicAnimations with transform.scale paths to adjust the size and opacity to adjust the visibility. The layer will increase by 20% in size and reduce to 0 opacity during the animation. Once we have declared two animations, we can use CAAnimationgroup to add the animations together. Then, to make it look more beautiful and non-linear like our foreground animation, we set the timingFunction to easyInEaseOut , which means our animation will start slow, speeding up between its duration and then slow down before it finishes. Finally, we set the duration to 1 second and repeated the animation continuously. But don’t worry, when we find out that our foreground animation has stopped (meaning the remaining time is 0), we will also remove pulsing animation.

Finally, here are the rest of the methods found in our file. HandleTimerTick reduces the remaining time to 0.1 seconds and updates our UILabel using the main thread (because this is a UI operation).

Our only public method is startCountdown , which takes a lot of time and is animate or not.

AnimationDidStop delegate works just like our b ackground gradient we did earlier. When our foreground layer finishes animating, we will delete all animations and invalidate our timer.

That’s all we really need to get the same output! Here are 2 files if anyone gets lost.

Use the CountdownProgressBar class

To use our class, I first created a UIView and placed it in the middle of the View. I then changed its class to our CountdownProgressBar class. Finally, in my ViewControll.swift , I started animation like this:

countdownProgressBar.startCoundown(duration: 10, showPulse: true)

Check out the pulsation animation or try disabling it.

It’s done! We have made some really interesting animations that are not difficult at all! I originally wrote my own custom countdown class for a project I’m working on, and couldn’t find many examples online. Feel free to modify and use the code as you wish.

Source: GITHUB

There are many interesting things you can do, with greater efficiency than UIView , using CALayers !

First, you can experiment with different values ​​and colors to really understand how the code works. For example, you can edit the background color, adjust the radius of our pulsing effect or play with the color of the foreground layer.

These are just some simple examples of how you can spice up your application. It would be nice to combine an animated background for your Login Pag e or create your own custom loading bar .

Source: Medium

Share the news now

Source : Viblo