关于 Core Animation

Core Animation是一组非常强大的动画处理API,使用它能做出很多优雅的动画效果。能用的动画类有4个子类：CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

开发步骤:

1. 初始化一个动画对象(CAAnimation)并设置一些动画相关属性.

2. 添加动画对象到层(CALayer)中,开始执行动画.

CALayer中很多属性都可以通过CAAnimation实现动画效果, 包括opacity, position, transform, bounds, contents等，具体可以在API文档中查找

通过调用CALayer的addAnimation:forKey:增加动画到层(CALayer)中,这样就能触发动画了.通过调用removeAnimationForKey:可以停止层中的动画.

注：Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.

创建动画时你可能用到的属性

属性 | 解读
----|------|----
Autoreverses | 设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值，过渡平滑
Duration |设定开始值到结束值花费的时间。期间会被速度的属性所影响
RemovedOnCompletion | 这个属性默认为 YES,在指定的时间段完成后,动画就自动的从层上移除了。
FillMode | 这个属性一般和 RemovedOnCompletion 配合使用，保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO
Speed | 默认的值为 1.0.如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟即一半的持续时间。
RepeatCount | 默认的是 0,动画只会播放一次。如果指定一个无限大的重复次数,使用 MAXFLOAT 。这个不应该和 repeatDration 属性一块使用
RepeatDuration | 这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间用完。同上它不应该和 repeatCount 一起使用
FromValue | 设置动画的初始值
ToValue | 设置动画的到达值
TimingFunction | 控制动画运行的节奏. kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉 kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开 kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地 kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。
BeginTime | 可以用来设置动画延迟执行时间，若想延迟1s，就设置为CACurrentMediaTime()+1，CACurrentMediaTime()为图层的当前时间

巧妙的运用这些可以属性实现很棒的动画效果，比如下面：用CABasicAnimation实现的动画

CABasicAnimation动画

简单的呼吸和摇摆动画

animation.gif

简单的代码

 1.呼吸动画
    CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = [NSNumber numberWithFloat:1.0f];
    animation.toValue = [NSNumber numberWithFloat:0.0f];
    animation.autoreverses = YES;    //回退动画（动画可逆，即循环）
    animation.duration = 1.0f;
    animation.repeatCount = MAXFLOAT;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;//removedOnCompletion,fillMode配合使用保持动画完成效果
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [self.alphaTagButton.layer addAnimation:animation forKey:@"aAlpha"];  

2.摇摆动画
    //设置旋转原点
    self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);
    CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //角度转弧度（这里用1，-1简单处理一下）
    rotationAnimation.toValue = [NSNumber numberWithFloat:1];
    rotationAnimation.fromValue = [NSNumber numberWithFloat:-1];
    rotationAnimation.duration = 1.0f;
    rotationAnimation.repeatCount = MAXFLOAT;
    rotationAnimation.removedOnCompletion = NO;
    rotationAnimation.autoreverses = YES;
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    rotationAnimation.fillMode = kCAFillModeForwards;
    [self.sharkTagButton.layer addAnimation:rotationAnimation forKey:@"revItUpAnimation"];
    

陀螺仪&加速仪的动画

ps:好吧 这个属于乱入，和上面的摇摆动画差不多的效果，只是这个是手动的 哈哈

3、陀螺仪&加速仪的动画
    self.motionManager = [[CMMotionManager alloc] init];
    self.motionManager.deviceMotionUpdateInterval = 1.0f/100.0f; //1秒100次
    self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);
    [self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue] withHandler:^(CMDeviceMotion *motion, NSError *error) {
        if(fabs(motion.attitude.roll)<1.0f)
        {
            [UIView animateWithDuration:0.6 animations:^{
                self.sharkTagButton.layer.transform = CATransform3DMakeRotation(-(motion.attitude.roll), 0, 0, 1);
            }];
        }else if (fabs(motion.attitude.roll)<1.5f)
        {
            [UIView animateWithDuration:0.6 animations:^{
                int s;
                if (motion.attitude.roll>0)
                {
                    s=-1;
                }else
                {
                    s = 1;
                }
                self.sharkTagButton.layer.transform = CATransform3DMakeRotation(s*M_PI_2, 0, 0, 1);
            }];
        }
        if ((motion.attitude.pitch)<0)
        {
            [UIView animateWithDuration:0.6 animations:^{
                self.sharkTagButton.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
            }];
        }
        
    }];

