iOS faceBook pop动画使用

POP是一个来自于Facebook，在iOS与OSX上通用的极具扩展性的动画引擎。它在基本的静态动画的基础上增加的弹簧动画与衰减动画，使之能创造出更真实更具物理性的交互动画。 Pop Animation在使用上和Core Animation很相似，都涉及Animation对象以及Animation的载体的概念不同的是Core Animation的载体只能是CALayer，而Pop Animation可以是任意基于NSObject的对象
POP 使用 Objective-C++ 编写，Objective-C++ 是对 C++ 的扩展

POP背后的开发者是 Kimon Tsinteris， Push Pop Press 的联合创始人，曾经在Apple担任高级工程师，并参与了 iPhone 和 iPad 上软件的研发(iPhone的指南针以及地图)。2011年的时候 Facebook 收购了他的公司，此后他便加入了 Facebook 负责 Facebook iOS 版本的开发。

一.pop的介绍

pop结构图.png

POP 动画极为流畅，主要在于Enimator 里，POP 通过 CADisplayLink 高达 60 FPS 的特性，打造了一个游戏级的动画引擎。
CADisplayLink 是类似 NSTimer 的定时器，不同之处在于，NSTimer 用于我们定义任务的执行周期、资料的更新周期，他的执行受到 CPU 的阻塞影响，而 CADisplayLink 则用于定义画面的重绘、动画的演变，他的执行基于 frames 的间隔。
通过 CADisplayLink，Apple 允许你将 App 的重绘速度设定到和屏幕刷新频率一致，由此你可以获得非常流畅的交互动画，这项技术的应用在游戏中非常常见，著名的 Cocos-2D 也应用了这个重要的技术。
WebCore 里包含了一些从 Apple 的开源的网页渲染引擎里拿出的源文件，与 Utility 里的组件一并，提供了 POP 的各项复杂计算的基本支持

二.pop动画

POPBasicAnimation //基础动画
POPSpringAnimation //弹簧动画
POPDecayAnimation //衰减动画
POPCustomAnimation //自定义动画

POP动画大部分属性和CoreAnimation(核心动画)的含义和用法一样,也有部分特殊属性
CALayer层各属性

extern NSString * const kPOPLayerBackgroundColor;//背景色
extern NSString * const kPOPLayerBounds;//bounds
extern NSString * const kPOPLayerCornerRadius;//圆角半径
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;

UIVIew层各属性

extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;

其他层视图层属性

extern NSString * const kPOPNavigationBarBarTintColor;
extern NSString * const kPOPToolbarBarTintColor;
extern NSString * const kPOPTabBarBarTintColor;
extern NSString * const kPOPLabelTextColor;

更多控件属性可以参考框架里面类 POPAnimatableProperty.h

1.POPBasicAnimation基础动画

POPBasicAnimation *basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
 basic.toValue = @(300);
 basic.duration = 0.33;
 [self.markView pop_addAnimation:basic forKey: kPOPLayerPositionX];

添加一个动画最少仅需三步
1）定义一个animation对象，并指定对应的动画属性（kPOPLayerPositionX）
2）设置初始值结束值(初始值可以不指定，会默认从当前值开始）
3）添加到想产生动画的对象上

注意：由于 POP 是基于定时器定时刷新添加动画的原理，那么如果将动画库运行在主线程上，会由于线程阻塞的问题导致动画效果出现卡顿、不流畅的情况。

更为关键的是，你不能将动画效果放在子线程，因为你不能将对 view 和 layer 的操作放到主线程之外.POP 受主线程阻塞的影响很大，在使用过程中，应避免在有可能发生主线程阻塞的情况下使用 POP ，避免制作卡顿的动画效果，产生不好的用户体验

2.POPSpringAnimation弹性动画

属性介绍

velocity: 设置动画开始速度
springBounciness: 反弹振幅, 可以设置的范围是0-20，默认为4。值越大振动的幅度越大
springSpeed: 速度, 可以设置的范围是0-20，默认为12.值越大速度越快，结束的越快
dynamicsMass: 质量, 质量越大，动画的速度越慢，振动的幅度越大，结束的越慢
dynamicsTension: 拉力 拉力越大，动画的速度越快，结束的越快
dynamicsFriction: 摩擦力, 摩擦力越大，动画的速度越慢，振动的幅度越小。

注意: 以上的六个属性中一般只会设置springBounciness和springSpeed, 如有特殊需求才会设置其他属性

 POPSpringAnimation *psa = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleX];
  psa.fromValue = @(0.3);
   psa.toValue = @(2);
    psa.springSpeed = 5;
    psa.springBounciness = 15;
    [self.markView pop_addAnimation:psa forKey: kPOPViewScaleX];

3.POPDecayAnimation衰减动画

可以实现类似UIScrollView的滑动衰减效果
属性介绍

deceleration （负加速度, 衰减系数(越小则衰减得越快)）是一个你会很少用到的值，默认是就是我们地球的 0.998，如果你开发APP给火星人用，那么这个值你使用 0.376 会更合适
velocity 也是必须和你操作的属性有相同的结构，如果你操作的是 bounds, 传CGRect类型;如果 velocity 是负值，那么就会反向递减

POPDecayAnimation *pda = [POPDecayAnimation animationWithPropertyNamed:kPOPViewSize];
  pda.velocity = [NSValue valueWithCGSize:CGSizeMake(300, self.markView.frame.size.height)];
  [self.markView pop_addAnimation:pda forKey:kPOPViewSize];

4. POPCustomAnimation自定义动画

请三种动画是默认动画，集成POPPropertyAnimation类，基类中有一个属性property 是用来驱动动画的。
property包含三个部分

readBlock告诉POP当前的属性值

writeBlock中修改变化后的属性值

threashold决定了动画变化间隔的阈值值越大writeBlock的调用次数越少

前三种动画POP会自动创建，告诉系统如何根据当前时间片做出变化

 POPBasicAnimation *anim = [POPBasicAnimation animation];
    anim.duration = 10.0;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    POPAnimatableProperty * prop = [POPAnimatableProperty propertyWithName:@"count" initializer:^(POPMutableAnimatableProperty *prop) {
        prop.readBlock = ^(id obj, CGFloat values[]) {    
          values[0] = [[obj description] floatValue];
       };
        prop.writeBlock = ^(id obj, const CGFloat values[]) {    
            [obj setText:[NSString stringWithFormat:@"%.2f",values[0]]];
        };
      prop.threshold = 0.01;}];
    anim.property = prop;
    anim.fromValue = @(0.0);
    anim.toValue = @(100.0);
    [self.label pop_addAnimation:anim forKey:nil];

kCAMediaTimingFunctionLinear //线性步调对于那些立即加速并且保持匀速到达终点的场景会有意义
kCAMediaTimingFunctionEaseIn //慢慢加速然后突然停止
kCAMediaTimingFunctionEaseOut //全速开始，然后慢慢减速停止
kCAMediaTimingFunctionEaseInEaseOut//慢慢加速然后再慢慢减速
kCAMediaTimingFunctionDefault//同上，加速和减速的过程都稍微有些慢

三.pop动画相关Core Animation的优点

Pop Animation应用于CALayer时，在动画运行的任何时刻，layer和其presentationLayer的相关属性值始终保持一致，而Core Animation做不到。

Pop Animation可以应用任何NSObject的对象，而Core Aniamtion必须是CALayer。

四.几个比较炫酷的效果

见demo->FacebookPopDemo

demo效果

文章和代码若有不对地方，欢迎批评指正。