CALayer简介

iOS开发动画全解析：从CALayer到动画操作

最新推荐文章于 2018-10-15 13:12:00 发布

转载最新推荐文章于 2018-10-15 13:12:00 发布 · 293 阅读

2017以前专栏收录该内容

155 篇文章

订阅专栏

本文详细介绍了iOS动画的基础知识，包括CALayer的使用、动画属性和操作方法。通过实例展示了如何在iOS应用中实现简单而高效的动画效果，使读者能够深入理解并灵活运用iOS的动画功能。

编辑： suiling 分类：iOS开发来源：崔江涛（KenshinCui）

概览
在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核心动画创建基础动画、关键帧动画、动画组、转场动画，如何通过UIView的装饰方法对这些动画操作进行简化等。在今天的文章里您可以看到动画操作在iOS中是如何简单和高效，很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单：

CALayer

一、CALayer简介

在介绍动画操作之前我们必须先来了解一个动画中常用的对象CALayer。CALayer包含在QuartzCore框架中，这是一个跨平台的框架，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation开发动画的本质就是将CALayer中的内容转化为位图从而供硬件操作，所以要熟练掌握动画操作必须先来熟悉CALayer。

在上一篇文章中使用Quartz 2D绘图时大家其实已经用到了CALayer，当利用drawRect:方法绘图的本质就是绘制到了UIView的layer（属性）中，可是这个过程大家在上一节中根本体会不到。但是在Core Animation中我们操作更多的则不再是UIView而是直接面对CALayer。下图描绘了CALayer和UIView的关系，在UIView中有一个layer属性作为根图层，根图层上可以放其他子图层，在UIView中所有能够看到的内容都包含在layer中：

二、CALayer常用属性

在iOS中CALayer的设计主要是了为了内容展示和动画操作，CALayer本身并不包含在UIKit中，它不能响应事件。由于CALayer在设计之初就考虑它的动画操作功能，CALayer很多属性在修改时都能形成动画效果，这种属性称为“隐式动画属性”。但是对于UIView的根图层而言属性的修改并不形成动画效果，因为很多情况下根图层更多的充当容器的做用，如果它的属性变动形成动画效果会直接影响子图层。另外，UIView的根图层创建工作完全由iOS负责完成，无法重新创建，但是可以往根图层中添加子图层或移除子图层。

下表列出了CALayer常用的属性：

1.隐式属性动画的本质是这些属性的变动默认隐含了CABasicAnimation动画实现，详情大家可以参照Xcode帮助文档中“Animatable Properties”一节。

2.在CALayer中很少使用frame属性，因为frame本身不支持动画效果，通常使用bounds和position代替。

3.CALayer中透明度使用opacity表示而不是alpha；中心点使用position表示而不是center。

4.anchorPoint属性是图层的锚点，范围在（0~1,0~1）表示在x、y轴的比例，这个点永远可以同position（中心点）重合，当图层中心点固定后，调整anchorPoint即可达到调整图层显示位置的作用（因为它永远和position重合）

为了进一步说明anchorPoint的作用，假设有一个层大小100*100，现在中心点位置（50,50），由此可以得出frame（0,0,100,100）。上面说过anchorPoint默认为（0.5,0.5），同中心点position重合，此时使用图形描述如图1；当修改anchorPoint为（0,0），此时锚点处于图层左上角，但是中心点poition并不会改变，因此图层会向右下角移动，如图2；然后修改anchorPoint为（1,1,），position还是保持位置不变，锚点处于图层右下角，此时图层如图3。

下面通过一个简单的例子演示一下上面几个属性，程序初始化阶段我们定义一个正方形，但是圆角路径调整为正方形边长的一般，使其看起来是一个圆形，在点击屏幕的时候修改图层的属性形成动画效果（注意在程序中没有直接修改UIView的layer属性，因为根图层无法形成动画效果）：

 
        //
       
        //  KCMainViewController.m
       
        //  CALayer
       
        //
       
        //  Created by Kenshin Cui on 14-3-22.
       
        //  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
       
        //
       
        #import "KCMainViewController.h"
       
        #define WIDTH 50
       
        @interface KCMainViewController ()
       
        @end
       
        @implementation KCMainViewController
       
        - (void)viewDidLoad {
       
        [
        super 
        viewDidLoad];
       
        // Do any additional setup after loading the view.
       
        [self drawMyLayer];
       
        }
       
        #pragma mark 绘制图层
       
        -(void)drawMyLayer{
       
        CGSize size=[UIScreen mainScreen].bounds.size;
       
        //获得根图层
       
        CALayer *layer=[[CALayer alloc]init];
       
        //设置背景颜色,由于QuartzCore是跨平台框架，无法直接使用UIColor
       
        layer.backgroundColor=[UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1.0].CGColor;
       
        //设置中心点
       
        layer.position=CGPointMake(size.width/2, size.height/2);
       
        //设置大小
       
        layer.bounds=CGRectMake(0, 0, WIDTH,WIDTH);
       
        //设置圆角,当圆角半径等于矩形的一半时看起来就是一个圆形
       
        layer.cornerRadius=WIDTH/2;
       
        //设置阴影
       
        layer.shadowColor=[UIColor grayColor].CGColor;
       
        layer.shadowOffset=CGSizeMake(2, 2);
       
        layer.shadowOpacity=.9;
       
        //设置边框
       
        //    layer.borderColor=[UIColor whiteColor].CGColor;
       
        //    layer.borderWidth=1;
       
        //设置锚点
       
        //    layer.anchorPoint=CGPointZero;
       
        [self.view.layer addSublayer:layer];
       
        }
       
        #pragma mark 点击放大
       
        -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
       
        UITouch *touch=[touches anyObject];
       
        CALayer *layer=self.view.layer.sublayers[0];
       
        CGFloat width=layer.bounds.size.width;
       
        if 
        (width==WIDTH) {
       
        width=WIDTH*4;
       
        }
        else
        {
       
        width=WIDTH;
       
        }
       
        layer.bounds=CGRectMake(0, 0, width, width);
       
        layer.position=[touch locationInView:self.view];
       
        layer.cornerRadius=width/2;
       
        }
       
        @end