iOS开发之核心动画（Core Animation）

一、概述
框架

         Core Animation是一个图形渲染和动画的底层框架，用于 iOS和Mac OS X。能够提供专业级的动画效果，是高层图形技术的基础。测试

二、CALayer类
动画

        在介绍CALayer以前先了解一下整个iOS系统中界面元素的基础UIView,在iOS中，全部的界面视图都继承于UIView。UIView又是由Core Animation实现的，由于UIView的界面渲染是由CALayer类控制的。UIView的子视图是知足树形结构的，即底层的主View能够添加不少子View，CALayer一样能够。spa

       CALayer层大体能够分为三种类型，纯色层，图片层，文字层。附上事例代码和效果图以下：code

<span style="font-size:14px;">//纯色层
    CALayer *pureLayer = [[CALayer alloc]init];
    [pureLayer setFrame:CGRectMake(40, 200, 60, 60)];
    pureLayer.backgroundColor = [[UIColor redColor]CGColor];//图层颜色
    pureLayer.cornerRadius = 30.f;//角圆滑度
    pureLayer.borderWidth = 3.f;//外边框宽度
    pureLayer.borderColor = [[UIColor greenColor] CGColor];//外边框颜色
    pureLayer.opacity = 0.5f;//透明度
    pureLayer.shadowOpacity = 0.5f;//阴影
    pureLayer.shadowRadius = 5.f;//控制阴影部分的清晰度
//    pureLayer.masksToBounds = YES;
    //是否关闭边缘遮罩
    pureLayer.shadowOffset = CGSizeMake(3, 3);//边缘遮罩的偏移量
    [self.view.layer addSublayer:pureLayer];
    
    //图片层
    CALayer *imageLayer = [[CALayer alloc]init];
    [imageLayer setFrame:CGRectMake(140, 130, 130, 200)];
    imageLayer.contents = (id)[[UIImage imageNamed:@"IMG_1314.JPG"] CGImage];
    [self.view.layer addSublayer:imageLayer];
    
    //建立带有文字的层  添加到其余layer中
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.string = @"Hello";
    textLayer.foregroundColor = [[UIColor blackColor]CGColor];
    textLayer.frame = CGRectMake(40, 400, 150, 50);
    [self.view.layer addSublayer:textLayer];</span>

三、CATransform3D
orm

        CATransform3D是一个4x4的矩阵，一个描述3D图变形的参数结构体。CATransform3D的使用有两个须要注意的地方。blog

CATransform3DMakeRotation/Scale/Translation 这组方法在定制常量的基础上作变换。CATransform3DScale/Rotate/Translate这组方法是在出入的值的基础上进行变形。
继承

四、动画图片

        在Core Animation中，动画抽象出来一个父类CAAnimation,通常并不直接使用该类实现动画，而是使用它的子类来实现动画操做。经常使用的两个用于设置动画的子类为CABasicAnimation（基础动画）和CAKeyframeAnimation（关键帧动画）。ci

3.一、CABasicAnimation

        基础动画能够实现视图的缩放、旋转、透明度变化。使用 CABasicAnimation的关键是设置好fromValue和toValue,下面对上面的图片添加基础动画：

<span style="font-size:14px;">//动画
    //一、旋转
    CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform"];
    rotation.fromValue = [NSValue valueWithCATransform3D:imageLayer.transform];
    rotation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(imageLayer.transform, M_PI, 1.0, 1.0, 1.0)];
    rotation.duration = 3.0;
    rotation.repeatCount = HUGE;
    rotation.fillMode = kCAFillModeForwards;
    rotation.cumulative = YES;
    
    //二、缩放
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    scaleAnimation.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeScale(0.1, 0.1, 1)];
    scaleAnimation.duration = 1.0;
    scaleAnimation.repeatDuration = HUGE;
    
    //三、透明度
    CABasicAnimation *alanimation =[CABasicAnimation animationWithKeyPath:@"opacity"];
    alanimation.fromValue = [NSNumber numberWithFloat:1.0f];
    alanimation.toValue = [NSNumber numberWithFloat:0.0f];//这是透明度。

    //圆盘缩放
    [pureLayer addAnimation:scaleAnimation forKey:nil];
    //(图层变淡而且旋转)动画族
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[rotation,alanimation];
    group.duration = 5.0;
    group.repeatCount = HUGE;
    group.removedOnCompletion = NO;
    [imageLayer addAnimation:group forKey:nil];
    //文字层添加透明度动画
    alanimation.duration = 2.0;
    alanimation.repeatCount = HUGE;
    [textLayer addAnimation:alanimation forKey:nil];</span>

须要注意一下，经屡次测试发现旋转动画和缩放动画做用于同一个视图时，两种动画的效果不会同时展示出来。

3.2 CAKeyframeAnimation

        关键帧动画能够实现自定义动画功能，可让视图按照指定的路径进行动画，也能够在指定的时间点设置动画参数（即values和keyTimes的对应）（角度，放大缩小比例，透明度等）。下面咱们对上面已经存在的红点视图进行按指定路径移动的动画操做。对文字层 hello进行控制其透明度变化速度的动画。

<span style="font-size:14px;">//关键帧动画（自定义路径）
    UIBezierPath *thePath = [UIBezierPath bezierPath];
    [thePath moveToPoint:CGPointMake(10, 100)];
    [thePath addCurveToPoint:CGPointMake(200, 100) controlPoint1:CGPointMake(60, 70) controlPoint2:CGPointMake(80, 200)];
    [thePath addLineToPoint:CGPointMake(250, 500)];
    [thePath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(100, 200)];
    //建立关键帧
    CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 设置属性
    moveAnimation.path = thePath.CGPath;
    moveAnimation.duration = 4.0;
    moveAnimation.repeatCount = HUGE;
    [pureLayer addAnimation:moveAnimation forKey:nil];


    //关键帧动画（分时间点设置）
    //values
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    CATransform3D scale1 = CATransform3DMakeScale(1.3, 1.3, 1);
    CATransform3D scale2 = CATransform3DMakeScale(1.5, 1.5, 1);
    CATransform3D scale3 = CATransform3DMakeScale(1.5 - 0.3f, 1.5 - 0.3f, 1);
    CATransform3D scale4 = CATransform3DMakeScale(1, 1, 1);
    NSArray *frameValues = [NSArray arrayWithObjects:
                            
                            [NSValue valueWithCATransform3D:scale1],
                            
                            [NSValue valueWithCATransform3D:scale2],
                            
                            [NSValue valueWithCATransform3D:scale3],
                            
                            [NSValue valueWithCATransform3D:scale4],
                            
                            nil];
    [animation setValues:frameValues];
    //keyTimes
    NSArray *frameTimes = [NSArray arrayWithObjects:
                           
                           [NSNumber numberWithFloat:0.1],
                           
                           [NSNumber numberWithFloat:0.2],
                           
                           [NSNumber numberWithFloat:0.4],
                           
                           [NSNumber numberWithFloat:0.8],
                           
                           nil];
    [animation setKeyTimes:frameTimes];
    animation.duration = 4;
    animation.repeatCount = HUGE;
    [textLayer addAnimation:animation forKey:nil];
</span>