一、什么是CALayer

• 在iOS系统中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView。

• 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个层。

• 在创建UIView对象时，UIView内部会自动创建一个层(即CALayer对象)，通过UIView的layer属性可以访问这个层。当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的层上，绘图完毕后，系统会将层拷贝到屏幕上，于是就完成了UIView的显示。

• 换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能。

二、CALayer的基本作用

•通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：

• 阴影
• 圆角大小
• 边框宽度和颜色
  ……

•还可以给图层添加动画，来实现一些比较炫酷的效果

三、CALayer的属性

•宽度和高度
@propertyCGRect bounds;

•位置(默认指中点，具体由anchorPoint决定)
@property CGPoint position;

•锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;

•背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;

•形变属性
@property CATransform3D transform;

•边框颜色(CGColorRef类型)
@property CGColorRef borderColor;

•边框宽度
@property CGFloat borderWidth;

•圆角半径
@property CGColorRef borderColor;

•内容(比如设置为图片CGImageRef)
@property (retain) id contents;

四、CALayer有2个非常重要的属性：position和anchorPoint

• @property CGPoint position;

用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

• @property CGPoint anchorPoint;

称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5,0.5）

position和anchorPoint.png

注意：position和anchorPoint的点是重合的（中心点/旋转点），两者一起决定图层的位置

Snip20160528_6.png

五、隐式动画

每一个UIView内部都默认关联着一个CALayer，我们可用称这个Layer为Root Layer（根层）,所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画

•什么是隐式动画？

当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果,而这些属性称为Animatable Properties(可动画属性)

•列举几个常见的Animatable Properties：

bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画

•可以通过动画事务(CATransaction)关闭默认的隐式动画效果

[CATransactionbegin];
[CATransactionsetDisableActions:YES];
self.myview.layer.position= CGPointMake(10, 10);
[CATransactioncommit];

六、UIView和CALayer的选择：

UIView和CALayer的选择.png

七、CALayer的运用

运用场景：

1太阳.png 2.音量条 3.倒影.png 4.粒子效果
Snip20160529_20.png

---

---

---

• github

| 项目 | 简介 |
| : | : |
| MGDS_Swif | 逗视视频直播 |
| MGMiaoBo | 喵播视频直播 |
| MGDYZB | 斗鱼视频直播 |
| MGDemo | n多小功能合集 |
| MGBaisi | 高度仿写百思 |
| MGSinaWeibo | 高度仿写Sina |
| MGLoveFreshBeen | 一款电商App |
| MGWeChat | 小部分实现微信功能 |
| MGTrasitionPractice | 自定义转场练习 |
| DBFMDemo | 豆瓣电台 |
| MGPlayer | 一个播放视频的Demo |
| MGCollectionView | 环形图片排布以及花瓣形排布 |
| MGPuBuLiuDemo | 瀑布流--商品展 |
| MGSlideViewDemo | 一个简单点的侧滑效果，仿QQ侧滑 |
| MyResume | 一个展示自己个人简历的Demo |
| GoodBookDemo | 好书 |

• 1、直播喵播MGMiaoBo下载

Snip20161026_15.png
Snip20161026_16.png
Snip20161026_35.png

• 2、逗视：逗你玩的直播App，可下载试玩

• 看下效果

逗视介绍1.gif
逗视介绍2.gif

---