iOS faceBook pop動畫使用

POP是一個來自于Facebook,在iOS與OSX上通用的極具擴展性的動畫引擎西雀。它在基本的靜態(tài)動畫的基礎(chǔ)上增加的彈簧動畫與衰減動畫萨驶,使之能創(chuàng)造出更真實更具物理性的交互動畫。 Pop Animation在使用上和Core Animation很相似艇肴,都涉及Animation對象以及Animation的載體的概念 不同的是Core Animation的載體只能是CALayer腔呜,而Pop Animation可以是任意基于NSObject的對象
POP 使用 Objective-C++ 編寫,Objective-C++ 是對 C++ 的擴展

POP背后的開發(fā)者是 Kimon Tsinteris再悼, Push Pop Press 的聯(lián)合創(chuàng)始人核畴,曾經(jīng)在Apple擔任高級工程師,并參與了 iPhone 和 iPad 上軟件的研發(fā)(iPhone的指南針以及地圖)冲九。2011年的時候 Facebook 收購了他的公司谤草,此后他便加入了 Facebook 負責 Facebook iOS 版本的開發(fā)。

一.pop的介紹

pop結(jié)構(gòu)圖.png
  • POP 動畫極為流暢,主要在于Enimator 里丑孩,POP 通過 CADisplayLink 高達 60 FPS 的特性冀宴,打造了一個游戲級的動畫引擎。
  • CADisplayLink 是類似 NSTimer 的定時器温学,不同之處在于略贮,NSTimer 用于我們定義任務(wù)的執(zhí)行周期、資料的更新周期仗岖,他的執(zhí)行受到 CPU 的阻塞影響逃延,而 CADisplayLink 則用于定義畫面的重繪、動畫的演變轧拄,他的執(zhí)行基于 frames 的間隔真友。
  • 通過 CADisplayLink,Apple 允許你將 App 的重繪速度設(shè)定到和屏幕刷新頻率一致紧帕,由此你可以獲得非常流暢的交互動畫盔然,這項技術(shù)的應(yīng)用在游戲中非常常見,著名的 Cocos-2D 也應(yīng)用了這個重要的技術(shù)是嗜。
  • WebCore 里包含了一些從 Apple 的開源的網(wǎng)頁渲染引擎里拿出的源文件愈案,與 Utility 里的組件一并,提供了 POP 的各項復雜計算的基本支持

二.pop動畫

  • POPBasicAnimation //基礎(chǔ)動畫
  • POPSpringAnimation //彈簧動畫
  • POPDecayAnimation //衰減動畫
  • POPCustomAnimation //自定義動畫

POP動畫大部分屬性和CoreAnimation(核心動畫)的含義和用法一樣,也有部分特殊屬性
CALayer層各屬性

extern NSString * const kPOPLayerBackgroundColor;//背景色
extern NSString * const kPOPLayerBounds;//bounds
extern NSString * const kPOPLayerCornerRadius;//圓角半徑
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;

UIVIew層各屬性

extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;

其他層視圖層屬性

extern NSString * const kPOPNavigationBarBarTintColor;
extern NSString * const kPOPToolbarBarTintColor;
extern NSString * const kPOPTabBarBarTintColor;
extern NSString * const kPOPLabelTextColor;
  • 更多控件屬性可以參考框架里面類 POPAnimatableProperty.h

1.POPBasicAnimation基礎(chǔ)動畫

POPBasicAnimation *basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
 basic.toValue = @(300);
 basic.duration = 0.33;
 [self.markView pop_addAnimation:basic forKey: kPOPLayerPositionX];

添加一個動畫最少僅需三步
1)定義一個animation對象鹅搪,并指定對應(yīng)的動畫屬性(kPOPLayerPositionX)
2)設(shè)置初始值結(jié)束值(初始值可以不指定站绪,會默認從當前值開始)
3)添加到想產(chǎn)生動畫的對象上

注意:由于 POP 是基于定時器定時刷新添加動畫的原理,那么如果將動畫庫運行在主線程上丽柿,會由于線程阻塞的問題導致動畫效果出現(xiàn)卡頓恢准、不流暢的情況。

更為關(guān)鍵的是甫题,你不能將動畫效果放在子線程馁筐,因為你不能將對 view 和 layer 的操作放到主線程之外.POP 受主線程阻塞的影響很大,在使用過程中坠非,應(yīng)避免在有可能發(fā)生主線程阻塞的情況下使用 POP 敏沉,避免制作卡頓的動畫效果,產(chǎn)生不好的用戶體驗

2.POPSpringAnimation彈性動畫

屬性介紹

velocity: 設(shè)置動畫開始速度
springBounciness: 反彈振幅, 可以設(shè)置的范圍是0-20炎码,默認為4盟迟。值越大振動的幅度越大
springSpeed: 速度, 可以設(shè)置的范圍是0-20,默認為12.值越大速度越快潦闲,結(jié)束的越快
dynamicsMass: 質(zhì)量, 質(zhì)量越大攒菠,動畫的速度越慢,振動的幅度越大歉闰,結(jié)束的越慢
dynamicsTension: 拉力 拉力越大辖众,動畫的速度越快卓起,結(jié)束的越快
dynamicsFriction: 摩擦力, 摩擦力越大,動畫的速度越慢赵辕,振動的幅度越小。

