使用CABasicAnimation的基本使用

CABasicAnimation类的使用方式就是基本的关键帧动画。

所谓关键帧动画，就是将Layer的属性作为KeyPath来注册，指定动画的起始帧和结束帧，然后自动计算和实现中间的过渡动画的一种动画方式。

CABasicAnimation是CAPropertyAnimation的子类, CAPropertyAnimation有一个字符串类型的keyPath属性，我们可以指定CALayer的某个属性名为keyPath，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。

1.CABasicAnimation使用方法

使用方法animationWithKeyPath:对 CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册

// 指定position属性 
 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];

KeyPath常见的值有：

transform.scale = 比例转换

transform.scale.x = 宽的比例转换

transform.scale.y = 高的比例转换

transform.rotation = 旋转一个物体旋转的角度

position = 位置的变换

opacity = 透明度

margin = 布局

zPosition = 翻转

backgroundColor = 背景颜色

cornerRadius = 圆角

borderWidth = 边框宽

bounds = 大小

contents = 内容

contentsRect = 内容大小

frame = 大小位置

hidden = 显示隐藏

mask

masksToBounds

shadowColor

shadowOffset

shadowOpacity

shadowRadius

2.设置动画

设置动画属性

属性	说明
duration	动画的时长
repeatCount	重复的次数。不停重复设置为 HUGE_VALF
repeatDuration	设置动画的时间。在该时间内动画一直执行，不计次数
beginTime	指定动画开始的时间。从开始延迟几秒的话，设置为【CACurrentMediaTime() + 秒数】 的方式
timingFunction	设置动画的速度变化
autoreverses	动画结束时是否执行逆动画
cumulative	这个属性设为YES时在进行重复时会从前一次动画的位置继续进行动画，设为NO后重复动画会从最开始的位置
fromValue	所改变属性的起始值
toValue	所改变属性的结束时的值
byValue	所改变属性相同起始值的改变量

    
    // 动画持续时间
    anim.duration = 2.0;
    
    // position属性值从(50, 50)渐变到(300, 350)
    anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 350)];
    
     //当你设定这个属性为 YES 时,在它到达目的地之后,又会自动的返回原来的位置,并且动画返回。
//    anim.autoreverses=YES;
    
    //这个属性设为YES时在进行重复时会从前一次动画的位置继续进行动画，设为NO后重复动画会从最开始的位置
    anim.cumulative=NO;
    //重复次数为1  就是不重复
    anim.repeatCount = 1;
    //动画开始延迟执行时间
    anim.beginTime = CACurrentMediaTime() + 1;
    

在执行完这个动画在执行完成后又会回到原始的位置，为了防止动画执行完回到开始位置需要设置removeOnCompletion、fillMode这两个属性

  
    //如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用
    anim.removedOnCompletion = NO;
    //动画执行完成后会停留在完成的位置
    /**
     
     kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
     kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
     kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
     kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.
     
     */
    anim.fillMode = kCAFillModeForwards;

动画在执行时还有个属性timingFunction，这个属性可以决定动画执行的速度

    //设置动画的速度变化
    /**
     
     1.kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
     2.kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
     3.kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
     4.kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。
     */
    anim.timingFunction = [CAMediaTimingFunction functionWithName:@"easeIn"];
   

3.最后添加动画设置动画

[self.layer addAnimation:anim forKey:@"anim"];

CABasicAnimation使用示例

使用CABasicAnimation实现提示框动画弹出和动画隐藏 

1). 首先定义一个现实的弹框视图 默认隐藏

    
    //添加视图
    self.popView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 130, 130)];
    self.popView.backgroundColor = [UIColor redColor];
    self.popView.center = self.view.center;
    [self.view addSubview:self.popView];
    self.popView.hidden = true;
    
    //取消按钮
    UIButton *cancelBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, CGRectGetHeight(self.popView.frame)-30, self.popView.frame.size.width/2, 30)];
    [cancelBtn setTitle:@"取消" forState:UIControlStateNormal];
    [cancelBtn addTarget:self action:@selector(cancelButtonMethod) forControlEvents:UIControlEventTouchUpInside];
    [self.popView addSubview:cancelBtn];
    
    //确定按钮
    UIButton *okBtn = [[UIButton alloc]initWithFrame:CGRectMake(self.popView.frame.size.width/2, CGRectGetHeight(self.popView.frame)-30, self.popView.frame.size.width/2, 30)];
    [self.popView addSubview:okBtn];
    [okBtn setTitle:@"确定" forState:UIControlStateNormal];
    [okBtn addTarget:self action:@selector(okButtonMethod) forControlEvents:UIControlEventTouchUpInside];

2). 然后创建给这个视图添加动画

    
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    basicAnimation.delegate = self;
    basicAnimation.keyPath = @"transform.scale";
    //动画的时长
    basicAnimation.duration = 0.3f;
    //所改变属性的起始值
    basicAnimation.fromValue = [NSNumber numberWithFloat:0];
    //所改变属性的结束时的值
    basicAnimation.toValue = [NSNumber numberWithFloat:1.0];
    
    //如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用
    basicAnimation.removedOnCompletion = NO;
    //动画执行完成后会停留在完成的位置
    basicAnimation.fillMode = kCAFillModeForwards;
    //设置动画的速度变化
    basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeIn"];
    
    [self.popView.layer addAnimation:basicAnimation forKey:basicAnimation.keyPath];

3). 在点击弹框上的按钮时这时动画隐藏视图

    
    //消失变小动画
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    basic.delegate = self;
    basic.duration = 0.2;
    basic.fromValue = [NSNumber numberWithFloat:1.0];
    basic.toValue = [NSNumber numberWithFloat:0];
    basic.removedOnCompletion = NO;
    basic.fillMode = kCAFillModeForwards;
    
    //创建自己的 easing 函数。通过传递 cubic Bézier 曲线的两个控制点的 x 和 y 坐标
//    CAMediaTimingFunction *timingFunction = [CAMediaTimingFunction functionWithControlPoints: 0.389 : 0.000 : 0.200 : 1.000];
//    [basic setTimingFunction:timingFunction];
    
    basic.timingFunction = [CAMediaTimingFunction functionWithName:@"easeOut"];
    
    [self.popView.layer addAnimation:basic forKey:basic.keyPath];
    
    //添加渐渐消失效果
    CABasicAnimation *alphaAnima = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAnima.delegate = self;
    alphaAnima.duration = 0.2;
    alphaAnima.fromValue = [NSNumber numberWithFloat:1.0];
    alphaAnima.toValue = [NSNumber numberWithFloat:0];
    alphaAnima.removedOnCompletion = NO;
    alphaAnima.fillMode = kCAFillModeForwards;

    [self.popView.layer addAnimation:alphaAnima forKey:alphaAnima.keyPath];

4). 实现CABasic的代理方法在动画结束时移除动画

   
        [self.popView.layer removeAllAnimations];
        [self.popView removeFromSuperview];
        self.popView = nil;

CABasicAnimation的demo下载