iOS UIView Animations

Filed Under: iOS

In this tutorial, we’ll be animating our UI Views in various ways in the iOS Application.

iOS UIView Animations

Animations are a vital component in building beautiful UIs.

Following are some of the basic properties of a view that can be animated:

  • center
  • alpha
  • frame
  • bounds
  • transform
  • backgroundColor
  • contentStretch

The syntaxes for UIView Animations are:


UIView.animate(withDuration:, animations:)
UIView.animate(withDuration:, delay:, animations:)
UIView.animate(withDuration:, delay:, options:, animations:)
UIView.animate(withDuration:, delay:, options:, animations:, completion:)

UIView.animate(withDuration: 5.0, animations: {
            self.myView.alpha = 0
            print("animations")
        })

ios ui view animation basic with duration

With Delay:


UIView.animate(withDuration: 5.0, delay: 2.0, animations: {
            self.myView.alpha = 0
            print("animations")
        })

Notice that there is a two second delay:

ios ui view basic animation with delay

With Options


UIView.animate(withDuration: 5.0, delay: 2.0, options: [.autoreverse], animations: {
            self.myView.alpha = 0
            print("animations")
        })

There are plenty of options available that we will see later in this tutorial. The above one auto-reverses the animation once before vanishing it off.

ios basic animation with options

With completion
A Completion handler closure gets called when the animation is completed.
We can add a completion handler as shown below:


UIView.animate(withDuration: 5.0, animations: {
            self.myView.alpha = 0
            print("animations")
        },completion:
            {finished in
                print("Is finished? \(finished)")
                UIView.animate(withDuration: 1.0, animations:{
                self.myView.alpha = 0.5
                },completion: nil)
        })

In this, we’ve chained another animation when the first is completed.
ios basic animation with completion handler

A completion is a trailing closure. We can enhance the readability of the code by calling the completion outside function as shown below:


UIView.animate(withDuration: 5.0, animations: {
            self.myView.alpha = 0
            print("animations")
        }){finished in
            print("Is finished? \(finished)")
            UIView.animate(withDuration: 1.0, animations:{
                self.myView.alpha = 0.5
            })
        }

Note: finished is a boolean.

The following code would immediately call the completion block.


UIView.animateWithDuration(5.0, animations: {        
    println("animations")
}, completion: { finished in          
    println("completion")
})

This is because no UIView was animated.

You must call a view and animate it in the animation block.

Let’s open up our Main.storyboard in our new XCode Project.
Following is the UI we’ve created for the next three basic animations that we’ll perform:

ios ui view basic animation storyboard setup

Create an IBAction in the ViewController.swift for each of the other Buttons similarly.

In order to set the Button text in two lines, set the line break to word wrap. To goto the next line press Option + Control + Enter while typing the title.

Animating Color



@IBAction func animateColor(_ sender: Any) {

    UIView.animate(withDuration: 1, animations: {
        self.myView.backgroundColor = UIColor.black
    }, completion: nil)

}

Animate Movement

Here we change the position of the view using the frame origin as the reference.
A negative in x-direction means it goes to the left.
A negative in the y-direction means it goes to the top.


@IBAction func animateMovement(_ sender: Any) {
    UIView.animate(withDuration: 1, animations: {
        self.myView.frame.origin.x -= 40
    }, completion: nil)
    
}

Animate Size

Here we change the frame size width and height.


@IBAction func animateSize(_ sender: Any) {
    UIView.animate(withDuration: 1, animations: {
        self.myView.frame.size.width += 40
        self.myView.frame.size.height += 10
    }){ finished in
        UIView.animate(withDuration: 1, animations: {
            self.myView.frame.size.width -= 40
            self.myView.frame.size.height -= 10
        })
    }
}

Animate Together

Here we’ll animate the size, color and position of the View together.


@IBAction func animateAllTogether(_ sender: Any) {
    
    if(animationRunning){
        self.myView.layer.removeAllAnimations()
        animationRunning = !animationRunning
    }
    else{
        animationRunning = !animationRunning
    UIView.animate(withDuration: 1, animations: {
        self.myView.backgroundColor = UIColor.green
        self.myView.frame.size.width += 50
        self.myView.frame.size.height += 20
        self.myView.center.x += 20
    }) { _ in
        UIView.animate(withDuration: 1, delay: 0.25, options: [.autoreverse, .repeat], animations: {
            self.myView.frame.origin.y -= 20
        })
    }
    }
}

animateRunning is a boolean variable that is used to toggle the UIView Animation.
To stop the animation we do : self.myView.layer.removeAllAnimations().
We’ve set the options to auto-reverse and repeat forever.

The output of the above 4 basic animations is given below:
ios ui view animation basic

Next, we’ll look at Transform Animations and use the various options.

Transform Animations

We can transform the scale, rotate the views to show animations.

Following is the setup from the storyboard:

ios transform animation scale setup

In the above storyboard, we’ve linked all the 4 buttons to the same IBAction function. The same function would be triggered when any of these buttons is clicked. We can set a button tag to identify the buttons from each other.

There are 4 main types of animation curves:

  • curveEaseIn
  • curveEaseOut
  • curveEaseInOut
  • curveLinear

