iOS開發Facebook POP動效庫使用教程

若是說Origami這款動效原型工具是Facebook Paper的幕後功臣，那麼POP即是Origami的地基。感謝Facebook開源了POP動效庫，讓人人都能製做出華麗的動效。咱們只需5步，便能搞定酷炫的動效。

步驟1: 安裝

 

使用CocoaPods安裝POP，只須要在Podfile中加入這麼一行：

pod 'pop', '~> 1.0'

或者若是想要手動添加，那麼參考POP Github中的描述：

除此以外，你還能夠將工程添加到工做區裏面，而後採用提供的配製文件。或者手動複製POP子目錄下的文件，複製到工程裏面。若是選擇手動安裝，確保C++標準庫鏈入其中，只須要在項目連接標記中包含 -lc++便可。

Facebook POP動效庫:https://github.com/facebook/pop

若是不懂得如何使用CocoaPods,請看這個教程：

《CocoaPods簡易使用指南》

步驟2: 將POP加入到工程中

 

在工程開頭添加以下：

#import <POP/POP.h>

 

步驟 3:建立動效

 

使用POP能夠建立4類動效：: spring, decay, basic and custom.

Spring （彈性）動效能夠賦予物體愉悅的彈性效果

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];

Decay （衰減) 動效能夠用來逐漸減慢物體的速度至中止

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

Basic（基本）動效能夠在給定時間的運動中插入數值調整運動節奏

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

Custom（自定義）動效能夠讓設計值建立自定義動效，只需簡單處理CADisplayLink，並聯系時間-運動關係

在這片簡短教程中將不涵蓋自定義動效，你們能夠看看POP的Github來獲取更多進階知識https://github.com/facebook/pop

步驟4: 給動效添加屬性

 

Pop 讓咱們能夠這樣設置動效的屬性:

velocity : anim.velocity = @(1000.);

fromValue: anim.fromValue = @(0.0);

toValue: anim.toValue = @(1.0);

bounciness: anim.springBounciness = 10;

步驟5 :動起來

 

若想讓物體動起來，只須要添加步驟3所建立的東西到視圖。

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

這就是POP簡單建立動效的教程。你們能夠看看例子來理解如何建立動效。爭取努力變得技藝純熟吧。

 

步驟6：測試效果

Pop有相關文件擴展做爲測試。安裝測試文件的方法是用終端進入POP根目錄，而後輸入

pod install

必須確保CocoaPods已經安裝

 

# 動效案例

 

這個動效將按鈕縮小到一半

POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; 

scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5)]; 

scaleAnimation.springBounciness = 10.f; 

[self.button.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnim"];

 

這個動效將按鈕旋轉

POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];

rotationAnimation.beginTime = CACurrentMediaTime() + 0.2;

rotationAnimation.toValue = @(1.2); 

rotationAnimation.springBounciness = 10.f; 

rotationAnimation.springSpeed = 3; 

[button.layer pop_addAnimation:rotationAnimation forKey:@」rotationAnim」];

 

這個改變透明度：

POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];

opacityAnimation.toValue = @(0.5);

[animView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];

#更多

 

Pop Github : https://github.com/facebook/pop

Popping -Pop案例 : https://github.com/schneiderandre/popping

POP使用教程: https://github.com/maxmyers/FacebookPop

 

中文教程

 

POP使用指南（來自Cocohina）

使用FaceceBook的Pop框架替換UIScrollView的減速動畫（來自Cocohina）

Facebook POP 進階指南（來自Cocohina）