faceBook POP

5 Steps For Using Facebook Pop


// 1. Pick a Kind Of Animation //? POPBasicAnimation? POPSpringAnimation POPDecayAnimation

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

// 2. Decide weather you will animate a view property or layer property, Lets pick a View Property and pick kPOPViewFrame

// View Properties - kPOPViewAlpha kPOPViewBackgroundColor kPOPViewBounds kPOPViewCenter kPOPViewFrame kPOPViewScaleXY kPOPViewSize

// Layer Properties - kPOPLayerBackgroundColor kPOPLayerBounds kPOPLayerScaleXY kPOPLayerSize kPOPLayerOpacity kPOPLayerPosition kPOPLayerPositionX kPOPLayerPositionY kPOPLayerRotation kPOPLayerBackgroundColor

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];

// 3. Figure Out which of 3 ways to set toValue

//? anim.toValue = @(1.0);

//? anim.toValue =? [NSValue valueWithCGRect:CGRectMake(0, 0, 400, 400)];

//? anim.toValue =? [NSValue valueWithCGSize:CGSizeMake(40, 40)];

basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];

// 4. Create Name For Animation & Set Delegate

basicAnimation.name=@"AnyAnimationNameYouWant";

basicAnimation.delegate=self

// 5. Add animation to View or Layer, we picked View so self.tableView and not layer which would have been self.tableView.layer

[self.tableView pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];

Step 1 Pick Kind of Animation(選擇一種動(dòng)畫類別)

1梅肤,

POPBasicAnimation ? ? (基本)動(dòng)效可以在給定時(shí)間的運(yùn)動(dòng)中插入數(shù)值調(diào)整運(yùn)動(dòng)節(jié)奏

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

// kCAMediaTimingFunctionLinear? kCAMediaTimingFunctionEaseIn? kCAMediaTimingFunctionEaseOut? kCAMediaTimingFunctionEaseInEaseOut

2滔灶,

POPSpringAnimation? ? (彈性)動(dòng)效可以賦予物體愉悅的彈性效果

POPSpringAnimation *springAnimation = [POPSpringAnimation animation];

springAnimation.velocity=@(1000);? ? ? // change of value units per second

springAnimation.springBounciness=14;? ? // value between 0-20 default at 4

springAnimation.springSpeed=3;? ? // value between 0-20 default at 4

3,

POPDecayAnimation? ? (衰減) 動(dòng)效可以用來(lái)逐漸減慢物體的速度至停止

Step 2 Decide if you will animate a view property or layer property (步驟2決定是否將動(dòng)畫視圖屬性或圖層屬性)


View Properties

Alpha - kPOPViewAlpha

Color - kPOPViewBackgroundColor

Size - kPOPViewBounds

Center - kPOPViewCenter

Location & Size - kPOPViewFrame

Size - kPOPViewScaleXY

Size(Scale) - kPOPViewSize


Layer Properties

Color - kPOPLayerBackgroundColor

Size - kPOPLayerBounds

Size - kPOPLayerScaleXY

Size - kPOPLayerSize

Opacity - kPOPLayerOpacity

Position - kPOPLayerPosition

X Position - kPOPLayerPositionX

Y Position - kPOPLayerPositionY

Rotation - kPOPLayerRotation

Color - kPOPLayerBackgroundColor


Step 3 Find your property below then add and set .toValue? (步驟3找到下面你的財(cái)產(chǎn)赔蒲,然后添加和設(shè)置脖阵。價(jià)值)


View Properties (View 屬性)

Alpha - kPOPViewAlpha (透明度)

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewAlpha];

basicAnimation.toValue= @(0); // scale from 0 to 1

Color - kPOPViewBackgroundColor(顏色)

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPViewBackgroundColor];

basicAnimation.toValue= [UIColor redColor];

Size - kPOPViewBounds(大刑淘帷)

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewBounds];

basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)]; //first 2 values dont matter

Center - kPOPViewCenter(中心點(diǎn))

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewCenter];

basicAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 200)];

Location & Size - kPOPViewFrame(位置和大形铡)

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];

basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(140, 140, 140, 140)];

Size - kPOPViewScaleXY(還是大小)

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];

basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(3, 2)];

Size(Scale) - kPOPViewSize(大杏骸)

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewSize];

basicAnimation.toValue=[NSValue valueWithCGSize:CGSizeMake(30, 200)];

Layer Properties(Layer 屬性)(同上)

Color - kPOPLayerBackgroundColor

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBackgroundColor];

basicAnimation.toValue= [UIColor redColor];

Size - kPOPLayerBounds

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerBounds];

basicAnimation.toValue= [NSValue valueWithCGRect:CGRectMake(0, 0, 90, 90)]; //first 2 values dont matter

Size - kPOPLayerScaleXY

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerScaleXY];

basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(2, 1)];//increases width and height scales

Size - kPOPLayerSize

POPBasicAnimation *basicAnimation = [POPBasicAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPLayerSize];

basicAnimation.toValue= [NSValue valueWithCGSize:CGSizeMake(200, 200)];

Opacity - kPOPLayerOpacity

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerOpacity];

basicAnimation.toValue = @(0);

Position - kPOPLayerPosition

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPosition];

basicAnimation.toValue= [NSValue valueWithCGRect:CGRectMake(130, 130, 0, 0)];//last 2 values dont matter