注意: 以上的六個屬性中一般只會設(shè)置springBounciness和springSpeed, 如有特殊需求才會設(shè)置其他屬性

 POPSpringAnimation *psa = [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleX];
  psa.fromValue = @(0.3);
   psa.toValue = @(2);
    psa.springSpeed = 5;
    psa.springBounciness = 15;
    [self.markView pop_addAnimation:psa forKey: kPOPViewScaleX];

3.POPDecayAnimation衰減動畫

可以實現(xiàn)類似UIScrollView的滑動衰減效果
屬性介紹

  • deceleration (負加速度, 衰減系數(shù)(越小則衰減得越快)) 是一個你會很少用到的值概龄,默認是就是我們地球的 0.998还惠,如果你開發(fā)APP給火星人用,那么這個值你使用 0.376 會更合適
  • velocity 也是必須和你操作的屬性有相同的結(jié)構(gòu)私杜,如果你操作的是 bounds, 傳CGRect類型;如果 velocity 是負值蚕键,那么就會反向遞減
POPDecayAnimation *pda = [POPDecayAnimation animationWithPropertyNamed:kPOPViewSize];
  pda.velocity = [NSValue valueWithCGSize:CGSizeMake(300, self.markView.frame.size.height)];
  [self.markView pop_addAnimation:pda forKey:kPOPViewSize];

4. POPCustomAnimation自定義動畫

請三種動畫是默認動畫,集成POPPropertyAnimation類衰粹,基類中有一個屬性property 是用來驅(qū)動動畫的锣光。
property包含三個部分

  • readBlock告訴POP當前的屬性值
  • writeBlock中修改變化后的屬性值
  • threashold決定了動畫變化間隔的閾值 值越大writeBlock的調(diào)用次數(shù)越少

前三種動畫POP會自動創(chuàng)建,告訴系統(tǒng)如何根據(jù)當前時間片做出變化

 POPBasicAnimation *anim = [POPBasicAnimation animation];
    anim.duration = 10.0;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    POPAnimatableProperty * prop = [POPAnimatableProperty propertyWithName:@"count" initializer:^(POPMutableAnimatableProperty *prop) {
        prop.readBlock = ^(id obj, CGFloat values[]) {    
          values[0] = [[obj description] floatValue];
       };
        prop.writeBlock = ^(id obj, const CGFloat values[]) {    
            [obj setText:[NSString stringWithFormat:@"%.2f",values[0]]];
        };
      prop.threshold = 0.01;}];
    anim.property = prop;
    anim.fromValue = @(0.0);
    anim.toValue = @(100.0);
    [self.label pop_addAnimation:anim forKey:nil];

kCAMediaTimingFunctionLinear //線性步調(diào)對于那些立即加速并且保持勻速到達終點的場景會有意義
kCAMediaTimingFunctionEaseIn //慢慢加速然后突然停止
kCAMediaTimingFunctionEaseOut //全速開始铝耻,然后慢慢減速停止
kCAMediaTimingFunctionEaseInEaseOut//慢慢加速然后再慢慢減速
kCAMediaTimingFunctionDefault//同上誊爹,加速和減速的過程都稍微有些慢

三.pop動畫相關(guān)Core Animation的優(yōu)點

  • Pop Animation應(yīng)用于CALayer時,在動畫運行的任何時刻瓢捉,layer和其presentationLayer的相關(guān)屬性值始終保持一致频丘,而Core Animation做不到。
  • Pop Animation可以應(yīng)用任何NSObject的對象泡态,而Core Aniamtion必須是CALayer搂漠。

四.幾個比較炫酷的效果

見demo->FacebookPopDemo

demo效果

文章和代碼若有不對地方,歡迎批評指正某弦。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末桐汤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子靶壮,更是在濱河造成了極大的恐慌怔毛,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腾降,死亡現(xiàn)場離奇詭異馆截,居然都是意外死亡,警方通過查閱死者的電腦和手機蜂莉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門蜡娶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人映穗,你說我怎么就攤上這事窖张。” “怎么了蚁滋?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵宿接,是天一觀的道長赘淮。 經(jīng)常有香客問我,道長睦霎,這世上最難降的妖魔是什么梢卸? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮副女,結(jié)果婚禮上蛤高,老公的妹妹穿的比我還像新娘。我一直安慰自己碑幅,他們只是感情好戴陡,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著沟涨,像睡著了一般恤批。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上裹赴,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天喜庞,我揣著相機與錄音,去河邊找鬼棋返。 笑死赋荆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的懊昨。 我是一名探鬼主播窄潭,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼酵颁!你這毒婦竟也來了嫉你?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤躏惋,失蹤者是張志新(化名)和其女友劉穎幽污,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體簿姨,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡距误,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了扁位。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片准潭。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖域仇,靈堂內(nèi)的尸體忽然破棺而出刑然,到底是詐尸還是另有隱情,我是刑警寧澤暇务,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布泼掠,位于F島的核電站怔软,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏择镇。R本人自食惡果不足惜挡逼,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望腻豌。 院中可真熱鬧家坎,春花似錦、人聲如沸饲梭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽憔涉。三九已至,卻和暖如春析苫,著一層夾襖步出監(jiān)牢的瞬間兜叨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工衩侥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留国旷,地道東北人。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓茫死,卻偏偏與公主長得像跪但,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子峦萎,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361

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