一、简介

• 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里面都有用到