FaceBook POP(PopAnimation)介紹與使用

掘金主頁歡迎關(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)抖锥。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市碎罚,隨后出現(xiàn)的幾起案子磅废,更是在濱河造成了極大的恐慌,老刑警劉巖荆烈,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拯勉,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)宫峦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門岔帽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人斗遏,你說我怎么就攤上這事山卦⌒兀” “怎么了诵次?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枚碗。 經(jīng)常有香客問我逾一,道長,這世上最難降的妖魔是什么肮雨? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任遵堵,我火速辦了婚禮,結(jié)果婚禮上怨规,老公的妹妹穿的比我還像新娘陌宿。我一直安慰自己,他們只是感情好波丰,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布壳坪。 她就那樣靜靜地躺著,像睡著了一般掰烟。 火紅的嫁衣襯著肌膚如雪爽蝴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天纫骑,我揣著相機(jī)與錄音蝎亚,去河邊找鬼。 笑死先馆,一個(gè)胖子當(dāng)著我的面吹牛发框,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播煤墙,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼梅惯,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了番捂?” 一聲冷哼從身側(cè)響起个唧,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎设预,沒想到半個(gè)月后徙歼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年魄梯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了桨螺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡酿秸,死狀恐怖灭翔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辣苏,我是刑警寧澤肝箱,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站稀蟋,受9級特大地震影響煌张,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜退客,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一骏融、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧萌狂,春花似錦档玻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至刷允,卻和暖如春冤留,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背树灶。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工纤怒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人天通。 一個(gè)月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓泊窘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親像寒。 傳聞我的和親對象是個(gè)殘疾皇子烘豹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359

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

  • 當(dāng)聽聞Facebook要開源自己的Animation框架的時(shí)候,我還以為是基于Core Animation進(jìn)行的封...
    韓七夏閱讀 1,078評論 0 0
  • pop支持4種動畫類型:彈簧動畫效果诺祸、衰減動畫效果携悯、基本動畫效果和自定義動畫效果。 彈簧動畫效果 1.效果圖如下:...
    happyte閱讀 3,325評論 0 13
  • 目錄 ** UIView 動畫 ** ** Core Animation ** ** FaceBook POP動畫...
    方向_4d0d閱讀 1,606評論 0 3
  • Workflow Workflow是iOS上一款優(yōu)秀的的工作流應(yīng)用筷笨,過去¥18的價(jià)格讓我望而卻步憔鬼,原因是我不確定能...
    LukeInside閱讀 1,003評論 0 1
  • 8天愉快的寒假國學(xué)班龟劲,讓溪溪對中國傳統(tǒng)文化有了興趣。每天上完后回來就嘰嘰喳喳現(xiàn)學(xué)現(xiàn)賣了轴或。感謝程老師昌跌,讓孩子...
    笑青閱讀 258評論 0 0