IOS POP動畫

參考鏈接一:基礎(chǔ)知識
參考鏈接二:很詳細的講解

參考鏈接二:演示代碼

參考鏈接三:POPAnimation 源碼倉庫

pop與coreanimation不同之處, 在于pop可以支持任何NSObeject對象,而coreanimation只支持CALayer

  • 增刪改查示例:
// 添加動畫
POPSpringAnimation *anim = [POPSpringAnimation animation]; 
....
[layer pop_addAnimation:anim forKey:@"myKey"]; 
// 刪除動畫
[layer pop_removeAnimationForKey:@"myKey"];
// 查詢&修改動畫
anim = [layer animationForKey:@"myKey"];
if (anim){
anim.toValue = @(42.0);
}else{
....
}

一. 類型

Pop動畫總共有4種類型,如下:

(一). Spring 彈性動畫

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(0,0,400,400)];
[layer pop_addAnimation:anim forKey:@"size"];

(二). Decay 衰減動畫

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anim.velocity = [NSValue valueWithCGPoint:CGPointMake(3,3)]; // 速度
[layer pop_addAnimation:anim forKey:@"slide"];

(三). Basic 基礎(chǔ)動畫

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.fromValue = @(0.0);
anim.toValue = @(1.0);
[view pop_addAnimation:anim forKey:@"fade"];

(四). Custom 自定義動畫

// 占位

二. Properties 屬性設(shè)置

通過POPAnimatableProperty來設(shè)置具體屬性值

POPSpringAnimation *anim = [POPSpringAnimation animation];
anim.property = [POPAnimatableProperty propertyWithName:kPOPLayerBounds];

除了系統(tǒng)已經(jīng)提供的properties外,我們還可以定制自己的property

prop = [POPAnimatableProperty propertyWithName:@"com.foo.radio.volume" initializer:^(POPMutableAnimatableProperty *prop){
// get
prop.readBlock = ^(id obj, CGFloat values[]){
values[0] = [obj volume];
}

// set
prop.writeBlock = ^(id obj, const CGFloat values[]){
[obj setVolume:values[0]];

// dynamics threshold 動畫開始
prop.threshold = 0.01; 
}
}];

anim.property = prop;

三. 五步創(chuàng)建POPAnimation

(一). 選擇類型:POPBasicAnimtaion , POPSpringAnimation, POPDecayAnimation

1. POPBasicAnimation

POPSpringAnimaton *anim = [POPSpringAnimation animaton];
basicAnimation.timingFunciton = [CAMediaTimingFunciton functionWithName:kCAMediaTimingFunctionLinear];

kCAMediaTimingFunctionLinear kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut kCAMediaTimingFunctionEaseInEaseOut

2. POPSpringAnimation

POPSpringAnimation *springAnimation = [POPSpringAnimation animation];
springAnimation.velocity = @(1000); // 速率
sprngAnimation.springBounciness = 14; // 彈簧彈力:晃動的幅度,[0-20, 默認為4]
springAnimation.springSpeed = 3; // 彈簧速度 [0-20,默認為12] 
springAnimation.dynamicsMass = 3; // 彈簧質(zhì)量
springAnimation.dynamicsTension = 7;  // 彈簧張力
springAnimation.dynamicsFriction = 700; // 彈簧摩擦

3. POPDecayAnimation

POPDecayAniamtion *decayAnimation = [POPDecayAnimation animation];
decayAnimation.velocity = @(233);
decayAnimation.deceleration = 0.833;  [0-1] // 減速

(二). 屬性設(shè)置: properties

  • View: kPOPViewAlpha, kPOPViewBackgroundColor, kPOPViewBounds,
    kPOPViewCenter, kPOPViewFrame, kPOPViewScaleXY, kPOPViewSizer

  • Layer: kPOPLayerBackgroundColor, kPOPLayerBounds, kPOPLayerScaleXY,
    kPOPLayerSize, kPOPLayerOpacity, kPOPLayerPositionX, kPOPLayerPositionY, kPopLayerRotation

anim.property = [POPAnimationProperty propertyWithName:kPOPViewFrame];

(三). 設(shè)置改變值: toValue

  • anim.toValue = @(1.0); // alpha, opacity, positionX, positionY,rotation(M_PI/4)
  • anim.toValue = [UIColor redColor]; // color
  • anim.toValue = [NSValue valueWithCGPoint:CGPointMake(200,200)]; center,position
  • anim.toValue = [NSValue valueWithCGRect:CGRectMake(0,0,400,400)];
  • anim.toValue = [NSValue valueWithCGSize:CGSizeMake(40,40)]; // size,bounds,frame,scaleXY
anim.toValue  = [NSValue valueWithCRGectMake(0,0,90,100)];

(四). 命名&回調(diào)

anim.name = @"PopFrameAnim";
anim.completionBlock = ^(POPAnimation *anim, BOOL finished){

};
// 或者代理: <POPAnimatorDelegate>
- (void)pop_animationDidStart:(POPAnimation *)anim; 
- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;
- (void)pop_animationDidReachToValue:(POPAnimation *)anim;

(五). 添加

[view pop_addAnimation: anim forKey:@"PopFrameAnim"];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啊犬,一起剝皮案震驚了整個濱河市盖袭,隨后出現(xiàn)的幾起案子翔冀,更是在濱河造成了極大的恐慌昧旨,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件成玫,死亡現(xiàn)場離奇詭異绿渣,居然都是意外死亡,警方通過查閱死者的電腦和手機根灯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門径缅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人烙肺,你說我怎么就攤上這事纳猪。” “怎么了桃笙?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵氏堤,是天一觀的道長。 經(jīng)常有香客問我搏明,道長鼠锈,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任熏瞄,我火速辦了婚禮脚祟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘强饮。我一直安慰自己由桌,他們只是感情好,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布邮丰。 她就那樣靜靜地躺著行您,像睡著了一般。 火紅的嫁衣襯著肌膚如雪剪廉。 梳的紋絲不亂的頭發(fā)上娃循,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音斗蒋,去河邊找鬼捌斧。 笑死笛质,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的捞蚂。 我是一名探鬼主播妇押,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼姓迅!你這毒婦竟也來了敲霍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤丁存,失蹤者是張志新(化名)和其女友劉穎肩杈,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體解寝,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡扩然,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了编丘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片与学。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖嘉抓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情晕窑,我是刑警寧澤抑片,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站杨赤,受9級特大地震影響敞斋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜疾牲,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一植捎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧阳柔,春花似錦焰枢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至霍转,卻和暖如春荐绝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背避消。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工低滩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留召夹,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓恕沫,卻偏偏與公主長得像戳鹅,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子昏兆,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

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

  • POP背后的開發(fā)者是 Kimon Tsinteris枫虏, Push Pop Press 的聯(lián)合創(chuàng)始人,曾經(jīng)在Appl...
    SunshineBrother閱讀 12,891評論 4 48
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫爬虱,核心動畫隶债,幀動畫,自定義轉(zhuǎn)場動畫跑筝。 1.UIView...
    請叫我周小帥閱讀 3,101評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果死讹,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌曲梗。在這里你可以看...
    每天刷兩次牙閱讀 8,495評論 6 30
  • "小畫板程序"完成"小畫板"程序赞警。 下載地址:http://git.oschina.net/changyou/my...
    _淺墨_閱讀 693評論 0 5
  • 一、UIKit動畫 第一種寫法是利用屬性虏两,結(jié)合beginAnimations愧旦、commitAnimations 第...
    Gary_Tseng閱讀 965評論 1 3