CALayer 内容层动画

UIView 和 CALayer的区别

• UIView继承UIResponder，因此UIView可以处理响应事件，而CA Layer继承NSObject，所以CA Layer它只负责对内容的创建，绘制
• UIView负责对内容的管理，CA Layer负责对内容的绘制
• UIView的位置属性只有frame，bounds，center，而CA Layer除了具备这些属性之外还有anchorPoint，position
• 通过修改CALayer可以实现UIView无法实现的高级功能。

Core Animation核心动画

Core Animation为IOS核心动画，它提供了一组丰富的API可以用于制作各种高级炫酷的动画效果。Core Animation来自IOS的QuartzCore.framework框架，其具有以下特点：

• 直接作用与CA Layer图层上，而非UIView上。
• Core Animation的执行过程在后台执行，不阻塞主线程。
• 可以利用CA Layer绝大多数属性制作高级动画效果。

下面来看看Core Animation下常见的动画类继承关系：

• @protocol CAMediaTiming有很多动画公共属性，比如常见的duration（动画执行周期），speed（速度），repeatCount（重复次数）等一些公共的属性都放在CAMediaTiming中。
• CAAnimation主要用于实现动画的委托代理方法，比如动画开始事件和动画结束事件都是通过CAAnimation类来实现的。
• CAPropertyAnimation为属性动画，为基础动画和关键帧。CAKeyframeAnimation为关键帧动画与UIView的关键帧动画实现原理。
• CAAnimationGroup组合动画，顾名思义，利用这个类可以把其他常用动画组合在一起。
• CATransition专场动画，主要用于视图控制器或者View之间视图切换场景。

下面贴一下使用CALayer合集：

//
//  C6ViewController.swift
//  TestProject
//
//  Created by 徐皓东 on 2019/9/19.
//  Copyright © 2019 徐皓东. All rights reserved.
//

import UIKit

class C6ViewController: UIViewController {
    var loginButton:UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        self.loginButton = UIButton.init(frame: CGRect.init(x: 20, y: 230, width: screenWidth - 40, height: 50))
        self.loginButton.backgroundColor = UIColor.init(red: 50/255, green: 185/255, blue: 170/255, alpha: 1.0)
        self.loginButton.setTitle("登录", for: .normal)
        self.view.addSubview(self.loginButton)
    }

    override func viewWillAppear(_ animated: Bool) {
        位置
        let animation = CABasicAnimation.init()
        animation.keyPath = "position"
        let positionX = loginButton.frame.origin.x + 0.5 * loginButton.frame.width
        let positionY = loginButton.frame.origin.y + 0.5 * loginButton.frame.height + 100
        animation.byValue = NSValue.init(cgPoint: CGPoint.init(x: -20, y: 100))
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
        缩放动画
        let animation = CABasicAnimation.init()
        animation.keyPath = "transform.scale.x"
        animation.fromValue = 1.0
        animation.toValue = 0.8
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
        旋转
        let animation = CABasicAnimation.init()
        animation.keyPath = "transform.rotation"
        animation.toValue = 3.14/2
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)

            位移
        let animation = CABasicAnimation.init()
        animation.keyPath = "transform.translation.y"
        animation.toValue = 100
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
        圆角
        let animation = CABasicAnimation.init()
        animation.keyPath = "cornerRadius"
        animation.toValue = 15
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
        边框
        loginButton.layer.borderColor = UIColor.gray.cgColor
        loginButton.layer.cornerRadius = 10
        let animation = CABasicAnimation.init()
        animation.keyPath = "borderWidth"
        animation.toValue = 10
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)

        颜色渐变动画
        loginButton.layer.borderWidth = 10
        let animation = CABasicAnimation.init()
        animation.keyPath = "borderColor"
        animation.fromValue = UIColor.green.cgColor
        animation.toValue = UIColor.red.cgColor
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
        淡入淡出
        let animation = CABasicAnimation.init()
        animation.keyPath = "opacity"
        animation.fromValue = UIColor.green.cgColor

        animation.toValue = 1
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
        
        //阴影渐变动画
        self.loginButton.layer.shadowColor = UIColor.red.cgColor
        self.loginButton.layer.shadowOpacity = 0.5
        let animation = CABasicAnimation.init()
        animation.keyPath = "shadowOffset"
        animation.toValue = NSValue.init(cgSize: CGSize.init(width: 10, height: 10))
        animation.duration = 2.0
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        loginButton.layer.add(animation, forKey: nil)
        
    }
}

CALayer内容层动画合集总结：

• 位置动画：position、transform.translation.x、transform.translation.y、transform.translation.y
• 缩放动画：transform.scale.x、transform.scale.y
• 旋转动画：transform.rotation
• 颜色动画：backgroundColor、borderColor
• 淡入淡出动画：opacity
• 高级动画：圆角动画（cornerRadius）、边框动画（borderWidth）、阴影动画（shadowOffset）