掘金主頁歡迎關(guān)注和提問康吵,以后也會不定期回答簡書上的提問
本文簡單介紹了FaceBook開原動畫框架POP的內(nèi)容及基本使用
Demo下載地址:https://github.com/iOSAppleBea/PopAnimationDemo
推薦一份參考文獻(xiàn)《iOS核心動畫高級技巧》:https://zsisme.gitbooks.io/ios-/content/chapter1/layers-and-trees.html
使用POP可以創(chuàng)建的 4 類動畫:
- Spring (彈性)動效可以賦予物體愉悅的彈性效果财忽;
- Decay (衰減) 動效可以用來逐漸減慢物體的速度至停止踪央;
- Basic (基本)傳統(tǒng)動畫夯辖,可以在給定時(shí)間的運(yùn)動中插入數(shù)值調(diào)整運(yùn)動節(jié)奏,支持默認(rèn)顶霞、線性徐伐、淡入、淡出女嘲、淡入淡出動畫畜份;
- Custom (自定義)自定義動畫,讓設(shè)計(jì)值創(chuàng)建自定義動效欣尼,只需簡單處理CADisplayLink爆雹,并聯(lián)系時(shí)間-運(yùn)動關(guān)系,使用難度略大于前三者愕鼓;
它們的繼承關(guān)系為
NSObject
|- POPAnimation
|- POPPropertyAnimation
|- POPBasicAnimation
|- POPDecayAnimation
|- POPSpringAnimation
|- POPCustomAnimation
所有的動畫屬性分為兩大類:作用于View與作用于Layer
View系:
不透明度 - kPOPViewAlpha
顏色 - kPOPViewBackgroundColor
大小 - kPOPViewBounds
中心點(diǎn) - kPOPViewCenter
位置與尺寸 - kPOPViewFrame
尺寸 - kPOPViewScaleXY
尺寸(按比例變化) - kPOPViewSize
Layer系:
顏色 - kPOPLayerBackgroundColor
大小 - kPOPLayerBounds钙态、kPOPLayerScaleXY、kPOPLayerSize
不透明度 - kPOPLayerOpacity
位置 - kPOPLayerPosition
X 坐標(biāo) - kPOPLayerPositionX
Y 坐標(biāo) - kPOPLayerPositionY
旋轉(zhuǎn) - kPOPLayerRotation
POP動畫常用屬性
這里簡單介紹幾個(gè)使用過程中常用的屬性
-
beginTime
:動畫開始時(shí)間菇晃,一般用animation.beginTime = CACurrentMediaTime() + 0.5;
動畫延遲0.5秒后執(zhí)行册倒; -
duration
:動畫持續(xù)時(shí)長,多用于基礎(chǔ)動畫磺送; -
timingFunction
:決定動畫節(jié)奏驻子; -
fromValue
:動畫的起始狀態(tài); -
toValue
:動畫的終止?fàn)顟B(tài)估灿; -
springBounciness
:彈簧彈力(幅度) 取值范圍為[0, 20]崇呵,默認(rèn)值為4; -
springSpeed
:彈簧速度甲捏,速度越快演熟,動畫時(shí)間越短 [0, 20],默認(rèn)為12司顿,和springBounciness一起決定著彈簧動畫的效果芒粹; -
velocity
:速率,常用于衰減動畫中大溜,速率被用來計(jì)算運(yùn)行的距離化漆; -
deceleration
:負(fù)加速度,Default = 0.998钦奋,如果你開發(fā)給火星人用座云,那么這個(gè)值使用 0.376 會更合適。減速效果增強(qiáng)(縮小動畫幅度)<< 0.998 << 減速效果降低(加大動畫幅度)
付材; -
completionBlock
:動畫完成后的回調(diào)朦拖,completionBlock 提供了一個(gè) Callback,動畫的執(zhí)行過程會不斷調(diào)用這個(gè) block厌衔,finished 這個(gè)布爾變量可以用來做動畫完成與否的判斷璧帝;
附:
· dynamicsTension 彈簧的張力,影響回彈力度及速度富寿;
· dynamicsFriction 彈簧摩擦力睬隶,開啟后,動畫會不斷重復(fù)页徐,并且幅度逐漸削弱苏潜,直到停止;
· dynamicsMass 質(zhì)量变勇,細(xì)微地影響動畫的回彈力度和速度恤左;
這三者可以從更細(xì)的粒度上替代springBounciness和springSpeed控制彈簧動畫的效果。
POP動畫的介紹與使用
1. POPBasicAnimation基礎(chǔ)動畫
基本動畫搀绣,接口方面和CABasicAniamtion很相似赃梧,使用可以提供初始值fromValue,這個(gè) 終點(diǎn)值toValue豌熄,動畫時(shí)長duration以及決定動畫節(jié)奏的timingFunction授嘀。timingFunction直接使用的CAMediaTimingFunction,是使用一個(gè)橫向縱向都為一個(gè)單位的擁有兩個(gè)控制點(diǎn)的貝賽爾曲線來描述的,橫坐標(biāo)為時(shí)間锣险,縱坐標(biāo)為動畫進(jìn)度蹄皱。
POPBasicAnimation *basicAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewScaleXY];
basicAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(3.0, 3.0)];
basicAnimation.duration = 1;
basicAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.ZView pop_addAnimation: basicAnimation forKey:@"basicAnimation"];
對timingFunction的設(shè)置也可以使用另外一種方法
POPBasicAnimation *offscreenAnimation = [POPBasicAnimation easeInAnimation];
offscreenAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerPositionX];
...
此處需要說明的:p
- (void)pop_addAnimation:(POPAnimation *)anim forKey:(NSString *)key
方法中Key的賦值,保證在動畫載體中Key的唯一性即可芯肤;
2. PopSpringAnimation
彈簧動畫是Bezier曲線無法表述的巷折,所以無法使用PopBasicAniamtion來實(shí)現(xiàn)。PopSpringAnimation便是專門用來實(shí)現(xiàn)彈簧動畫的崖咨。
POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
springAnimation.beginTime = CACurrentMediaTime() + 2;
springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(2.0, 2.0)];
springAnimation.springBounciness = 5.f;
springAnimation.springSpeed = 10;
springAnimation.completionBlock = ^(POPAnimation *anim, BOOL finished) {
POPSpringAnimation *resetAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
resetAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.0, 1.0)];
resetAnimation.springBounciness = 20.f;
resetAnimation.springSpeed = 10;
[self.ZView.layer pop_addAnimation:scaleAnimation forKey:@"resetAnimation"];
};
[self.ZView.layer pop_addAnimation: springAnimation forKey:@"springAnimation"];
如果你想讓視圖在原地抖動锻拘,產(chǎn)生吸引用戶的效果,那么給velocity屬性一個(gè)初值,并設(shè)置其彈簧洗漱 類似下面這樣:
POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
positionAnimation.beginTime = CACurrentMediaTime() + 0.1;
positionAnimation.velocity = @2000;
positionAnimation.springBounciness = 20;
視圖就會奇妙的一陣“抽搐”署拟,隨后這個(gè)動畫將變得索然無味??哈哈哈
3. PopDecayAnimation
基于Bezier曲線的timingFuntion同樣無法表述Decay Aniamtion婉宰,所以Pop就單獨(dú)實(shí)現(xiàn)了一個(gè) PopDecayAnimation,用于衰減動畫推穷。
POPDecayAnimation *decay_1 = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerBounds];
decay_1.velocity = [NSValue valueWithCGRect:CGRectMake(0, 0, 50.0, 50.0)];
[_ZButton.layer pop_addAnimation:decay_1 forKey:@"lalalal"];
POPDecayAnimation *decay_2 = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
decay_2.velocity = [NSValue valueWithCGPoint:CGPointMake(100, 500)];
[_Z2Button.layer pop_addAnimation:decay_2 forKey:@"lalalal"];
衰減動畫沒有 toValue 只有 fromValue心包,然后按照 velocity 來做衰減操作,如果不對fromValue賦值馒铃,那么動畫會按照載體的當(dāng)前狀態(tài)執(zhí)行蟹腾。這里非常值得一提的是,velocity 也是必須和你操作的屬性有相同的結(jié)構(gòu)区宇,如果你操作的是 bounds娃殖,想實(shí)現(xiàn)一個(gè)水滴滴到桌面的擴(kuò)散效果,那么應(yīng)該是 [NSValue valueWithCGRect:CGRectMake(0, 0,20.0, 20.0)]议谷。
動畫委托
POPAnimatorDelegate是可選的炉爆,擁有如下方法
- (void)pop_animationDidStart:(POPAnimation *)anim;
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
- (void)pop_animationDidReachToValue:(POPAnimation *)anim;
值得說的幾點(diǎn)
- 最后我們使用
pop_addAnimation
來讓動畫開始生效,如果你想刪除動畫的話柿隙,那么你需要調(diào)用pop_removeAllAnimations
叶洞。 與 iOS 自帶的動畫不同,如果你在動畫的執(zhí)行過程中刪除了物體的動畫禀崖,那么物體會停在動畫狀態(tài)的最后一個(gè)瞬間衩辟,而不是閃回開始前的狀態(tài); - Pop Animation應(yīng)用于CALayer時(shí)波附,在動畫運(yùn)行的任何時(shí)刻艺晴,
layer
和其presentationLayer
的相關(guān)屬性值始終保持一致,而Core Animation做不到 - 如果期望試圖始終保持動畫后的試圖狀態(tài)掸屡,那么請不要對該試圖或其父仕途進(jìn)行任何試圖元素上的增刪封寞,此類操作會導(dǎo)致使用過PopAnimation的試圖無法保持動畫的終了狀態(tài)。
- 位置類的Animation仅财,類似X/Y的toValue賦值狈究,是相對于父試圖的坐標(biāo),而且盏求,其坐標(biāo)是被操作試圖的錨點(diǎn)抖锥。