CABasicAnimation动画和keypath说明
一、简介
- CABasicAnimation是
CAPropertyAnimation的子类, CAPropertyAnimation有一个字符串类型的keyPath属性
结构图-1
-
keyPath内容是CALayer的可动画Animatable属性，可动画属性可见CAlayer篇 -
我们可以指定CALayer的某个属性名为
keyPath，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。 -
例如：指定keyPath = @"position"，就会修改CALayer的position属性的值，- > 可以实现平移的动画效果
-
属性说明: fromValue：keyPath相应属性的初始值，toValue：keyPath相应属性的结束值
-
因此，初始化好CAPropertyAnimation的子类对象后，必须先设置keyPath（修改的是CALayer的哪个属性）-> 指明执行的是怎样的动画（平移/缩放/旋转等）
-
随着动画的进行，在长度为
duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue -
keyPath内容是CALayer的可动画Animatable属性 -
如果
fillMode=kCAFillModeForwards同时removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。
属性说明：
-
duration
动画时长 -
fromValue
动画起始的位置，根据keyPath的值不一样，这里的值也不一样；比如keyPath是position的时候，fromValue的值就是[NSValue valueWithCGPoint:<#(CGPoint)#>]; -
toValue
动画结束位置,和fromValue的值一致 -
repeatCount
动画执行次数 -
Autoreverses
当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到 开始的值。 -
removedOnCompletion
这个是在动画结束后，是否会回到开始的值，默认是YES。如果设置为NO，则动画结束后，会保持动画结束后的形态，但layer的相关属性值并没有改变 -
Duration
Duration 这个参数你已经相当熟悉了。它设定开始值到结束值花费的时间。期间会被速度的属性所影响。RemovedOnCompletion这个属性默认为 YES,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。
假如你想要再次用这个动画时,你需要设定这个属性为 NO。这样的话,下次你在通过-set 方法设定动画的属 性时,它将再次使用你的动画,而非默认的动画。
-
Speed
默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。 这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的 持续时间。 -
BeginTime
这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。默认的是 0.0.组 动画在下个段落中讨论“Animation Grouping”。 -
TimeOffset
如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝 了。 -
RepeatCount
默认的是 0,意味着动画只会播放一次。如果指定一个无限大的重复次数,使用 1e100f。这个不应该和 repeatDration 属性一块使用。 -
RepeatDuration
这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用。
keyPath属性说明：
transform.scale = 比例转换
transform.rotation = 旋转
transform.rotation.x = x轴旋转
transform.rotation.y = y轴旋转
opacity = 透明度
margin = 边距
position ＝ 位移
backgroundColor = 背景颜色
cornerRadius = 圆角
borderWidth ＝ 边框宽度
bounds ＝ 位置，体积
contents ＝ 内容
contentsRect ＝ 面积
frame ＝ 位置，体积
hidden ＝ 是否隐藏
shadowColor ＝ 阴影颜色
shadowOffset ＝ 阴影偏移
shadowOpacity ＝ 阴影透明
shadowRadius ＝ 阴影半径
CABasicAnimation应用：
直线进度条：
/*直线进度条*/
- (CAShapeLayer *)lineAnimationLayer
{
if(!_lineAnimationLayer){
_lineAnimationLayer = [CAShapeLayer layer];
_lineAnimationLayer.strokeColor = [UIColor greenColor].CGColor;
_lineAnimationLayer.lineWidth = 5;
// 设置路径
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 200)];
[path addLineToPoint:CGPointMake(300, 200)];
_lineAnimationLayer.path = path.CGPath;
/*动画,keyPath是系统定的关键词，可以自己去帮助文档里面查看*/
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
// animation的动画时长
animation.duration = 4.0;
// 动画的其实位置
animation.fromValue = @(0);
// 动画的结束位置
animation.toValue = @(1);
// 动画执行次数
animation.repeatCount = MAXFLOAT;
// 添加动画并设置key；这个key值是自己定义的
[_lineAnimationLayer addAnimation:animation forKey:@"lineAnimationLayer"];
}
return _lineAnimationLayer;
}
执行结果：
进度条.gif
边框环绕效果
实现代码：
/**
* 跑马灯二（shaperLayer）
*/
-(void)marquee2{
//创建一个shaperLayer
CAShapeLayer *shaperLayer = [CAShapeLayer layer];
shaperLayer.bounds = CGRectMake(0, 0, 10, 5);
shaperLayer.position = CGPointMake((kWidth-300)/2, (kHeight-200)/2);
shaperLayer.strokeColor = [UIColor whiteColor].CGColor;
shaperLayer.fillColor = [UIColor clearColor].CGColor;
shaperLayer.lineDashPattern = @[@(10),@(10)];
// 虚线结尾处的类型
shaperLayer.lineCap = kCALineCapRound;
// 拐角处layer的类型
shaperLayer.lineJoin = kCALineJoinRound;
shaperLayer.lineWidth = 5;
//创建动画路径
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 300, 200)];
shaperLayer.path = path.CGPath;
// CGPathRelease(path.CGPath);
CAKeyframeAnimation *animation2 = [CAKeyframeAnimation animationWithKeyPath:@"strokeEnd"];
animation2.duration = 8;
animation2.repeatCount = MAXFLOAT;
animation2.values = @[@(0),@(1),@(0)];
animation2.removedOnCompletion = NO;
animation2.fillMode = kCAFillModeForwards;
/**
* 上述的animation2的动画和效果和下面的animation动画效果是一样的
*/
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 4;
animation.repeatCount = MAXFLOAT;
animation.fromValue = @(0);
animation.toValue = @(1);
// 这个设置是在一个动画完成时，是否需要反向动画，默认是NO
animation.autoreverses = YES;
[shaperLayer addAnimation:animation forKey:nil];
[self.layer addSublayer:shaperLayer];
}
实现效果：
边框环绕.gif
边框环绕二
原理：用到两个shaperLayer来实现，利用CAAnimationDelegate代理方法做处理
.h文件
/*第一个shaperLayer*/
@property (nonatomic,strong) CAShapeLayer *shaperLayer1;
/*第二个shaperLayer*/
@property (nonatomic,strong) CAShapeLayer *shaperLayer2;
/*第一个shaperLayer的动画*/
@property (nonatomic,strong) CABasicAnimation *animation1;
/*第二个shaperLayer的动画*/
@property (nonatomic,strong) CABasicAnimation *animation2;
.m文件
/*无到有的shaper*/
- (CAShapeLayer *)shaperLayer1
{
if(!_shaperLayer1){
_shaperLayer1 = [CAShapeLayer layer];
// shaperLayer1.position = CGPointMake((kWidth-300)/2, (kHeight-200)/2);
_shaperLayer1.strokeColor = [UIColor whiteColor].CGColor;
_shaperLayer1.fillColor = [UIColor clearColor].CGColor;
_shaperLayer1.lineDashPattern = @[@(8)];
// 结尾处的类型
_shaperLayer1.lineCap = kCALineCapRound;
// 拐角处的类型
_shaperLayer1.lineJoin = kCALineJoinRound;
_shaperLayer1.lineWidth = 5;
}
return _shaperLayer1;
}
/*有到无shaper*/
- (CAShapeLayer *)shaperLayer2
{
if(!_shaperLayer2){
_shaperLayer2 = [CAShapeLayer layer];
// shaperLayer2.position = CGPointMake((kWidth-300)/2, (kHeight-200)/2);
_shaperLayer2.strokeColor = [UIColor whiteColor].CGColor;
_shaperLayer2.fillColor = [UIColor clearColor].CGColor;
_shaperLayer2.lineDashPattern = @[@(8)];
// 结尾处的类型
_shaperLayer2.lineCap = kCALineCapRound;
// 拐角处的类型
_shaperLayer2.lineJoin = kCALineJoinRound;
_shaperLayer2.lineWidth = 5;
}
return _shaperLayer2;
}
/*注释*/
- (CABasicAnimation *)animation1
{
if(!_animation1){
_animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
_animation1.duration = 4;
_animation1.fromValue = @(0);
_animation1.toValue = @(1);
_animation1.repeatCount = 1;
_animation1.removedOnCompletion = NO;
_animation1.fillMode = kCAFillModeForwards;
_animation1.delegate = self;
[_animation1 setValue:@"animation1" forKey:@"animation1"];
}
return _animation1;
}
/*注释*/
- (CABasicAnimation *)animation2
{
if(!_animation2){
_animation2 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
_animation2.fromValue = @(1);
_animation2.toValue = @(0);
_animation2.duration = 4;
_animation2.repeatCount = 1;
// _animation2.autoreverses = YES;
_animation2.removedOnCompletion = NO;
_animation2.fillMode = kCAFillModeBackwards;
_animation2.delegate = self;
[_animation2 setValue:@"animation2" forKey:@"animation2"];
}
return _animation2;
}
- (void)marquee3{
// 创建路径
UIBezierPath * path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(20, 200)];
[path1 addLineToPoint:CGPointMake(300, 200)];
[path1 addLineToPoint:CGPointMake(300, 400)];
[path1 addLineToPoint:CGPointMake(20, 400)];
[path1 closePath];
self.shaperLayer1.path = path1.CGPath;
UIBezierPath * path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(20, 200)];
[path2 addLineToPoint:CGPointMake(20, 400)];
[path2 addLineToPoint:CGPointMake(300, 400)];
[path2 addLineToPoint:CGPointMake(300, 200)];
[path2 closePath];
self.shaperLayer2.path = path2.CGPath;
// 创建动画
[self.shaperLayer1 addAnimation:self.animation1 forKey:@"animation1"];
[self.layer addSublayer:self.shaperLayer1];
[self.layer addSublayer:self.shaperLayer2];
self.shaperLayer2.opacity = 0;
}
//动画开始
- (void)animationDidStart:(CAAnimation *)anim{
}
//动画结束
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//判断是不是第一个动画
if ([[anim valueForKey:@"animation1"] isEqualToString:@"animation1"]) {
self.shaperLayer1.opacity = 0;
//shaperLayer1删除掉所有动画
[self.shaperLayer1 removeAnimationForKey:@"animation1"];
[self.shaperLayer2 addAnimation:self.animation2 forKey:@"animation2"];
self.shaperLayer2.opacity = 1;
}else{
self.shaperLayer2.opacity = 0;
//shaperLayer2删除所有的动画
[self.shaperLayer2 removeAllAnimations];
[self.shaperLayer1 addAnimation:self.animation1 forKey:@"animation1"];
self.shaperLayer1.opacity = 1;
}
}
上述代码有一段下面的代码：
[self.shaperLayer2 removeAllAnimations];
一般在动画结束后，layer会自动删除掉自己的animation。但是在你设置了animation的removedOnCompletion属性为NO的时候，就需要自己删除掉layer的animation。removeAllAnimations和removeAnimationForKey不仅有表面的意思删除掉动画，还有起到暂停动画的效果，在动画过程中实现这个，会使动画暂停；
调用：
[self marquee3];
实现效果：
边框环绕2.gif
这个动画中间会跳动一下，目前要想实现这个效果，没有想到其他方法，有想法的朋友可以告知下，这里感谢不已。
最后
这里说一个研究过程中遇到的一个问题：
问题：animation动画结束后，会闪回到最开始状态，然后消失
解决这个问题，首先要在创建animation的时候，设置两个属性值。分别为：
//这个属性表示的是动画结束后是否回到开始的状态，默认是YES
animation.removedOnCompletion = NO;
//这个描述的是动画填充方式
animation.fillMode = kCAFillModeForwards;
fillMode 有下面几个状态值：
-
kCAFillModeRemoved这个是默认值，也就是说当动画开始前和动画结束后，动画对layer都没有影响，动画结束后，layer会恢复到之前的状态 -
kCAFillModeForwards当动画结束后，layer会一直保持着动画最后的状态 -
kCAFillModeBackwards在动画开始前，只需要将动画加入了一个layer，layer便立即进入动画的初始状态并等待动画开始。 -
kCAFillModeBoth这个其实就是上面两个的合成，动画加入之后在开始之前，layer便处于动画初始状态，动画结束后layer保持动画最后的状态
其他的动画效果可以自己尝试下。
CABasicAnimation的具体应用在后续的CALayer、CAShaperLayer里面都有用到
