一、CoreAnimation 结构
上图就是CoreAnimation 的结构图,
1、CAAnimtaionGroup,CApropertyAnimation ,CATransition 继承于CAAniamtion
2、CABasicAnimation ,CAKeyframeAnimation 继承于CAPropertyAnimation
二、本文主要介绍一下CABasicAnimation(基础动画),CAKeyframeAnimation (关键帧动画),CAAnimtaionGroup(组动画),还有CATransition(转场动画),这几个也是经常使用的动画
1、 基础动画CABasicAnimation
let animation = CABasicAnimation.init(keyPath: "position")
animation.fromValue = NSValue.init(cgPoint: CGPoint(x: 50, y: KH/2 - 75))
animation.toValue = NSValue.init(cgPoint: CGPoint(x:KW - 50, y: KH/2 - 75))
animation.duration = 1
self.squrView.layer.add(animation, forKey: "positionAnimation")
1)keyPath 可以是 ,position(位置)、 opacity (透明度) 、transform.scale(比例) 、transform.rotation.z(旋转)、backgroundColor(背景颜色) 等
2)fillMode 动画结束后的状态类型
kCAFillModeRemoved(动画结束后,layer会恢复到之前的状态)
kCAFillModeForwards (当动画结束后,layer会一直保持着动画最后的状态)
kCAFillModeBackwards (当在动画开始前,你只要把layer加入到一个动画中,layer便立即进入动画的初始状态并等待动画开始)
kCAFillModeBoth (这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态)
3)removedOnCompletion 结束后是否移除
2、帧动画CAKeyframeAnimation
帧动画是CABasicAnimation 动画的扩展,
1)基础动画只有fromValue,toView,而帧动画有一个values数组,里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
2)path属性:让涂层按照路径轨迹移动.
let keyFrameAnimation = CAKeyframeAnimation.init(keyPath: "position")
let value = NSValue.init(cgPoint: CGPoint.init(x: 50, y: KH/2 - 50 ))
let value1 = NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 - 50 ))
let value2 = NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 + 50))
let value3 = NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 + 50 ))
let value4 = NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 - 50))
let value5 = NSValue.init(cgPoint: CGPoint.init(x: KW - 50, y: KH/2 - 50 ))
keyFrameAnimation.values = [value,value1,value2,value3,value4,value5]
keyFrameAnimation.duration = 1
self.squrView.layer.add(keyFrameAnimation, forKey: keyFrameAnimation.keyPath)
3、动画组CAAnimtaionGroup
1)动画组可以把基础动画和关键帧动画结合起来
2)属性说明:animations:用来保存一组动画对象的NSArray
3)组动画可以同时进行,也可以连续进行,可以修改 beginTime 达到效果
let keyFrameAnimation = CAKeyframeAnimation.init(keyPath: "position")
let value = NSValue.init(cgPoint: CGPoint.init(x: 50, y: KH/2 - 50 ))
let value1 = NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 - 50 ))
let value2 = NSValue.init(cgPoint: CGPoint.init(x: KW/3, y: KH/2 + 50))
let value3 = NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 + 50 ))
let value4 = NSValue.init(cgPoint: CGPoint.init(x: KW*2/3, y: KH/2 - 50))
let value5 = NSValue.init(cgPoint: CGPoint.init(x: KW - 50, y: KH/2 - 50 ))
keyFrameAnimation.values = [value,value1,value2,value3,value4,value5]
let scaleAnimation = CABasicAnimation.init(keyPath: "transform.scale")
scaleAnimation.fromValue = 0.8
scaleAnimation.toValue = 2
let rotationAnimation = CABasicAnimation.init(keyPath: "transform.rotation.z")
rotationAnimation.toValue = Double.pi*4
let groupAni = CAAnimationGroup.init()
groupAni.animations = [keyFrameAnimation,scaleAnimation,rotationAnimation]
groupAni.duration = 4
self.squrView.layer.add(groupAni, forKey: "groupAnimation")
4、转场动画CATransition
let animation = CATransition.init()
animation.type = .fade
animation.duration = 1
self.squrView.layer.add(animation, forKey: "fadeAnimation")
属性说明:
type:动画过度类型
subtype:动画过渡方向