CAPropertyAnimation也是一个抽象类,自身并不能对layer进行动画操作,需要其子类CABasicAnimation和CAKeyframeAnimation来实现动画操作。
属性解读:
属性 | 描述 |
---|---|
keyPath | 指定接收层动画的关键路径(入门篇提供了部分keyPath,敬请参考) |
cumulative | 下一次动画执行是否接着刚才的动画,默认为false |
additive | 如何处理多个动画在同一时间段执行的结果,若为true,同一时间段的动画合成为一个动画,默认为false。(使用 CAKeyframeAnimation 时必须将该属性指定为 true ,否则不会出现期待的结果) |
一、CABasicAnimation(基础动画)
该子类中有三个属性:fromValue、byValue、toValue,主要用来操作缩放、平移和旋转等简单动画。随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值会在任意一个或两个属性值的范围内渐变。
fromValue:keyPath相应属性的初始值
byValue:keyPaht相应属性的相对插值
toValue:keyPath相应属性的结束值
有如下几种情况:
- fromValue和toValue不为nil,keyPath属性值在fromValue与toValue之间渐变
- fromValue和byValue不为nil,keyPath属性值在fromValue与(fromValue+byValue)之间渐变
- byValue和toValue不为nil,keyPath属性值在(toValue-byValue)与toValue之间渐变
- fromValue不为nil,keyPath属性值在fromValue与图层对应当前值之间渐变
- toValue不为nil,keyPath属性值在图层对应当前值与toValue之间渐变
- byValue不为nil,keyPath属性值在图层对应当前值与(图层对应当前值+toValue)之间渐变
注意:value的值可以设置为CATransform3D的对象,实现3D动画效果!
旋转动画
//默认是绕着z轴旋转,也可指定绕某个轴旋转:transform.rotation.x
let animation = CABasicAnimation(keyPath: "transform.rotation")
//只设置toValue,动画会在图层对应当前值与toValue之间渐变
animation.toValue = M_PI * 2
//设置动画重复次数
animation.repeatCount = MAXFLOAT
//设置动画执行时间
animation.duration = 1
//添加动画到layer
redView.layer.addAnimation(animation, forKey: nil)
缩放动画
//transform.scale默认是x,y,z三个方向同时同比例缩放,也可指定某一个方向缩放
let animation = CABasicAnimation(keyPath: "transform.scale")
//只设置fromValue动画会在fromValue与图层对应当前值之前渐变
animation.fromValue = -CGRectGetWidth(view.bounds)
//设置动画重复次数
animation.repeatCount = MAXFLOAT
//设置动画执行时间
animation.duration = 1
//添加动画到layer,添加动画的key可以为nil,也可以为任意值,是用来在CAAnimation协议方法中区分不同动画,相当于UIView的tag
greenView.layer.addAnimation(animation, forKey: nil)
平移动画:
//keyPath可设置为x,y,z在对应方向平移或者直接写成transform.translation,在x和y方向同时平移
let animation = CABasicAnimation(keyPath: "transform.translation.x")
animation.fromValue = -CGRectGetWidth(view.bounds)
animation.toValue = CGRectGetWidth(view.bounds)
//设置动画重复次数
animation.repeatCount = MAXFLOAT
//设置动画执行时间
animation.duration = 1
//添加动画到layer
blueView.layer.addAnimation(animation, forKey: nil)
动画效果图:
二、CAKeyframeAnimation
CALayer的关键帧动画与UIView的关键帧动画类似,UIView的动画可以看做是核心动画的简单封装。关键帧动画的值可以指定为一个值数组或者一个路径,和CABasicAnimation不同的是,关键帧动画在同一时间内对同一layer可以做多种不同动画,并且可以控制各动画的执行节奏。CAKeyframeAnimation常用的两个属性是values和duration,这两个属性就可以简单的设置动画了,其余属性提供了更加细致化,更加强大的功能!
属性解读:
- values:关键帧动画值的数组,当path为nil时设置有效,否则优先选择属性path做动画
- path:动画执行的点路径(通过Core Graphics提供的API来绘制路径),设置了path,values将被忽略
- keyTimes:关键帧动画每帧动画开始执行时间点的数组,取值范围为0~1,数组中相邻两个值必须遵循后一个值大于或等于前一个值,并且最后的值不能为大于1。设置的时候与calculationMode有关,具体请查看文档。未设置时默认每帧动画执行时间平均(公式:总时间/(总帧数-1))。例如,如果你指定了一个5帧,10秒的动画,那么每帧的时间就是2.5秒钟:10 /(5-1)=2.5
- rotationMode:设置路径旋转,当设置path有不同角度时,会自动旋转layer角度与path相切
- timingFunctions:动画执行效果数组,CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn),有kCAMediaTimingFunctionLinear、kCAMediaTimingFunctionEaseIn、kCAMediaTimingFunctionEaseOut、kCAMediaTimingFunctionEaseInEaseOut、kCAMediaTimingFunctionDefault等选项|
- calculationMode:关键帧时间计算方法,每帧动画之间如何过渡,类似与UIView的keyframeAnimation。有kCAAnimationLinear、kCAAnimationDiscrete、** kCAAnimationPaced、 kCAAnimationCubic、 kCAAnimationCubicPaced**等选项
摇一摇
//摇一摇
let shakeAnimation = CAKeyframeAnimation(keyPath: "transform.rotation")
//设置晃动角度
let angle = M_PI_4 / 2
//设置关键帧动画的值
shakeAnimation.values = [angle,-angle,angle]
//设置关键帧动画每帧的执行时间,这里不设置也行,默认平均分配时间
//shakeAnimation.keyTimes = [NSNumber(double: 0), NSNumber(double: 0.5), NSNumber(double: 1)]
//设置动画重复次数,默认为1次
shakeAnimation.repeatCount = MAXFLOAT
//设置动画执行效果
//shakeAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)]
//设置相邻动画过渡方式
//shakeAnimation.calculationMode = kCAAnimationCubic
//添加动画
view1.layer.addAnimation(shakeAnimation, forKey: nil)
贝赛尔曲线画“M”
//创建贝赛尔曲线
let path = UIBezierPath()
//设置动画的执行路径为一个M的形状
path.moveToPoint(CGPoint(x: 40, y: 300))
path.addLineToPoint(CGPoint(x: 80, y: 150))
path.addLineToPoint(CGPoint(x: 120, y: 300))
path.addLineToPoint(CGPoint(x: 160, y: 150))
path.addLineToPoint(CGPoint(x: 200, y: 300))
let bezierAnimation = CAKeyframeAnimation(keyPath: "position")
//由于CAKeyframeAnimation的path为CGPath,所以这里要转换一次
bezierAnimation.path = path.CGPath
//设置动画时间
bezierAnimation.duration = 4
//自动旋转layer角度与path相切
bezierAnimation.rotationMode = kCAAnimationRotateAuto
//设置动画重复次数
bezierAnimation.repeatCount = MAXFLOAT
//设置自动逆向
bezierAnimation.autoreverses = true
view2.layer.addAnimation(bezierAnimation, forKey: nil)
普通路径画圆
let circlePath = CGPathCreateMutable()
CGPathAddEllipseInRect(circlePath, nil, CGRect(x: 375/2, y: 667/2, width: 100, height: 100))
let circleAnimation = CAKeyframeAnimation(keyPath: "position")
circleAnimation.path = circlePath
circleAnimation.duration = 2
circleAnimation.repeatCount = MAXFLOAT
view3.layer.addAnimation(circleAnimation, forKey: nil)
缩放
let scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
scaleAnimation.values = [0.0, 0.4, 0.8, 1.2, 1.6, 1.2, 0.8, 0.4, 0.0]
scaleAnimation.duration = 2
scaleAnimation.autoreverses = true
scaleAnimation.repeatCount = MAXFLOAT
view4.layer.addAnimation(scaleAnimation, forKey: nil)
动画效果图:
结语
简单的介绍了CABasicAnimation和CAKeyframeAnimation的使用方法,希望对看这篇文章的你有些帮助。很多有趣的动画其实就是将普通动画用到极致,这就需要我们多动手去做,多动脑去想。