支持原创，原文地址：www.KentonYu.com
作品集，其实也谈不上作品吧。都是一些小 Demo 。我觉得有必要把一些觉得有意思的东西放在这里展示一下。让大家来吐槽一下。并不断的改进。但是有一个伤透脑经的问题，App 开发并不好展示，特别是 iOS，当然有值得展示的上架应用就会把 App Store link 放上来，那些小 Demo ，就只能先上录屏了。
主要知识点
贝塞尔曲线
给定n+1个数据点，p0(x0 , y0) ... pn(xn , yn)，生成一条曲线，使得该曲线与这些点所连结的折线相近。在数学中，这属于逼近问题。在几何中，可以形象地理解为先用折线段连接这些数据点，勾勒出图形的大致轮廓，然后再用光滑的曲线去尽可能接近地拟合这条折线。摘录来自: “A GUIDE TO IOS ANIMATION”
UIBezierPath，是 UIKit 对 CoreGraphics 的 path （CGPathRef）的封装。通过 UIBezierPath 可以绘制直线、圆圈、多边形和贝塞尔曲线。
下面是对 UIBezierPath 的简单介绍
<pre>
// 以下是四个类方法，用来绘制闭合的特殊路径
// 矩形
- (UIBezierPath *)bezierPathWithRect:(CGRect)rect
// 圆角矩形
- (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
// 矩形内切圆
- (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
// 弧形（clockwise 是否顺时针绘制）
- (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
</pre>
<pre>
// 实例方法，可以绘制各种自定义的形状
// 直线
- (void)addLineToPoint:(CGPoint)point
// 弧形线段
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
// 二阶贝塞尔曲线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
// 三阶贝塞尔曲线
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
</pre>
通过贝塞尔曲线可以绘制任何你想要画的形状。我还没用过三阶贝塞尔。这个<a href='http://cubic-bezier.com' target="_blank" style='color:#00d6cf'>网站</a>可以体验下贝塞尔曲线。
CALayer
CALayer 类在概念上和 UIView 类似，同样也是一些被层级关系树管理的矩形块，同样也可以包含一些内容（图片，文本或者背景色），管理子图层的位置。它们有一些方法和属性用来做动画和变换。和 UIView 最大的不同是 CALayer 不处理用户的交互( UIView 继承 UIResponder，CALayer 继承 NSObject )。
CALayer 和 UIView 主要区别：
- 处理触摸事件
- 阴影、圆角、带颜色的边框
- 3D 变换
- 非矩形范围
- 透明遮罩
- 多级非线性动画
- .....
CALayer 的子类简单介绍：
- CAShapeLayer：用来绘制各种形状
- CATextLayer：用来绘制文字
- CATransformLayer：用来构造一个层级的3D结构
- CAGradientLayer：用来生成两种或更多颜色平滑渐变
- CAReplicatorLayer：用来高效地生成许多相似的图层
- CAScrollLayer：用来实现图层滑动
- CATiledLayer：为载入大图造成的性能问题提供一个解决方案，将大图分解成小片然后将它们单独按需载入
- CAEmitterLayer：高性能的粒子引擎，被用来创建实时粒子动画（烟、火、雨等）
- CAEAGLLayer：The CAEAGLLayer class supports drawing OpenGL content in iPhone applications
- AVPlayerLayer：用来在iOS上播放视频的，是 MPMoivePlayer 的底层实现，由 AVFoundation 提供
<b>关于这一部分的具体实践，后续会补上。</b>
我们什么时候需要使用 CALayer：
- 开发同时可以运行在 MAC OS 上的跨平台应用
- 使用多种 CALayer 的子类
- 做一些对性能要求很高的工作
drawRect && drawLayer
CALayer 有一个寄宿图，可以通过 contents 属性来赋值：
<pre>
layer.contents = (__bridge id)image.CGImage;
</pre>
当用代码的方式来处理寄宿图的时候，一定要记住要手动的设置图层的contentsScale属性，否则，你的图片在Retina设备上就显示得不正确啦。代码如下：
<pre>
layer.contentsScale = [UIScreen mainScreen].scale;
</pre>
以上是对寄宿图的简单介绍，下面就介绍主题 <code>- drawRect:</code>。
给 contents 赋值（CGImage）并不是唯一设置寄宿图的方法，我们也可以通过用 Core Graphics 直接绘制寄宿图，能够通过继承 UIView 并实现<code>- drawRect:</code>来自定义绘制。
<code>- drawRect:</code> 方法没有默认实现，因为对 UIView 来说，寄宿图并不是必须的。如果 UIView 检测到 <code>- drawRect:</code> 方法被调用了，它就会为视图分配一个寄宿图，这个寄宿图的大小的尺寸等于视图大小乘以 contentScale 的积。
<b>所以在不需要使用寄宿图的时候，就不要创建<code>- drawRect:</code>方法，会导致 CPU 和内存资源的浪费，因此在没有自定义绘制任务的 UIView 子类中不要写一个空的<code>- drawRect:</code>方法</b>
在视图显示到屏幕上时，<code>- drawRect:</code>会被自动调用，并且当一些表现效果的属性值被修改时，一些视图类型也会被重绘（如 bounds 属性）。虽然<code>- drawRect:</code>是 UIView 的方法，但是还是底层的 CALayer 进行了重绘的操作并保存了产生的寄宿图。
CALayer 中设置寄宿图的过程：首先 CALayer 会请求它的 CALayerDelegate 代理给它一个寄宿图来显示。它通过下面这个方法来实现获取。
<pre>
- (void)displayLayer:(CALayerCALayer *)layer;
</pre>
如果代理不实现这个方法， CALayer 会转而尝试调用下面这个方法：
<pre>
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;
</pre>
在调用这个方法之前，CALayer 创建了一个合适尺寸的空寄宿图（尺寸由 bounds 和 contentsScale 决定）和一个 CoreGraphics 的绘制上下文环境，为绘制寄宿图做准备，他作为 ctx 参数传入。
但是在使用这个方法时，不同于 UIView ，CALayer 不会自动重绘它的内容，需要手动调用 <code>- display</code>。
总的来说，当使用寄宿了视图的图层的时候，不必实现<code>- displayLayer:</code>和<code>- drawLayer: inContext:</code>方法来绘制寄宿图。通常做法是实现 UIView 的<code>- drawRect:</code>方法，UIView 会做完剩下的工作，包括在需要重绘的时候调用<code>- display</code>方法。
这是一篇关于 drawRect 的博文《内存恶鬼 drawRect》 ，看完可以学到更多关于 drawRect 的知识。
NSTimer && CADisplayLink
NSTimer 是如何工作的？
当设置一个 NSTimer 时，NSTimer 会被插入到当前的 NSRunloop 中，然后直到指定的时间过去之后才会被执行。但是什么时候启动定时器并没有上限，而且只有当 NSRunloop 的上一个任务结束之后才会被执行，因此通常会导致不定时的延迟。 NSRunloop 主要争对主线程，其中包含的任务有如下几项：
- 处理触摸事件
- 发送和接受网络数据包
- 执行使用 GCD 的代码
- 处理计时器的行为
- 屏幕重绘
因此屏幕重绘的频率是60次/秒，但是和定时器一样，如果上一次重绘执行很长的时间，那么也会导致延迟。就不能保证定时器精准的每一秒执行60次。
对于动画的实现可以通过以下这些途径进行优化：
- 可以用 CADisplayLink 让更新频率严格控制在每次屏幕刷新之后
- 基于真实帧的持续时间而不是假设的更新频率来做动画
- 调整动画计时器的 RunLoop 模式，这样就不会被别的事件干扰
用 CADisplayLink 而不是 NSTimer，会保证帧率足够连续，使得动画看起来更加平滑，但即使 CADisplayLink 也不能保证每一帧都按计划执行，一些失去控制的离散的任务或者事件（例如资源紧张的后台程序）可能会导致动画偶尔地丢帧。
无论是使用 NSTimer 还是 CADisplayLink，我们仍然需要处理一帧的时间超出了预期的1/60秒。由于我们不能够计算出一帧真实的持续时间，所以需要手动测量。我们可以在每帧开始刷新的时候用 CACurrentMediaTime() 记录当前时间，然后和上一帧记录的时间去比较。
总结
在这个 Demo 里主要涉及了以上几个知识点，通过 CAShapeLayer 来绘制整个台子，然后通过实现 <code>- drawLayer: inContext:</code> 实现椭圆进度条的效果（在淘宝彩排H5里有个颜色渐变的过程，我没有实现）。通过这个小 Demo，巩固了之前 iOS 动画学习的知识，感觉写动画是一个很有趣的事情。当然不得不说，这个看似简单的小游戏，实际做起来逻辑还是有点复杂的～
