IOS FACEBOOK POP動畫詳解

IOS FACEBOOK POP動畫詳解

POP框架介紹

POP 的架構(gòu)

架構(gòu)知識了解下就行

POP 目前由四部分組成:1. Animations;2. Engine执解;3. Utility挤庇;4. WebCore赏壹。


POP 動畫極為流暢模狭,其秘密就在于這個 Engine 中的POPAnimator 里,POP 通過 ==CADisplayLink== 高達(dá) 60 FPS 的特性读虏,打造了一個游戲級的動畫引擎。

CADisplayLink 是類似 NSTimer 的定時器袁滥,不同之處在于盖桥,NSTimer 用于我們定義任務(wù)的執(zhí)行周期、資料的更新周期题翻,他的執(zhí)行受到 CPU 的阻塞影響揩徊,而 CADisplayLink 則用于定義畫面的重繪、動畫的演變嵌赠,他的執(zhí)行基于 frames 的間隔塑荒。

通過 CADisplayLink,Apple 允許你將 App 的重繪速度設(shè)定到和屏幕刷新頻率一致姜挺,由此你可以獲得非常流暢的交互動畫齿税,這項(xiàng)技術(shù)的應(yīng)用在游戲中非常常見,著名的 Cocos-2D 也應(yīng)用了這個重要的技術(shù)炊豪。

WebCore 里包含了一些從 Apple 的開源的網(wǎng)頁渲染引擎里拿出的源文件凌箕,與 Utility 里的組件一并,提供了 POP 的各項(xiàng)復(fù)雜計(jì)算的基本支持词渤。

由此通過 Engine牵舱、Utility、WebCore 三個基石缺虐,打造了Animations芜壁。

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

基本動畫

1.Spring Animation 彈性效果 (

  • Bounciness 反彈-影響動畫作用的參數(shù)的變化幅度
  • Speed 速度
  • Tension 拉力-影響回彈力度以及速度
  • Friction 摩擦力-如果開啟志笼,動畫會不斷重復(fù)沿盅,幅度逐漸削弱,直到停止纫溃。
  • Mass 質(zhì)量-細(xì)微的影響動畫的回彈力度以及速度

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腰涧,動畫的執(zhí)行過程會不斷調(diào)用這個 block,finished 這個布爾變量可以用來做動畫完成與否的判斷

animationWithPropertyNamed 后面跟屬性紊浩,具體屬性可以點(diǎn)進(jìn)pop框架里看下POPAnimatableProperty這個類窖铡。使用還是很簡單疗锐,

  1. 實(shí)例化動畫類
  1. 設(shè)計(jì)相關(guān)動畫屬性
  2. 使用 pop_addAnimation 添加動畫

擴(kuò)展

1.組動畫

實(shí)例化動畫類 添加即可 動畫效果會同時進(jìn)行

    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.連續(xù)動畫

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

 ```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:彈簧動畫的阻尼值费彼,也就是相當(dāng)于摩擦力的大小滑臊,該屬性的值從0.0到1.0之間,越靠近0箍铲,阻尼越小雇卷,彈動的幅度越大,反之阻尼越大颠猴,彈動的幅度越小关划,如果大道一定程度,會出現(xiàn)彈不動的情況翘瓮。

initialSpringVelocity:彈簧動畫的速率贮折,或者說是動力。值越小彈簧的動力越小资盅,彈簧拉伸的幅度越小调榄,反之動力越大,彈簧拉伸的幅度越大呵扛。這里需要注意的是每庆,如果設(shè)置為0,表示忽略該屬性择份,由動畫持續(xù)時間和阻尼計(jì)算動畫的效果扣孟。

實(shí)例代碼

常用動畫效果POP-HandApp

poping

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

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




##參考文檔
[Pop–實(shí)現(xiàn)任意iOS對象的任意屬性的動態(tài)變化](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 進(jìn)階指南](http://www.cocoachina.com/ios/20140704/9034.html)
`很有用有demo`

--CAAnimation

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

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


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

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

##三方庫

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

[POP-MCAnimate](https://github.com/matthewcheok/POP-MCAnimate)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末凤价,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子拔创,更是在濱河造成了極大的恐慌利诺,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剩燥,死亡現(xiàn)場離奇詭異慢逾,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)灭红,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門侣滩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人变擒,你說我怎么就攤上這事君珠。” “怎么了娇斑?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵策添,是天一觀的道長材部。 經(jīng)常有香客問我,道長唯竹,這世上最難降的妖魔是什么乐导? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮浸颓,結(jié)果婚禮上物臂,老公的妹妹穿的比我還像新娘。我一直安慰自己产上,他們只是感情好鹦聪,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蒂秘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪淘太。 梳的紋絲不亂的頭發(fā)上姻僧,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機(jī)與錄音蒲牧,去河邊找鬼撇贺。 笑死,一個胖子當(dāng)著我的面吹牛冰抢,可吹牛的內(nèi)容都是我干的松嘶。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼挎扰,長吁一口氣:“原來是場噩夢啊……” “哼翠订!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起遵倦,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤尽超,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后梧躺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體似谁,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年掠哥,在試婚紗的時候發(fā)現(xiàn)自己被綠了巩踏。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡续搀,死狀恐怖塞琼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情目代,我是刑警寧澤屈梁,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布嗤练,位于F島的核電站,受9級特大地震影響在讶,放射性物質(zhì)發(fā)生泄漏煞抬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一构哺、第九天 我趴在偏房一處隱蔽的房頂上張望革答。 院中可真熱鬧,春花似錦曙强、人聲如沸残拐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽溪食。三九已至,卻和暖如春娜扇,著一層夾襖步出監(jiān)牢的瞬間错沃,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工雀瓢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枢析,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓刃麸,卻偏偏與公主長得像醒叁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子泊业,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 目錄 ** UIView 動畫 ** ** Core Animation ** ** FaceBook POP動畫...
    方向_4d0d閱讀 1,588評論 0 3
  • 在iOS中隨處都可以看到絢麗的動畫效果把沼,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌脱吱。在這里你可以看...
    每天刷兩次牙閱讀 8,465評論 6 30
  • 一智政、CoreAnimation(核心動畫) 1.什么是核心動畫 Core Animation可以用在 Mac OS...
    就叫yang閱讀 9,125評論 1 34
  • 在iOS中隨處都可以看到絢麗的動畫效果,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜箱蝠,今天將帶大家一窺iOS動畫全貌续捂。在這里你可以看...
    F麥子閱讀 5,094評論 5 13
  • 一、折騰:來源于滿語的音譯宦搬,有三種基本解釋牙瓢;對事物進(jìn)行翻來覆去、反復(fù)的做和折磨的一種動作形態(tài)间校。所謂折騰矾克,就是沒事找...
    crazybiker閱讀 1,141評論 0 1