iOS Core Animation Advanced Techniques - 0

image1.jpg

这本并非新书，我看的这本是2014年的。也算是英文书中比较简单的，有4级英语水平的人读起来应该完全没有问题。总共344页，分三部分讲解，读起来也非常顺畅。

之所以第一本选择它，是因为我认为这是一本讲解 iOS 动画基础的非常不错的书。了解了基础之后，其他复杂的动画，都是在这个基础之上的组合。反复阅读这本书，能够对你以后的开发工作带来极大的便利。

这本书的不完美之处在于，所有的 Demo 都没有美感。也很容易让大家提不起精神来学习，还好书名起的好。不然，可能我会错过这本书。

CALayer 和 UIView 的关系

CALayer 和 UIView 的概念是非常类似的。比如也是一个矩形的对象，在树状的层级结构中管理。可以包涵内容（图片、文字、背景颜色等），也可以控制子类的位置等属性。与 UIView 的不同是在 user interaction上。
那为什么会有这两个类似的概念呢？
这个主要是历史原因造成的。大家都知道先有的 Mac，后有的 iPhone 和其他 iOS 设备。由于硬件设备的性能不同，以及交互方式也有所不同。所以，无法直接把 Mac 的类库直接搬过来。于是你看到在 iOS 上是 UIKit （UIView）而 Mac 上是 AppKit (NSView)。他们有很好的传承，所以看上去会有很多相似之处。而 CALayer 做为更加底层的类，成为了2个平台能够共享的东西。于是你看到了2个概念相似的东西。

Layer 的能力

如果 UIView 同样能够完成动画效果，为什么我们还要学习 CAlayer 的知识呢？显然有一些是 UIView 无法完成的工作。例如：

• 阴影效果、圆角、描边的颜色
• 3D 的位移和改变
• 不规则的绑定
• 通明遮罩
• 多阶，非线性的动画

与 UIView 相比，CALayer 具有更好的灵活性。

添加一个CALayer

添加一个CALayer 到现有的 UIView 中也非常方便。代码如下：

let blueLayer = CALayer()
blueLayer.frame = CGRectMake(50.0, 50.0, 100.0, 100.0)
blueLayer.backgroundColor = UIColor.blueColor().CGColor
self.layerView.layer.addSublayer(blueLayer)

给 Layer 添加背景图片

self.layerView.layer.contents = UIImage(named:"img.png")?.CGImage

内容的填充方式

self.layerView.layer.contentsGravity = kCAGravityResizeAspect // equates UIViewContentMode.ScaleAspectFit

缩放

self.layerView.layer.contentsGravity = kCAGravityCenter
self.layerView.layer.contentsScale = 2 //注意这里的值越大，背景图片会缩的越小

Mask

self.layerView.layer.masksToBounds = true //设置为 true 会按照 layer 的 bounds 进行裁切，跟 UIView 的 clipsToBounds 效果相同

ContentsRect

Slice.jpg

注意这里的 Rect 的值都是在 0-1 之间的。

一张图了解了这个属性是怎么回事。 这个在我做一个拼图游戏中用到了。把一张图片分成了16份，然后通过移动位置来实现功能。

ContentsCenter

利用 ContentsCenter 属性，可以技巧性的实现一些特殊需求。例如，我们一个自定义的圆角按钮，宽度和高度是不固定的，怎么才能实现仅拉伸了中心，而没有让四角变形呢？

Screen Shot 2015-12-10 at 3.43.11 PM.png

func addStretchableImage(image:UIImage, withContentCenter rect:CGRect, toLayer layer:CALayer) {
    layer.contents = image.CGImage
    layer.contentsCenter = rect
}

// 在 viewDidLoad 方法中

addStretchableImage(image, withContentCenter: CGRectMake(0.25, 0.25, 0.5, 0.5), toLayer: self.button1.layer)
addStretchableImage(image, withContentCenter: CGRectMake(0.25, 0.25, 0.5, 0.5), toLayer: self.button2.layer)

结果如下图

Screen Shot 2015-12-10 at 3.43.40 PM.png