CoreAnimation-CABasicAnimation

1,114 阅读3分钟

本文详细记录CABasicAnimation的基础用法及API

首先我们来看一下CABasicAnimation的各种属性

初始化:

CABasicAnimation *animation = [CABasicAnimation animation];

属性

keyPath:要修改的属性值,字符串类型

如果动画是添加在普通的CALayer上,则keyPath包含

transform:用来做旋转位移缩放等形变动画,使用频率极高

transform.rotation  和transform.rotation.z效果一样

transform.rotation.x  按x轴旋转的弧度

transform.rotation.y  按y轴旋转的弧度

transform.rotation.z  按z轴旋转的弧度

transform.scale       整体比例放大缩小、

transform.scale.x     在x轴按比例放大缩小

transform.scale.y     在y轴按比例放大缩小

transform.scale.z     在z轴按比例放大缩小

transform.translation x,y坐标均发生改变

transform.translation.x 延x轴平移

transform.translation.y 延y轴平移

transform.translation.z 延z轴平移

anchorPoint:轴点位置,使用频率极低

backgroundColor:背景色,使用频率一般

borderColor:边框颜色,使用频率低

borderWidth:边框宽度,使用频率低

bounds:layer的大小,使用频率低

contents:内容,layer可以通过这个属性设置寄宿图,使用频率低

contentsRect:内容尺寸,使用频率低

cornerRadius:圆角,使用频率低

zPosition:z轴位置,使用频率低

hidden:显示隐藏,使用频率低

mask:遮罩,使用频率一般

masksToBounds:是否剪裁,使用频率低

opacity:透明度,使用频率高

position:中心点位置,可以用来做位移,使用频率高

shadowColor:阴影颜色,使用频率低

shadowOffset:阴影位置,使用频率低

shadowOpacity:阴影透明度,使用频率低

shadowPath:阴影路径,使用频率低

shadowRadius:阴影路径,使用频率低

sublayers:子图层,使用频率低

sublayerTransform:

如果动画添加在CAEmitterLayer(用来做粒子动画)上,则keyPath包含

emitterPosition:粒子发射形状的中心点

emitterZPosition:粒子发射形状中心点在Z轴的位置

emitterSize:发射源的尺寸大小

如果动画添加在CAGradientLayer(用来做渐变)上,则keyPath包含

colors:颜色数组

locations:位置数组

endPoint:结束点的坐标,相对坐标[0,1]

startPoint,开始点的坐标,相对坐标[0,1]

如果动画用在CAReplicatorLayer(用来快速复制图层)上,则keyPath包含

instanceDelay:延迟动画时间

instanceTransform:

instanceRedOffset

instanceGreenOffset

instanceBlueOffset

instanceAlphaOffset

如果动画用在CAShapeLayer(经常配合CAKeyFrameAnimation做路径动画)上,则keyPath包含

fillColor:填充颜色

lineDashPhase:虚线样式

lineWidth:路径的线宽

miterLimit:相交长度的最大值

strokeColor:描边颜色

strokeStart:描边颜色开始,从无到右

strokeEnd:描边颜色结束,从有到无

如果是用在CATextLayer(轻量级的文字渲染图层,可以代替UILabel做优化),则keyPath包含

fontSize:字体大小

foregroundColor:字体颜色

timingFunction:动画的速度变化可以通过下面的API设置

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];

CAMediaTimingFunctionName包含了:

kCAMediaTimingFunctionLinear:线性动画 匀速

kCAMediaTimingFunctionEaseIn:慢开始

kCAMediaTimingFunctionEaseOut:慢结束

kCAMediaTimingFunctionEaseInEaseOut:慢开始 慢结束、

kCAMediaTimingFunctionDefault:和kCAMediaTimingFunctionEaseInEaseOut很相似,一般很少用

fillMode:包含下面几种

kCAFillModeForwards:对应toValue:动画结束后,图层保持toValue状态

kCAMediaTimingFillMode:对应fromValue:动画前,图层一直保持fromValue状态

kCAFillModeBoth:fromValue和toValue:以上两者的结合

kCAFillModeRemoved:动画结束后图层恢复原来的状态

fromValue:动画开始的值

toValue:要到达的值

duration:动画时间

removedOnCompletion:动画结束后是否移除

repeatCount:重复次数

beginTime:动画开始的时间

autoreverses:是否执行逆动画

二.接下来我们通过几个案例把CABasicAnimation用起来

平移动画

首先创建一个CALayer:

CALayer *layer = [CALayer layer];

self.redLayer = layer;

layer.frame = CGRectMake(100, 100, 100, 100);

layer.backgroundColor = [UIColor redColor].CGColor;

[self.view.layer addSublayer:layer];

创建动画,通过修改position.y进行平移(还可以通过修改transform.translation.y进行平移动画)

CABasicAnimation *animation = [CABasicAnimation animation];

animation.keyPath = @"position.y";

animation.toValue = @400;

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeBoth;

最后往CALayer图层上添加动画

[self.redLayer addAnimation:animation forKey:@"basic"];

旋转动画:

CABasicAnimation *animation = [CABasicAnimation animation];

animation.keyPath = @"transform.rotation.z";

animation.toValue = @M_PI_2;

animation.duration = 1;

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeBoth;

[self.redLayer addAnimation:animation forKey:@"basic"];

缩放动画:

[**self**.redLayer removeAnimationForKey:@"keyframeAnimation"];

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

animation.keyPath = @"transform.scale";

animation.duration = 2;

animation.values = @[@1.5f, @1.f, @1.2f, @1.f];

//keyTimes属性指定的是当前状态节点到初始状态节点的时间占动画总时长的比例。若果不设置keyTimes则匀速播放

animation.keyTimes = @[@0.f, @0.16f, @0.28f, @0.4f];

animation.removedOnCompletion = **YES**;

animation.fillMode = kCAFillModeForwards;

[self.redLayer addAnimation:animation forKey:@"keyframeAnimation"];