X Position - kPOPLayerPositionX

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerPositionX];

basicAnimation.toValue= @(240);

Y Position - kPOPLayerPositionY

POPSpringAnimation *anim = [POPSpringAnimation animation];

anim.property=[POPAnimatableProperty propertyWithName:kPOPLayerPositionY];

anim.toValue = @(320);

Rotation - kPOPLayerRotation

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerRotation];

basicAnimation.toValue= @(M_PI/4); //2 M_PI is an entire rotation

Note: Property Changes work for all 3 animation types - POPBasicAnimation POPSpringAnimation POPDecayAnimation

Example ?(例子)


POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName: kPOPLayerRotation];

basicAnimation.toValue= @(M_PI/4); //2 M_PI is an entire rotation


Step 4 Create Name & Delegate For Animation(創(chuàng)建一個(gè)名字和設(shè)置代理)


basicAnimation.name=@"WhatEverAnimationNameYouWant";

basicAnimation.delegate=self;

Declare Delegate Protocol <POPAnimatorDelegate>(別忘了代理)


三個(gè)代理方法

- (void)pop_animationDidStart:(POPAnimation *)anim;

- (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;

- (void)pop_animationDidReachToValue:(POPAnimation *)aim;

例子:

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];

basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];

basicAnimation.name=@"WhatEverAnimationNameYouWant";

basicAnimation.delegate=self;


Step 5 Add animation to View(把動(dòng)畫加到View上面)


[self.yourview pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];


完整的例子:

????????????????????????????????????????????

POPSpringAnimation *basicAnimation = [POPSpringAnimation animation];

basicAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame];

basicAnimation.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 90, 190)];

basicAnimation.name=@"SomeAnimationNameYouChoose";

basicAnimation.delegate=self;

[self.tableView pop_addAnimation:basicAnimation forKey:@"WhatEverNameYouWant"];

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末觅玻,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子培漏,更是在濱河造成了極大的恐慌溪厘,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,013評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件北苟,死亡現(xiàn)場(chǎng)離奇詭異桩匪,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)友鼻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門闺骚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)妆档,“玉大人,你說(shuō)我怎么就攤上這事贾惦⌒匕穑” “怎么了碰镜?”我有些...
    開封第一講書人閱讀 152,370評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)绪颖。 經(jīng)常有香客問(wèn)我,道長(zhǎng)甜奄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,168評(píng)論 1 278
  • 正文 為了忘掉前任课兄,我火速辦了婚禮,結(jié)果婚禮上烟阐,老公的妹妹穿的比我還像新娘搬俊。我一直安慰自己,他們只是感情好蜒茄,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,153評(píng)論 5 371
  • 文/花漫 我一把揭開白布悠抹。 她就那樣靜靜地躺著,像睡著了一般扩淀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上啤挎,一...
    開封第一講書人閱讀 48,954評(píng)論 1 283
  • 那天驻谆,我揣著相機(jī)與錄音,去河邊找鬼庆聘。 笑死胜臊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的伙判。 我是一名探鬼主播象对,決...
    沈念sama閱讀 38,271評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼宴抚!你這毒婦竟也來(lái)了勒魔?” 一聲冷哼從身側(cè)響起甫煞,我...
    開封第一講書人閱讀 36,916評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎冠绢,沒(méi)想到半個(gè)月后抚吠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,382評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡弟胀,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,877評(píng)論 2 323
  • 正文 我和宋清朗相戀三年楷力,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孵户。...
    茶點(diǎn)故事閱讀 37,989評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡萧朝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夏哭,到底是詐尸還是另有隱情检柬,我是刑警寧澤,帶...
    沈念sama閱讀 33,624評(píng)論 4 322
  • 正文 年R本政府宣布方庭,位于F島的核電站厕吉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏械念。R本人自食惡果不足惜头朱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,209評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望龄减。 院中可真熱鬧项钮,春花似錦、人聲如沸希停。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,199評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)宠能。三九已至,卻和暖如春违崇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背渣淳。 一陣腳步聲響...
    開封第一講書人閱讀 31,418評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工入愧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人棺蛛。 一個(gè)月前我還...
    沈念sama閱讀 45,401評(píng)論 2 352
  • 正文 我出身青樓鞠值,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親钞钙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子声离,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,700評(píng)論 2 345

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

  • 當(dāng)聽聞Facebook要開源自己的Animation框架的時(shí)候术徊,我還以為是基于Core Animation進(jìn)行的封...
    韓七夏閱讀 1,069評(píng)論 0 0
  • 原文 5 Steps For Using Facebook Pop的摘要 選擇一種動(dòng)畫樣式, POPBasicAn...
    s2mh閱讀 753評(píng)論 0 0
  • POP: 一個(gè)流行的可擴(kuò)展的動(dòng)畫引擎iOS,它支持spring和衰變動(dòng)態(tài)動(dòng)畫,使其可用于構(gòu)建現(xiàn)實(shí),基于物理交互子寓。O...
    Justin_W閱讀 220評(píng)論 0 0
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果斜友,實(shí)現(xiàn)這些動(dòng)畫的過(guò)程并不復(fù)雜垃它,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,463評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果洛史,實(shí)現(xiàn)這些動(dòng)畫的過(guò)程并不復(fù)雜酱吝,今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,094評(píng)論 5 13