iOS动画之核心动画

一、概念

先看一个问题:UIView和CALayer之间的关系?
1、UIView主要是界面的展示,处理用户的交互,如处理手势等。CALayer才是真正的绘制
2、UIView封装了CALayer
3、他们所具有的位置相关的属性不一样,UIView具有的属性CALayer都具有,额外还多一个anchorPoint,下面的文章会具体讲到这一点

1、CALayer的概念
CALayer属于QuartzCore框架,QuartzCore是一个跨平台的框架。也就是说mac和iOS是同一种绘制方式,只是不同的交互方式。mac的交互方式主要是鼠标和键盘,而iOS的交互方式主要是手势。

2、隐式动画和显式动画
隐式动画是系统框架自动完成的。Core Animation在每个runloop周期中自动开始一次新的事务,即使你不显式的用[CATransaction begin]开始一次事务,任何在一次runloop循环中属性的改变都会被集中起来,然后做一次0.25秒的动画。隐式动画一直存在。
比如,修改一个view的frame、backgroundColor都存在一个隐式动画,使得这些改变不那么突兀,这个动画持续时间默认是0.25s
显式动画是Core Animation提供的显式动画类型,既可以直接对退曾属性做动画,也可以覆盖默认的图层行为。我们经常使用的CABasicAnimation,CAKeyframeAnimation,CATransitionAnimation,CAAnimationGroup等都是显式动画类型,这些CAAnimation类型可以直接提交到CALayer上。

二、CAAnimation

iOS动画之核心动画_第1张图片
CoreAnimation

基础动画常见的动画有:基础动画、关键帧动画、动画组、转场动画。均继承自CAAnimation类,其继承关系如下


iOS动画之核心动画_第2张图片
CAAnimation

三、几种显示动画

1、基础动画CABasicAnimation

创建动画的三步骤:
初始化动画对象、
修改动画属性值、
将动画添加到layer上

    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"position.y";
    anim.toValue = @400;
    anim.duration = 1;
    // 下面两句为了让动画能够保持在最后的状态
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.delegate = self;
    [_redView.layer addAnimation:anim forKey:nil]; 

打印动画前后模型图层(modelLayer)和呈现图层(presentationLayer)的frame


iOS动画之核心动画_第3张图片
frame

可见,只有呈现图层的坐标变了。因为presentationLayer负责显示的。所以,看到的都是假象,通过改变keyPath后UIView并没有发生变化。

2、关键帧动画CAKeyframeAnimation

方式一:通过设置values来实现

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"transform.rotation";
    anim.values = @[@angleToRadians(-3), @angleToRadians(3),@angleToRadians(-3)];
    anim.autoreverses = YES;
    anim.speed = 2;
    anim.duration = 1;
    anim.repeatCount = MAXFLOAT;
    [_iconView.layer addAnimation:anim forKey:nil];

这段代码可以让某个view小角度抖动,这是关键帧动画最基本的使用方式

方式二:通过设置path来实现

    #define angleToRadians(angle) ((angle)/180.0 * M_PI)
    //  绘制贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(20, 200)];
    [path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(100, 100) controlPoint2:CGPointMake(200, 300)];
    //  将贝塞尔曲线显示在图层
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = nil;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    //  小车的layer添加在图层
    CALayer *carLayer = [CALayer layer];
    carLayer.frame = CGRectMake(15, 200-18, 36, 36);
    carLayer.contents = (id)[UIImage imageNamed:@"car"].CGImage;
    carLayer.anchorPoint = CGPointMake(0.5, 0.8);
    [self.view.layer addSublayer:carLayer];
    //  小车的layer添加动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"position";
    anim.path = path.CGPath;
    anim.duration = 4.0;
    anim.rotationMode = kCAAnimationRotateAuto;
    [carLayer addAnimation:anim forKey:nil];

这段代码可以让一个小车的layer沿着贝塞尔曲线运动。

这里我们用到了CAShapeLayer,是一个画矢量图的类,内部启用了硬件加速,所以渲染快速。

