UIView animation Swift operation

Keywords: Swift iOS



iOS uses closures to set concise and powerful animation effects on UIView objects. Different from Android, the latter needs to set xml and animation classes to complete complex animation effects, while iOS can only use animation and transition attribute closures.

In iOS, animation can be simply divided into attribute transition animation and transition animation, and attribute transition animation can be divided into single-layer closure animation, double-layer closure animation and multi parameter closure animation. The following is its specific introduction.

Attribute over animation:

Property transition means that when some properties of a UIView (note that all controls are its derived classes) change, the change process will be animated with a gradient effect.

Single layer closure Animation:

The so-called single-layer closure animation is the animation using one-layer closure. Let's take the UIView color change on the interface after clicking a Button as an example.

import UIKit
import SnapKit

class AnimationViewController: BaseViewController {
    private var animationView: UIView!
    private var buttonChange:  UIButton!
    private func initView(){
        animationView = UIView()
        animationView.backgroundColor = UIColor.gray
        buttonChange = UIButton(type: UIButton.ButtonType.system)
        buttonChange.setTitle("Change", for: UIControl.State.normal)
        buttonChange.addTarget(self, action: #selector(animatingViewListener), for: UIControl.Event.touchDown)
        animationView.snp.makeConstraints{ make in
        buttonChange.snp.makeConstraints{ make in

    override func viewDidLoad() {

        // Do any additional setup after loading the view.

    @objc func animatingViewListener(){
        UIView.animate(withDuration: 1){
            self.animationView.backgroundColor = UIColor.red


Of course, we can not only change the color after setting the stand-alone, but also set the location, size and other properties. The implementation method of this effect is explained as follows:

UIView.animate(withDuration: TimeInterval) {
// Code here.            

withDuration parameter is Int type, which means animation duration, unit: s; This is followed by a closure, which contains the UIView property to be changed.

The following sets properties for common animation effects of single-layer closures:

  • frame: animation of position and size
  • bounds: size settings
  • Center: center location modification
  • transform: morphological change
  • alpha: transparency
  • backgroundColor: background color
  • contentStretch: content stretch mode within a view

Of course, common animation effects include "elastic damping", as follows:

    @objc func animatingViewListener(){
        UIView.animate(withDuration: 2, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: {
            self.animationView.center = CGPoint(x: 200, y: 200)
        }, completion: nil)

The realization method of elastic damping is explained as follows:
The first parameter is animation duration; The second is the delay duration. The third is the damping coefficient, ranging from 0 to 1. 0 indicates severe rebound and 1 indicates no rebound; The fourth is the initial rebound speed, ranging from 0 to 1.

Double closure Animation:

Double layer closure means that two closures are used. It is often used to execute the next closure after the previous closure is executed.

    @objc func animatingViewListener(){
        UIView.animate(withDuration: 1, animations: {
            self.animationView.backgroundColor = UIColor.red
        }) {(finish) in
            UIView.animate(withDuration: 1, animations: {
                self.animationView.center = CGPoint(x: 200, y: 200)

Multi parameter closure Animation:

Multi parameter closures are closures of multiple parameters. The options array option provides a variety of effects.

    @objc func animatingViewListener(){
        UIView.animate(withDuration: 2, delay: 0, options: UIView.AnimationOptions.curveEaseInOut, animations: {
            self.animationView.backgroundColor = .red
        }, completion: nil)

The following is an explanation of the opntions array.

layoutSubviewsThe child view is animated with the parent view
allowUserInterractionAllow event interaction
beginFromCurrentStateAllows you to execute a new animation while the animation is executing
autoreverseReverse execution
overrideInheritedDurationUse inner animation execution time
overrideInheritedContentVariable speed effect using inner animation
allowAnimatedContentAllow real-time refresh
showHideTransitionViewsWhen the view is displayed, it is switched and hidden
overrideInheritedOptiosNo animation parameters are available
curveEaseInoutFade in and out
curveEaseInFade in
curveEaseOutFade out
curveEaseLinearLinear uniform velocity
transitionFlipFromLeftCut in from the left
transitionFromRightCut in from the right
transitionCurlUpTurn in from top to bottom
transitionCurlDownFlip in from bottom to top
transitionCrossDissolveDissolution effect
transitionFlipFromTopCut in from the top
transitionFlipFromBottomCut in from the bottom

Transition Animation:

The so-called transition refers to the transition from one interface to another. Of course, in some cases, instead of changing the ViewControleller, it changes the content. For example, the general book reader only converts the content inside. Then the animation used in this case is transition animation.

Transition animation is divided into true transition (View switched) and pseudo transition (no switching). The following is a pseudo transition to illustrate:

    @objc func animatingViewListener(){
        UIView.transition(with: self.animationView, duration: 2, options: UIView.AnimationOptions.transitionCurlUp, animations: {
            self.animationView.backgroundColor = UIColor.red
        }, completion: nil)

The transition() method is similar to the argument of the animate() method, and will not be described again. The method of true transition is as follows:

        UIView.transition(with: UIView, duration: 0, options: UIView.AnimationOptions.transitionCurlUp, animations: {
            // Code here.
        }, completion: nil)

You can see that the first parameter of the method used for true transition is the UIView to be transferred, and the rest are the same.

Posted by Zomie on Fri, 03 Sep 2021 19:20:35 -0700