Demo地址：
https://github.com/yongliangP/CABasicAnimationDemo

CATransition之简单的转场动画

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。

• 常用动画类型:

注：私有API只能通过字符串使用哈

• 过渡方向参数:

简单的CATransition动画

CATransitionDemo2.gif

-(void)animationWithType:(NSString*)type
{

    //- 创建一个转场动画:
    CATransition *transition = [CATransition animation];
    transition.repeatCount = 5;

    //    - 确定动画类型:
    transition.type = type;
    
    //    - 确定子类型(方向等)
    transition.subtype = kCATransitionFromLeft;
    
    //    - 确定动画时间
    transition.duration = 1;
    
    //    - 添加动画
    [self.imageView.layer addAnimation:transition forKey:nil];
    
}

使用时只用传你的想要的动画类型就好，私有API只能通过字符串使用哈。

[self animationWithType:self.dataArray[indexPath.row]];

DEMO地址：https://github.com/yongliangP/CATransitionDemo

---20160908更新

CAKeyframeAnimation

先看图，就是那个在跑的小圆球，为了方便，把动画集成在了一个Demo里了

ScreenShotDemo2.gif

• 1 .简单介绍

CAKeyframeAnimation是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值，是一种更灵活的动画方式。

• 2 .属性介绍

• 3 .实现

• 3.1 values方式实现

-(void)setUpCAKeyframeAnimationUseValues
{

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    
    animation.keyPath = @"position";
    
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
    
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, 50)];
    
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, kWindowHeight-50)];
    
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, kWindowHeight-50)];
    
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
    
    animation.values = @[value1,value2,value3,value4,value5];
    animation.repeatCount = MAXFLOAT;
    
    animation.removedOnCompletion = NO;
    
    animation.fillMode = kCAFillModeForwards;
    
    animation.duration = 6.0f;
    
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.keyButton.layer addAnimation:animation forKey:@"values"];
    
}

• • 3.2 path方式实现

-(void)setUpCAKeyframeAnimationUsePath
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    
    animation.keyPath = @"position";
    
    CGMutablePathRef path = CGPathCreateMutable();
    
    //矩形线路
    CGPathAddRect(path, NULL, CGRectMake(50,50, kWindowWidth - 100,kWindowHeight - 100));
    
    animation.path=path;
    
    CGPathRelease(path);
    
    animation.repeatCount = MAXFLOAT;
    
    animation.removedOnCompletion = NO;
    
    animation.fillMode = kCAFillModeForwards;
    
    animation.duration = 10.0f;
    
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.keyButton.layer addAnimation:animation forKey:@"path"];


}

• • 3.3 keyTimes演示

-(void)setUpCAKeyframeAnimationUsekeyTimes
{
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
//    animation.keyPath = @"transform.translation.x";
    animation.keyPath = @"position.x";
    animation.values = @[@0, @20, @-20, @20, @0];
    animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
    animation.duration = 0.5;
    animation.additive = YES;
    [self.sharkTagButton.layer addAnimation:animation forKey:@"keyTimes"];

}

---20160921更新

CAAnimationGroup

看图，就是那个下方的小长方形，简单实现

ScreenShotGroupDemo.gif

动画组，顾名思义就是动画的组合，具体动画可以参考上文，不同的脑洞会出现不同的化学反应。

简单示例：

    CABasicAnimation * animationScale = [CABasicAnimation animation];
    animationScale.keyPath = @"transform.scale";
    animationScale.toValue = @(0.1);
    
    CABasicAnimation *animationRota = [CABasicAnimation animation];
    animationRota.keyPath = @"transform.rotation";
    animationRota.toValue = @(M_PI_2);
    
    CAAnimationGroup * group = [[CAAnimationGroup alloc] init];
    group.duration = 3.0;
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    group.repeatCount = MAXFLOAT;
    
    group.animations = @[animationScale,animationRota];
    [self.groupButton.layer addAnimation:group forKey:nil];
 

Demo传送门

附：关于keyPath你可能用到的属性

照例放Demo
Demo地址：
https://github.com/yongliangP/CABasicAnimationDemo
如果你觉得对你有帮助请点喜欢哦，也可以关注我，每周至少一篇技术。
或者关注 我的专题 每周至少5篇更新，多谢支持哈。
(ps:核心动画编程pdf中文版想要的可以私信我）