超级简单的UIView动画

感谢作者Sindri的小巢的文章iOS动画-从UIView动画说起，里面详细介绍关于UIView动画更多的基础知识

用UIView动画做的登录页面，很简单一看就懂直接能用适合像我一样的初学者，这里用到了杜蕾斯动画和杜蕾斯弹簧动画和snapkit约束

---

UIview动画.gif

杜蕾斯动画的闭包和几个参数的意思

UIView.animate(withDuration: TimeInterval, delay: TimeInterval, options: UIViewAnimationOptions, animations: { 
            code
            }) { (Bool) in
                code
        }

1.duration： 动画时长
2.delay： 动画在延迟多久之后执行
3.options：动画的展示
4.animations：动画执行的代码块
5.completion：动画结束后执行的代码块

---

杜蕾斯弹簧动画

UIView.animate(withDuration: TimeInterval, delay: TimeInterval, usingSpringWithDamping: CGFloat, initialSpringVelocity: CGFloat, options: UIViewAnimationOptions, animations: { 
            code
            }) { (true) in
                code
        }

1.damping：速度衰减比例。取值范围0 ~ 1，值越低震动越强
2.initialSpringVelocity：初始化速度，值越高则物品的速度越快

基础工作就准备到这了，下面就是代码的实现过程

变量的声明
    var l1: UILabel?
    var l2: UILabel?
    var button: UIButton?

初始化UI
override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
    func setupUI() {
        //初始化UI
        l1 = UILabel()
        l1?.text =  "boom"
        l1?.backgroundColor = UIColor.red
        
        l2 = UILabel()
        l2?.text = "live"
        l2?.backgroundColor = UIColor.green
        
        button = UIButton()
        button?.backgroundColor = UIColor.red
        button?.setTitle("我是一个button", for: .normal)
        button?.addTarget(self, action: #selector(click), for: .touchUpInside)
        button?.alpha = 0
        
        self.view.addSubview(l1!)
        self.view.addSubview(l2!)
        self.view.addSubview(button!)
        
        //snapkit布局代码
        self.l1?.snp.makeConstraints({ (make) in
            make.left.equalTo(10)
            make.width.equalTo(100)
            make.height.equalTo(30)
            make.top.equalTo(100)
        })
        
        self.l2?.snp.makeConstraints({ (make) in
            make.left.equalTo(10)
            make.width.equalTo(100)
            make.height.equalTo(30)
            make.top.equalTo(200)
        })
       
        self.button?.snp.makeConstraints({ (make) in
            make.left.equalTo(50)
            make.width.equalTo(200)
            make.height.equalTo(30)
            make.top.equalTo(300)
        })
        
    }

进入页面后的动画实现
    override func viewWillAppear(_ animated: Bool) {
         //每次页面进来之前要先把l1和l2移到屏幕左侧看不见的位置，当然也可以在布局时直接设在外面
          self.l1?.snp.updateConstraints({ (make) in
              make.left.equalTo(-100)
          })
          self.l2?.snp.updateConstraints({ (make) in
              make.left.equalTo(-100)
          })
    }
    override func viewDidAppear(_ animated: Bool) {
        //实现杜蕾斯动画闭包，这里会用到闭包嵌套闭包
        UIView.animate(withDuration: 1, delay: 0.2, options: .curveEaseIn, animations: {
            //通过更改约束的left属性，让l1和l2从左侧进来
            self.l1?.snp.updateConstraints({ (make) in
                make.left.equalTo(100)
            })
            self.l2?.snp.updateConstraints({ (make) in
                make.left.equalTo(100)
            })
            //一定要调用layoutIfNeeded，否则动画不执行
            self.view.superview?.layoutIfNeeded()
            
            }) { (true) in
                //当label动画做完后追加button的动画实现淡入效果
                UIView.animate(withDuration: 1.5, delay: 0, options: .curveEaseIn, animations: {
                    //只需要把透明值设成1 就可以了
                    self.button?.alpha = 1
                    
                    }, completion: nil)
        }
    }

按钮动画实现
func click(){
        //实现杜蕾斯弹性动画
        UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 8, options: [], animations: {
            //最好使用bounds x和y的坐标 要与变化的width和height相对应 增大多少就要相应的减少多少
            self.button?.bounds = CGRect(x: (self.button?.bounds.origin.x)! - 20, y: (self.button?.bounds.origin.y)! - 1, width: (self.button?.bounds.size.width)! + 40, height: (self.button?.bounds.size.height)! + 2)
            //动画时间使按钮不能点击
            self.button?.isEnabled = false
            }) { (true) in
                //恢复按钮
                self.button?.isEnabled = true
        }
        //记得要不bounds设置回去，一定要写在闭包外边，请自行试试写在动画执行后的代码块completion里是什么效果
        self.button?.bounds.size = CGSize(width: 200, height: 30)
    }

代码到这里就ok了，动画这方面实在是个坑啊 想要把动画做好需要花费大量的时间研究，建议最好先把app整体实现了，在考虑往里边加动画，相信我绝对不晚，如果是新手的话上来就实现动画逻辑会很耽误很多时间的，当然前端开发者如果能作的一手好动画相信你的工资一定会加的。