pop动画

最近在学习Facebook的pop框架，所以就想整理一下，方便以后学习回忆。

首先说一下，学习这一方面需要了解的一些内容：CADisplayLink、CAShapeLayer、CALayer、CATransform3D、CGAffineTransform、UIBezierPath、UIGestureRecognizer。

---

CADisplayLink

CADisplayLink是OC中使用的定时器的一种（其他2个分别是NStimer、GCD），它允许应用程序将其绘图与显示器的刷新率同步。

CADisplayLink的高达60FPS，iOS设备的屏幕刷新频率是固定的，CADisplayLink在正常情况下会在每次刷新结束都被调用，精确度相当高，基本和屏幕刷新是同步的。使用场合相对专一，适合做UI的不停重绘，比如自定义动画引擎或者视频播放的渲染。

NSTimer的精确度就显得低了点，比如NSTimer的触发时间到的时候，runloop如果在阻塞状态，触发时间就会推迟到下一个runloop周期。并且 NSTimer新增了tolerance属性，让用户可以设置可以容忍的触发的时间的延迟范围。

POP动画的流畅性就归功于CADisplayLink高达60的FPS

---

CALayer

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

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

注意2个属性:

1. anchorPoint 锚点：在当前layer中取一点来计算改点在父视图中的position。 默认（0.5，0.5）

2. position: 锚点在父视图中的位置，可以来修改当前view的frame。

---

CAShapeLayer

属于CALayer的子类，通常用它来画一个layer层。

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2) radius:self.bounds.size.width / 2 startAngle:0 endAngle:M_PI * 2  clockwise:YES];
    
    CAShapeLayer *bgcircular = [[CAShapeLayer alloc] init];
    bgcircular.path = path.CGPath;
    bgcircular.borderWidth = 5;
    bgcircular.strokeStart = 0;
    bgcircular.strokeEnd = 1;
    bgcircular.strokeColor = [UIColor grayColor].CGColor;
    bgcircular.fillColor = [UIColor clearColor].CGColor;
    [self.layer addSublayer:bgcircular];

---

UIBezierPath

用来辅助画CAShapeLayer

---

CATransform3D

CATransform3D应用于layer层，相对于它边界的锚点进行缩放、位移、旋转的变化。CATransform3D是居于4阶矩阵而变化的，所以需要了解关于矩阵的基本算法。

位移

/* Returns a transform that translates by '(tx, ty, tz)':
 * t' =  [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]. */

CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx,
    CGFloat ty, CGFloat tz)
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

缩放

/* Returns a transform that scales by `(sx, sy, sz)':
 * t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1]. */

CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy,
    CGFloat sz)
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

旋转

/* Returns a transform that rotates by 'angle' radians about the vector
 * '(x, y, z)'. If the vector has length zero the identity transform is
 * returned. */

CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,
    CGFloat y, CGFloat z)
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);