Facebook Pop介紹與使用

前言

前段時間花了點時間，稍微看了下核心動畫，感受仍是學到了很多，順便給你們安利一個網站,這上面是對《iOS Core Animation: Advanced Techniques》的中文譯本。有興趣的同窗能夠花時間好好看看～接下來看咱們今天的主角POP-Facebook出品的動畫引擎。

介紹

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

安裝

官方地址 https://github.com/facebook/pop

說到安裝，Facebook推薦的仍是經過CocoaPods來安裝，
添加下面的代碼到你項目的Podfile文件就能夠了

pod 'pop', '~> 1.0.9' 

可是須要手動導入的同窗就比較麻煩了，咱們若是把github上下載下來的資源直接拖進項目裏，估計立刻就一片報紅。這裏我在網上找到了能夠直接拖進項目的框架，你們把我Demo裏的pop文件夾直接拉到本身項目裏就能夠正常使用了。

使用

動畫類型

Pop支持4種動畫類型：彈簧效果、衰減效果、基本動畫和自定義動畫。

• POPSpringAnimation (彈簧效果)
• POPDecayAnimation (衰減效果)
• POPBasicAnimation (基本動畫)
• POPAnimatableProperty (自定義屬性動畫)

首先，添加一個簡單的動畫很簡單，只要三步

1.定義一個animation對象，以上的四種類型之一，並指定對應的動畫屬性,這個屬性是個字符串類型，按不一樣的對象能夠賦的值也不同，可選的類型比較多，這裏就不貼出來了，你們能夠在代碼裏本身看。
2.設置animation對象的fromValue和toValue,fromValue不設置的話會默認從當前開始。
3.將animation添加到指定的對象上。這邊和Core Animation的最大不同就是，Core Animation只能添加到CALayer上，Pop能夠添加到任何繼承於NSObject對象上。

彈簧效果

我一開始就是被pop的這個動畫所吸引的，POPSpringAnimation提供了一個相似於彈簧的動畫效果。下面的例子是對一個Layer的尺寸進行縮放：

springAnimation

源碼：

// 1.初始化 POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY]; // 2.設置初始值和變化後的值 anim.fromValue = @(10); anim.toValue = @(500); // 速度 能夠設置的範圍是0-20，默認爲12.值越大速度越快，結束的越快 anim.springSpeed = 2.f; // 振幅 能夠設置的範圍是0-20，默認爲4。值越大振動的幅度越大 anim.springBounciness = 10.f; // 拉力 拉力越大，動畫的速度越快，結束的越快。 接下來的三個值通常不用設置，能夠分別放開註釋查看效果 // anim.dynamicsTension = 250; // 摩擦力 摩擦力越大，動畫的速度越慢，振動的幅度越小。 // anim.dynamicsFriction = 100.0; // 質量 質量越大，動畫的速度越慢，振動的幅度越大，結束的越慢 anim.dynamicsMass = 10; anim.beginTime = CACurrentMediaTime() + 1.f; // 3.添加到view上 [self.layerView.layer pop_addAnimation:anim forKey:@"ScaleXY"]; 

衰減效果

POPDecayAnimation能夠實現衰減的動畫效果。這個動畫最重要的一個參數就是velocity（速率）。這個參數通常不經過具體的參數來設置，而是經過與用戶的交互來生成。好比咱們下面的例子中，就是經過用戶對view的拖拽來生成的速度。

decayAnimation

源碼：

// 拖拽動做結束 if (recognizer.state == UIGestureRecognizerStateEnded) { CGPoint velocity = [recognizer velocityInView:self.view]; // 1.初始化 POPDecayAnimation *animtion = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition]; // 2.設置初始值 // 這個例子中不須要設置初始值。注意：POPDecayAnimation只有fromValue，沒有toValue // POPDecayAnimation設置duration也是沒有意義的，由於POPDecayAnimation的動畫持續時間，是由velocity(速度)和deceleration(衰減係數)決定的。 // 衰減係數（越小賊衰減的越快）不多用到，能夠不設置 animtion.deceleration = 0.998; // 設置動畫速度 animtion.velocity = [NSValue valueWithCGPoint:velocity]; // 3.添加到view上 [recognizer.view.layer pop_addAnimation:animtion forKey:@"positionAnimation"]; } 

基本動畫

基本動畫能夠指定具體的動畫時間和時間函數，用法跟CoreAnimation中的CABasicAnimation很類似。下面的例子中，咱們用來改變一個view的背景色。

basicAnimation

源碼：

// 1.初始化 POPBasicAnimation *basic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBackgroundColor]; // 2.設置初始值 basic.fromValue = [UIColor blackColor]; basic.toValue = [UIColor redColor]; // 動畫的時長 basic.duration = 4.0; // 動畫類型 系統預設的類型有如下5種： // kCAMediaTimingFunctionLinear 線性,即勻速 // kCAMediaTimingFunctionEaseIn 先慢後快 // kCAMediaTimingFunctionEaseOut 先快後慢 // kCAMediaTimingFunctionEaseInEaseOut 先慢後快再慢 // kCAMediaTimingFunctionDefault 實際效果是動畫中間比較快 basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; basic.beginTime = CACurrentMediaTime() + 1.f; // 3.添加到view上 [self.layerView pop_addAnimation:basic forKey:@"colorAnimation"]; 

自定義屬性動畫

咱們上面講的三個動畫的基類實際上是POPPropertyAnimation，在POPPropertyAnimation中有一個屬性叫property。而咱們的自定義屬性，就是跟這個有關。下面的例子演示了一個相似於秒錶計時的效果：

countAnimation

源碼：

POPAnimatableProperty *prop = [POPAnimatableProperty propertyWithName:@"prop" initializer:^(POPMutableAnimatableProperty *prop) { // 告訴pop當前的屬性值 prop.readBlock = ^(id obj, CGFloat *values) { }; // 修改變化後的屬性值 prop.writeBlock = ^(id obj, const CGFloat *values) { UILabel *label = (UILabel *)obj; label.text = [NSString stringWithFormat:@"%02d:%02d:%02d",(int)values[0]/60,(int)values[0]%60,(int)(values[0]*100)%100]; }; // 動畫變化的快慢，值越大block調用的次數越少 prop.threshold = 0.1; }]; // 1.初始化 POPBasicAnimation * anim = [POPBasicAnimation linearAnimation]; // 自定義屬性 anim.property = prop; // 2.設置初始值 anim.fromValue = @(0); anim.toValue = @(3 * 60); // 動畫的時長 anim.duration = 3 * 60; anim.beginTime = CACurrentMediaTime() + 1.f; [self.countLabel pop_addAnimation:anim forKey:@"countAnimation"]; 

總結

POP動畫確實在必定程度上給咱們帶來了很大的便利，利用以上的幾個動畫，應該能知足咱們平常的一些基本要求了。要是有更加複雜的動畫，就須要同窗們本身去探索了～我這裏就當拋磚引玉了。最近附上demo地址：

https://github.com/z782223468/Pop-Demo.git

做者：黑魚仔 連接：https://www.jianshu.com/p/427a3aebe4a2 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。