总结内容
1. 掌握UIView显示层动画和CALayer内容层动画区别
2. 理解Core Animation核心动画架构
3. CALayer内容层动画合集
内容层动画具有和显示层动画类似的初级动画效果，但除此之外，其利用内容层的一些特殊属性还可以实现各种高级的效果 比如环形动画 , 圆角动画等。
1. UIView 和 CALayer 的区别（当然他们两个的区别远不止这些 以下是比较突出的区别）
- UIView 继承自UIResponder 因此UIView是可以处理响应事件的，而CALayer继承自NSObject, 所以它只负责内容的创建 和绘制。
- UIView负责对内容的管理， CALayer负责内容的绘制
- UIView中的位置属性只有frame , bounds , center, 而CALayer除了具备这些属性之外还有anchorPoint , position
2.Core Animation 核心动画
Core Animation为IOS核心动画 它提供了一组丰富的API可以用于制作各种高级动画。Core Animation来自QuartzCore.framework框架 它具有以下特点
1 . 直接作用于CALayer图层上，而非UIView上；
2 . Core Animation的执行过程在后台执行，不阻塞主线程；
3 . 可以利用CALayer绝大多数数学制作高级动画效果；
下面来看看CoreAnimation 下各种常用动画类的继承关系 如下
截屏2020-08-22 上午11.50.11.png
3.CALayer 层动画使用实例 我把代码也贴出来了自测了一下是没多大毛病的；
var loginBtn : UIButton?
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
// Do any additional setup after loading the view.
/**
Core Animation CABasicAnimation 核心动画
*/
loginBtn = UIButton(frame: CGRect(x: 20, y: 230, width: self.view.frame.width-20*2, height: 50))
loginBtn?.backgroundColor = UIColor(red: 50/255.0, green: 185/255.0, blue: 170/255, alpha: 1.0)
loginBtn?.setTitle("登陆", for: .normal);
self.view.addSubview(loginBtn!)
}
1. 移动动画
let animation:CABasicAnimation = CABasicAnimation()
animation.keyPath = "position"
if let btn = loginBtn {
let positionX:CGFloat = btn.frame.origin.x + 0.5 * btn.frame.size.width;
let positionY:CGFloat = btn.frame.origin.y + 0.5 * btn.frame.size.height + 100;
animation.toValue = NSValue(cgPoint: CGPoint(x: positionX, y: positionY))
animation.duration = 2.0
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
}
2. 缩放动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "transform.scale.x"
animation.fromValue = 1.0
animation.toValue = 0.8
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
3. 旋转动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "transform.rotation"
// animation.fromValue = 1.0
animation.toValue = 3.14/2
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
4. 位移动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "transform.translation.y"
// animation.fromValue = 1.0
animation.toValue = 100
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
5. 圆角动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "cornerRadius"
// animation.fromValue = 1.0
animation.toValue = 15
animation.duration = 2
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
6. 边框动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "borderWidth"
// animation.fromValue = 1.0
animation.toValue = 10
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
7. 颜色渐变动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "backgroundColor"
animation.fromValue = UIColor.green.cgColor
animation.toValue = UIColor.red.cgColor
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
8.淡入淡出动画
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "opacity"
animation.fromValue = UIColor.green.cgColor
animation.toValue = 1.0
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)
9. 阴影渐变动画
loginBtn?.layer.shadowColor = UIColor.red.cgColor
loginBtn?.layer.shadowOpacity = 0.5
let animation: CABasicAnimation = CABasicAnimation()
animation.keyPath = "shadowOffset"
animation.toValue = NSValue(cgSize:CGSize(width: 10, height: 10))
animation.duration = 3
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
loginBtn?.layer.add(animation, forKey: nil)