FaceBook pop 動畫開源框架使用教程說明

 

 

https://github.com/facebook/pop

 

 

Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration with existing Objective-C codebases and enables the animation of any property on any object. It's a mature and well-tested framework that drives all the animations and transitions in Paper.

 

 

POPdemo

A simple demo for facebook's pop framework.

pop一共有四個大類

POPSpringAnimation  有彈性效果的動畫類（個人比較喜歡這個）
POPBasicAnimation 基本動畫類
POPDecayAnimation 衰減動畫類
POPCustomAnimation 可以自定義動畫的類

導入pop

很簡單，直接把pop文件夾拖到項目里，然后導入pop.h即可。

#import "POP.h"

下面的代碼示例用POPSpringAnimation做一個彈性放大-縮小的效果

- (void)viewDidLoad
{
   [super viewDidLoad];
   // Do any additional setup after loading the view from its nib.

//添加手勢
    UITapGestureRecognizer *gestureForSpring = [[UITapGestureRecognizer alloc] init];
    [gestureForSpring addTarget:self action:@selector(changeSize:)];
    [_springView addGestureRecognizer:gestureForSpring];

}



- (void)changeSize:(UITapGestureRecognizer*)tap{
- 
    //用POPSpringAnimation 讓viewBlue實現彈性放大縮小的效果
    POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerSize];

    CGRect rect = _springView.frame;
    if (rect.size.width==100) {
        springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(300, 300)];
    }
    else{
        springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    }

    //彈性值
    springAnimation.springBounciness = 20.0;
    //彈性速度
    springAnimation.springSpeed = 20.0;

    [_springView.layer pop_addAnimation:springAnimation forKey:@"changesize"];

}

效果如下

上面的代碼是改變view的size，下面示例改變position

 POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition];

    CGPoint point = _springView.center;

    if (point.y==240) {
        springAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(point.x, -230)];
    }
    else{
        springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(point.x, 240)];
    }

    //彈性值
    springAnimation.springBounciness = 20.0;
    //彈性速度
    springAnimation.springSpeed = 20.0;

    [_springView pop_addAnimation:springAnimation forKey:@"changeposition"];

效果：

這個效果可以做一個彈出框從上往下跳出來，我之前做過這個效果，用了N多代碼，用pop只用幾句代碼就實現了。

一個比較實用的效果，彈出菜單：

代碼如下：

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"+" style:UIBarButtonItemStyleDone target:self action:@selector(showPop)];

- (void)showPop{

    if (_isOpened) {
        [self hidePop];
        return;
    }
    _isOpened = YES;

    POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
    positionAnimation.fromValue = [NSValue valueWithCGRect:_hidePosition];
    positionAnimation.toValue = [NSValue valueWithCGRect:_showPosition];
    positionAnimation.springBounciness = 15.0f;
    positionAnimation.springSpeed = 20.0f;
    [_popView pop_addAnimation:positionAnimation forKey:@"frameAnimation"];
}

- (void)hidePop{

    POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewFrame];
    positionAnimation.fromValue = [NSValue valueWithCGRect:_showPosition];
    positionAnimation.toValue = [NSValue valueWithCGRect:_hidePosition];
    //key一樣就會用后面的動畫覆蓋之前的
    [_popView pop_addAnimation:positionAnimation forKey:@"frameAnimation"];

    _isOpened = NO;
}