Facebook POP 使用指南

Pop是一個動畫引擎，用以擴展iOS、OSX的動畫類型。相較于iOS、OSX中的基本動畫效果，Pop擴展后支持彈簧動畫效果與衰減動畫效果，你可以用Pop動畫引擎來構建出真實的物理交互效果。它的API與Core Animation的API非常類似，使用起來非常容易。Pop動畫引擎已經經過了良好的測試，我們在 Paper 應用中進行了大量使用。

安裝

Pop支持 CocoaPods 安裝，將下面一行代碼添加到你的項目中的 Podfile 中：

pod 'pop', '~> 1.0'

注意，bug會在主分支上面進行修復，然后在指定的分支上進行發布。如果你喜歡嘗試最新的不大穩定的版本，你可以通過以下入口來訪問主分支：

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"];

你也可以根據鍵值來查詢已經存在的動畫，你可以在執行動畫效果的同時來修改toValue屬性來實時更新動畫效果：

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];// 創建layerCALayer *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];// 初始化dragViewself.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:selfaction:@selector(touchDown:)forControlEvents:UIControlEventTouchDown];// 添加手勢UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:selfaction:@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:positionAnimationforKey:@"layerPositionAnimation"];} }@end

基本動畫效果可以指定具體的動畫時間，與 CoreAnimation 中的 CABasicAnimation 的用法極為類似，在下面的例子中，我們用基本動畫效果來設置一個view的alpha值。

效果圖：

源碼：

#import "ViewController.h" #import "POP.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// 創建viewUIView *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];

Pop動畫引擎本身提供了很多可以做動畫的屬性供你定制。你可以在這個類里面創建出一個實例對象：

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

為了了解更多的可以做動畫效果的屬性，你可以參考 POPAnimatableProperty.h 查看更多的細節。

相關資源

以下是一些示例供你學習：

• AGGeometryKit+POP - Animating Quadrilaterals with Pop
• Apple – Core Animation Programming Guide
• Codeplease – Bridging the gesture to animation gap
• Codeplease – Playing with Pop (iii)
• Codeplease – Adding a custom animatable property
• iOS Development Tips – UIScrollView-like deceleration with Pop
• Pop Playground – Repository of Pop animation examples
• Pop Playground 2 – Playing with Facebook's framework
• POP-MCAnimate – Concise syntax for the Pop animation framework
• Popping - Great examples in one project
• Rebound – Spring Animations for Android
• Tapity Tutorial – Getting Started with Pop
• Tweaks – Easily adjust parameters for iOS apps in development
• POP Tutorial in 5 steps
• VBFPopFlatButton – Flat animatable button, using Pop to transition between states

轉載于:https://www.cnblogs.com/YouXianMing/p/4398232.html

總結

以上是生活随笔為你收集整理的Facebook POP 使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。