IOS FACEBOOK POP動畫詳解

POP框架介紹

POP 的架構

架構知識了解下就行

POP 目前由四部分組成：1. Animations；2. Engine；3. Utility；4. WebCore。

CADisplayLink 是類似 NSTimer 的定時器，不同之處在于，NSTimer 用于我們定義任務的執行周期、資料的更新周期，他的執行受到 CPU 的阻塞影響，而 CADisplayLink 則用于定義畫面的重繪、動畫的演變，他的執行基于 frames 的間隔。

通過 CADisplayLink，Apple 允許你將 App 的重繪速度設定到和屏幕刷新頻率一致，由此你可以獲得非常流暢的交互動畫，這項技術的應用在游戲中非常常見，著名的 Cocos-2D 也應用了這個重要的技術。

WebCore 里包含了一些從 Apple 的開源的網頁渲染引擎里拿出的源文件，與 Utility 里的組件一并，提供了 POP 的各項復雜計算的基本支持。

由此通過 Engine、Utility、WebCore 三個基石，打造了Animations。

==POPAnimation 有著和 CALayer 非常相似的 API。用法基本上相同==

基本動畫

1.Spring Animation 彈性效果 （

• Bounciness 反彈－影響動畫作用的參數的變化幅度
• Speed 速度
• Tension 拉力－影響回彈力度以及速度
• Friction 摩擦力－如果開啟，動畫會不斷重復，幅度逐漸削弱，直到停止。
• Mass 質量－細微的影響動畫的回彈力度以及速度

2.Decay Animation 衰減效果 (用于用戶的交互較多)

3.Property Animation & Basic Animation

4.POPCustomAnimation

使用demo

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; 
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)]; 
anim.springBounciness = 4.0; 
anim.springSpeed = 12.0; 
anim.completionBlock = ^(POPAnimation *anim, BOOL finished) { 
  if (finished) {NSLog(@"Animation finished!");}};
[self.popCircle.layer pop_addAnimation:anim forKey:@"Move"];
  
//completionBlock 提供了一個 Callback，動畫的執行過程會不斷調用這個 block，finished 這個布爾變量可以用來做動畫完成與否的判斷

animationWithPropertyNamed 后面跟屬性，具體屬性可以點進pop框架里看下POPAnimatableProperty這個類。使用還是很簡單，

1. 實例化動畫類

2. 設計相關動畫屬性
3. 使用 pop_addAnimation 添加動畫

擴展

1.組動畫

實例化動畫類 添加即可 動畫效果會同時進行

    POPSpringAnimation *Annimation1 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];

Annimation1.springSpeed = 40.0f;
Annimation1.springBounciness = 30.0f;
Annimation1.fromValue = [NSValue valueWithCGPoint:CGPointMake(0.3, 0.3)];
Annimation1.toValue = [NSValue valueWithCGPoint:CGPointMake(1, 1)];
POPSpringAnimation *Annimation2 = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];
Annimation2.springSpeed = 40.0f;
Annimation1.springBounciness = 30.0f;
Annimation2.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
[_Subview pop_addAnimation:Annimation1 forKey:@"Scale"];
[_Subview pop_addAnimation:Annimation2 forKey:@"Move"];

2.連續動畫

原理比較簡單就不說了，直接上代碼

 ```Objectivec
anim.completionBlock = ^(POPAnimation *anim, BOOL finished) { 

if (finished) {
NSLog(@"Animation finished!");
//加入新的動畫
}};

3.約束動畫

約束用的masonry

```objectivec
-(void)TipNumViewForword:(ForwordType)Type{

if(Type == UpForword){
    _BtnTipTop = -48.0f;
}
if(Type == DownForword){
    _BtnTipTop = 0.0f;
}
[self.view setNeedsUpdateConstraints];
[self.view updateConstraintsIfNeeded];

}

-(void)updateViewConstraints
{
[UIView animateWithDuration:1.0
delay:0
usingSpringWithDamping:0.7
initialSpringVelocity:20.0
options:0
animations:^{
[_BtnAlertTip mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.view.mas_top).with.offset(_BtnTipTop);//_BtnTipTop 全局 屬性 cgFloat類型
make.left.right.mas_equalTo(self.view);
make.height.mas_equalTo(48.0f);
}];
} completion:NULL];
[super updateViewConstraints];
}

  
4.形變動畫 
   

5.UIView動畫

    
    [UIView animateWithDuration:1.0
                          delay:0
         usingSpringWithDamping:0.7
          initialSpringVelocity:20.0
                        options:0
                     animations:^{
                     } completion:NULL];

usingSpringWithDamping：彈簧動畫的阻尼值，也就是相當于摩擦力的大小，該屬性的值從0.0到1.0之間，越靠近0，阻尼越小，彈動的幅度越大，反之阻尼越大，彈動的幅度越小，如果大道一定程度，會出現彈不動的情況。

initialSpringVelocity：彈簧動畫的速率，或者說是動力。值越小彈簧的動力越小，彈簧拉伸的幅度越小，反之動力越大，彈簧拉伸的幅度越大。這里需要注意的是，如果設置為0，表示忽略該屬性，由動畫持續時間和阻尼計算動畫的效果。

實例代碼

常用動畫效果POP-HandApp

poping

這個實例工程 寫了個關于更新約束方面的引用不過采用的是 Ios7后 添加的uiview 動畫函數

[UIView animateWithDuration:0.5
delay:0
usingSpringWithDamping:0.7
initialSpringVelocity:0.7
options:0
animations:^{
[self.contentView layoutIfNeeded];
} completion:NULL];

##參考文檔
[Pop–實現任意iOS對象的任意屬性的動態變化](https://segmentfault.com/a/1190000003706209)

[從Core Animation到Facebook‘s Pop（1）](http://www.cocoachina.com/design/20141222/10720.html) `-- 寫了 CoreAnimation 動畫分解過程 pop部分沒有介紹`

[Facebook Pop 使用指南](http://www.cocoachina.com/ios/20140527/8565.html)

[Facebook POP 進階指南](http://www.cocoachina.com/ios/20140704/9034.html)
`很有用有demo`

--CAAnimation

[iOS開發UI篇—核心動畫(基礎動畫)](http://www.cnblogs.com/wendingding/p/3801157.html)
(平移,縮放,旋轉)

[iOS開發UI篇—核心動畫(關鍵幀動畫)](http://www.cnblogs.com/wendingding/p/3801330.html)  
 >
 (跟CABasicAnimation的區別是：CABasicAnimation只能從一個數值(fromValue)變到另一個      數值(toValue)，而CAKeyframeAnimation會使用一個NSArray保存這些數值)


[iOS開發UI篇—核心動畫(轉場動畫和組動畫)](http://www.cnblogs.com/wendingding/p/3801454.html) `--動畫組合`

[iOS UIView Animation](http://www.devtalking.com/articles/uiview-animation-practice/)  `--寫的比較詳細`

##三方庫

pop 簡化使用 第三方庫  個人感覺用處不是太大，可以看下

[POP-MCAnimate](https://github.com/matthewcheok/POP-MCAnimate)