Facebook POP 使用指南

Pop是一个动画引擎，用以扩展iOS、OSX的动画类型。相较于iOS、OSX中的基本动画效果，Pop扩展后支持弹簧动画效果与衰减动画效果，你可以用Pop动画引擎来构建出真实的物理交互效果。它的API与Core Animation的API非常类似，使用起来非常容易。Pop动画引擎已经经过了良好的测试，我们在 Paper 应用中进行了大量使用。

安装

Pop支持 CocoaPods 安装，将下面一行代码添加到你的项目中的 Podfile 中：

    pod 'pop', '~> 1.0'

pod 'pop', :git => 'https://github.com/facebook/pop.git'

使用

Pop 支持Core Animation 中的显式动画类型，你可以通过导入头文件来使用它：

   #import <pop/POP.h>

开始动画、停止动画与更新动画

开始执行一个动画，你可以将动画添加到一个对象中：

POPSpringAnimation *anim = [POPSpringAnimation animation];
...
[layer pop_addAnimation:anim forKey:@"myKey"];

[layer pop_removeAnimationForKey:@"myKey"];

anim = [layer pop_animationForKey:@"myKey"];
if (anim) {
  /* update to value to new destination */
  anim.toValue = @(42.0);
} else {
  /* create and start a new animation */
  ....
}

注意，虽然上述示例中用到了一个layer，但是Pop动画引擎是基于 NSObject 所写的一个category，任何继承自NSObject的对象都可以使用Pop动画引擎。

动画类型

Pop支持4种动画类型：弹簧效果、衰减效果、基本动画效果与自定义动画效果。

弹簧效果可以用来实现仿真的物理弹簧特效，在下面的这个例子中，我们用弹簧效果来对一个layer的尺寸进行缩放：

效果图：

源码：

#import "ViewController.h"
#import "POP.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建layer
    CALayer *layer        = [CALayer layer];
    layer.frame           = CGRectMake(0, 0, 50, 50);
    layer.backgroundColor = [UIColor cyanColor].CGColor;
    layer.cornerRadius    = 25.f;
    layer.position        = self.view.center;
    [self.view.layer addSublayer:layer];
    
    // 执行Spring动画
    POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    anim.toValue             = [NSValue valueWithCGPoint:CGPointMake(3.f, 3.f)];
    anim.springSpeed         = 0.f;
    [layer pop_addAnimation:anim forKey:@"ScaleXY"];
}

@end

衰减效果可以用来模拟真实的物理减速效果，在下面的例子中，我们用衰减效果来对一个view的拖拽停止执行减速效果。

效果图：

源码：

#import "ViewController.h"
#import "POP.h"

@interface ViewController ()<POPAnimationDelegate>

@property(nonatomic) UIControl *dragView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化dragView
    self.dragView                    = [[UIControl alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    self.dragView.center             = self.view.center;
    self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/2;
    self.dragView.backgroundColor    = [UIColor cyanColor];
    [self.view addSubview:self.dragView];
    [self.dragView addTarget:self
                      action:@selector(touchDown:)
            forControlEvents:UIControlEventTouchDown];
    
    
    // 添加手势
    UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                                                 action:@selector(handlePan:)];
    [self.dragView addGestureRecognizer:recognizer];
}

- (void)touchDown:(UIControl *)sender {
    [sender.layer pop_removeAllAnimations];
}

- (void)handlePan:(UIPanGestureRecognizer *)recognizer {
    // 拖拽
    CGPoint translation = [recognizer translationInView:self.view];
    recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                         recognizer.view.center.y + translation.y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
    
    // 拖拽动作结束
    if(recognizer.state == UIGestureRecognizerStateEnded)
    {
        // 计算出移动的速度
        CGPoint velocity = [recognizer velocityInView:self.view];
        
        // 衰退减速动画
        POPDecayAnimation *positionAnimation = \
        [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
        
        // 设置代理
        positionAnimation.delegate = self;
        
        // 设置速度动画
        positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];
        
        // 添加动画
        [recognizer.view.layer pop_addAnimation:positionAnimation
                                         forKey:@"layerPositionAnimation"];
    }
}

@end

基本动画效果可以指定具体的动画时间，与 CoreAnimation 中的 CABasicAnimation 的用法极为类似，在下面的例子中，我们用基本动画效果来设置一个view的alpha值。

效果图：

源码：

#import "ViewController.h"
#import "POP.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 创建view
    UIView *showView            = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    showView.alpha              = 0.f;
    showView.layer.cornerRadius = 50.f;
    showView.center             = self.view.center;
    showView.backgroundColor    = [UIColor cyanColor];
    [self.view addSubview:showView];

    // 执行基本动画效果
    POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim.timingFunction     = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.fromValue          = @(0.0);
    anim.toValue            = @(1.0);
    anim.duration           = 4.f;
    [showView pop_addAnimation:anim forKey:@"fade"];
}

@end

自定义动画效果是根据 CADisplayLink 来计算出中间的差值，然后由你来处理输出的值的动画效果，详情请参考相关头文件来获取更多的细节。

属性

属性是通过 POPAnimatableProperty 来定义的。在下面的这个例子中，我们创建出了一个弹簧动画效果并显式的设置它去响应 -[CALayer bounds]：

POPSpringAnimation *anim = [POPSpringAnimation animation];
anim.property            = [POPAnimatableProperty propertyWithName:kPOPLayerBounds];

prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *prop) {
  // read value
  prop.readBlock = ^(id obj, CGFloat values[]) {
    values[0] = [obj volume];
  };
  // write value
  prop.writeBlock = ^(id obj, const CGFloat values[]) {
    [obj setVolume:values[0]];
  };
  // dynamics threshold
  prop.threshold = 0.01;
}];

anim.property = prop;