为了让小车显得真实调整了锚点anchorPoint。

补充几个知识点:
1、frame和bounds的宽高是一样吗?
正常情况下是一样的,但是做了仿射变化(旋转等)就不一样了
2、UIView和CALayer关于坐标具有的属性:
UIView: frame bounds center
CALayer: frame bounds position anchorPoint
position和center对应,可见UIView具有的属性CALayer也同样具有。不同点在于layer多了个anchorPoint,anchorPoint默认值是(0.5,0.5)。放射变换都是基于锚点为中心变化的

3、转场动画CATransition

    // 修改图片
    _imgView.image = [UIImage imageNamed:imgName];
    // 添加转场动画
    CATransition *anim = [CATransition animation];
    anim.type = @"pageCurl";
    anim.duration = .8;
    anim.startProgress = .2;
    anim.endProgress = .5;
    [_imgView.layer addAnimation:anim forKey:nil];

转场动画默认是fade,即淡入淡出。
系统提供的转场动画有

类型字符串 效果说明 关键字 方向
fade 交叉淡化过度 YES
push 新视图把旧视图推出去 YES
moveIn 新视图移到旧视图上面 YES
reveal 将旧视图移开,显示下面的新视图 YES
cube 立体翻滚效果
oglFlip 上下左右翻滚效果
suckEffect 搜索效果,如一块布被抽走 NO
rippleEffect 水滴效果 NO
pageCurl 向上翻页效果
pageUnCurl 向下翻页效果
cameraIrisHollowOpen 相机镜头打开效果 NO
cameraIrisHollowClose 相机镜头关闭效果 NO

4、动画组CAAnimationGroup

    // 绘制贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50, 500)];
    [path addCurveToPoint:CGPointMake(400, 500) controlPoint1:CGPointMake(170, 400) controlPoint2:CGPointMake(300, 600)];
    // 添加到layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = nil;
    shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    // 添加redview
    CALayer *colorLayer = [CALayer layer];
    colorLayer.frame = CGRectMake(0, 0, 66, 66);
    colorLayer.position = CGPointMake(50, 500);
    colorLayer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:colorLayer];
    // redview添加关键帧动画改变移动路径
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.path = path.CGPath;
    anim.keyPath = @"position";
//    anim.duration = 3;
//    [colorLayer addAnimation:anim forKey:nil];
    
    // redview添加基础动画改变颜色
    CGFloat red = arc4random() / (CGFloat)INT_MAX;
    CGFloat green = arc4random() / (CGFloat)INT_MAX;
    CGFloat blue = arc4random() / (CGFloat)INT_MAX;
    UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:1];
    CABasicAnimation *basicAnim = [CABasicAnimation animation];
    basicAnim.keyPath = @"backgroundColor";
    basicAnim.toValue = (id)color.CGColor;
//    basicAnim.duration = 3;
//    [colorLayer addAnimation:basicAnim forKey:nil];
    
    // 改变大小
    CABasicAnimation *anim1 = [CABasicAnimation animation];
    anim1.keyPath = @"transform.scale";
    anim1.toValue = @.5;
//    anim1.duration = 3;
//    [colorLayer addAnimation:anim1 forKey:nil];
    
    // 将上面的三个动画和成为一个动画组
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[anim, basicAnim, anim1];
    group.duration = 3;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    [colorLayer addAnimation:group forKey:nil];

可见,我们其实可以在colorLayer上单独加三个动画可以实现。但是会发现duration等属性一直在重复设置,显得过于繁琐。所以我们可以用动画组,将三个动画组合在一起,设置一些共有的属性。

通过这个demo,我们不难看出复杂动画都是由多个简单动画组成的。所以任何一个复杂动画都可以拆分为多个简单动画,所以会拆分动画是一个很重要的步骤。

参考链接
iOS Core Animation: Advanced Techniques中文译本

你可能感兴趣的:(iOS动画之核心动画)