Note: They are called curves since their animation graphs are curves!

To Transform animations we do:


self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
            
            UIView.animate(withDuration: 1.0, delay: 0.0, options: [.curveEaseIn], animations: {
                self.optionsView.transform  = .identity
            })

CGAffineTransform sets the intial scale.
self.optionsView.transform = .identity transforms the view to it’s original scale.

We can set each of the options in their respective button tags as shown below:

ios ui view animation transform animation-curves button action

The output of the application in action for the above transform animation is given below:

ios ui view animation transform curves output

Spring Animations

Spring Animations behave like real-life springs. With their damping velocity and elasticity, they make a cool animation.

Spring Animations can be set by adding the following syntax for the UIView Animations animate function.


UIView.animate(withDuration: 1, delay:, usingSpringWithDamping:, initialSpringVelocity:, options: [], animations: , completion:)

usingSpringWithDamping requires a number between 0 and 1. It represents the damping ratio. The higher the number the springier the animation will be.
Higher the intialSpringVelocity, higher the intial momentum.

Again we’re creating a StackView with 4 Buttons for different use cases in our Main.storyboard:
ios ui view animation spring setup

The function springAnimationWithOptions is triggered everytime when any of the buttons is clicked:


@IBAction func springAnimationWithOptions(_ sender: UIButton!) {
        
        if(sender.tag == 1)
        {
            self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
            UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
        else if(sender.tag == 2)
        {
            self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
            UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
        else if(sender.tag == 3)
        {
            self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
            UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
        else if(sender.tag == 4)
        {
            self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
            UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.8, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
    }

The output is:
ios ui view animation spring output

Transform Animation – Translate, Scale, Rotate

We can scale translate and rotate in the following way:


let translate = CGAffineTransform(translationX: 120, y: 120)
let rotate = CGAffineTransform(rotationAngle: 360)
let scale = CGAffineTransform(scaleX: 2, y: 2)

We can also chain together each of these by using the concatenating method:

self.view.transform = translate.concatenating(rotate)

Our Main.storyboard again hooks the 4 buttons for the use cases to a common IBAction button click function:

ios ui view animation scale rotate translate setup

The code for the STRAnimationWithOptions function is given below:


@IBAction func STRAnimationWithOptions(_ sender: UIButton!) {
        
        if(sender.tag == 1)
        {
            let scale = CGAffineTransform(scaleX: 2, y: 2)
            self.optionsView.transform = scale
            UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
        else if(sender.tag == 2)
        {
            let translate = CGAffineTransform(translationX: -120, y: -120)
            self.optionsView.transform = translate
            UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
        else if(sender.tag == 3)
        {
            let rotate = CGAffineTransform(rotationAngle: 360)
            self.optionsView.transform = rotate
            UIView.animate(withDuration: 3, delay: 0, options: .curveEaseInOut, animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
        else if(sender.tag == 4)
        {
            let rotate = CGAffineTransform(rotationAngle: 360)
            let translate = CGAffineTransform(translationX: -120, y: -120)
            let scale = CGAffineTransform(scaleX: 2, y: 2)
            self.optionsView.transform = rotate.concatenating(translate).concatenating(scale)
            UIView.animate(withDuration: 3, delay: 0,usingSpringWithDamping: 0.8,initialSpringVelocity: 0.5, options: [.autoreverse,.curveEaseInOut], animations: {
                self.optionsView.transform = .identity
            }, completion: nil)
        }
    }

In the last one, we’ve added spring animation as well. Check out the output of the Scale Rotate Translate Transform Animations.

ios ui view animation scale rotate translate spring output

Transition Options

Besides the curved animation option discussed above there are a few more.

To create transition animations we do the following in Swift:


UIView .transition(with: self.myTextField, duration: 4, options: .transitionCrossDissolve,
                               animations: {
                                self.myTextField.textColor = UIColor.red
            })

Let’s see some of the important transition options by example.

First we need to set up the last part of our ViewController in the Main.storyboard:
ios ui view animation transtition

We’ve created a UITextField and linked it to the ViewController.swift along with the three buttons.

The code for the transitionAnimationWithOptions function is given below:


@IBAction func transitionAnimationWithOptions(_ sender: UIButton!) {
        
        if(sender.tag == 1)
        {
            UIView .transition(with: self.myTextField, duration: 4, options: .transitionCrossDissolve,
                               animations: {
                                self.myTextField.textColor = UIColor.red
            }){finished in
                self.myTextField.textColor = UIColor.white
            }
        }
        else if(sender.tag == 2)
        {
            UIView .transition(with: self.myTextField, duration: 4, options: .transitionFlipFromRight,
                               animations: {
                                self.myTextField.textColor = UIColor.red
            }){finished in
                self.myTextField.textColor = UIColor.white
            }
        }
        else if(sender.tag == 3)
        {
            UIView .transition(with: self.myTextField, duration: 4, options: .transitionCurlUp,
                               animations: {
                                self.myTextField.textColor = UIColor.red
            })
        }
    }

The output of the above application in action is given below:

ios ui view animation transition output

Wow, that’s the best for the last!

This brings an end to this tutorial. You can download the full XCode project with all the animations from the link below:

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages