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 動畫極為流暢,主要在于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
文章和代碼若有不對地方,歡迎批評指正某弦。