preface:

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
        self.view.addSubview(animationView)
        
        buttonChange = UIButton(type: UIButton.ButtonType.system)
        buttonChange.setTitle("Change", for: UIControl.State.normal)
        buttonChange.addTarget(self, action: #selector(animatingViewListener), for: UIControl.Event.touchDown)
        self.view.addSubview(buttonChange)
        
        animationView.snp.makeConstraints{ make in
            make.size.equalTo(230)
            make.center.equalToSuperview()
        }
        
        buttonChange.snp.makeConstraints{ make in
            make.width.equalTo(60)
            make.height.equalTo(30)
            make.bottom.equalTo(self.view.safeAreaLayoutGuide.snp.bottom).offset(-80)
            make.centerX.equalToSuperview()
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        initView()
    }

    @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.

attribute	explain
layoutSubviews	The child view is animated with the parent view
allowUserInterraction	Allow event interaction
beginFromCurrentState	Allows you to execute a new animation while the animation is executing
repeat	repeat
autoreverse	Reverse execution
overrideInheritedDuration	Use inner animation execution time
overrideInheritedContent	Variable speed effect using inner animation
allowAnimatedContent	Allow real-time refresh
showHideTransitionViews	When the view is displayed, it is switched and hidden
overrideInheritedOptios	No animation parameters are available
curveEaseInout	Fade in and out
curveEaseIn	Fade in
curveEaseOut	Fade out
curveEaseLinear	Linear uniform velocity
transitionFlipFromLeft	Cut in from the left
transitionFromRight	Cut in from the right
transitionCurlUp	Turn in from top to bottom
transitionCurlDown	Flip in from bottom to top
transitionCrossDissolve	Dissolution effect
transitionFlipFromTop	Cut in from the top
transitionFlipFromBottom	Cut 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.