非死book POP動效庫使用教程

yn6e 9年前發布 | 22K 次閱讀 移動開發 Pop

步驟1: 安裝


使用CocoaPods安裝POP,只需要在Podfile中加入這么一行:

pod 'pop', '~> 1.0'

或者如果想要手動添加,那么參考POP Github中的描述:

除此之外,你還可以將工程添加到工作區里面,然后采用提供的配制文件。或者手動復制POP子目錄下的文件,復制到工程里面。如果選擇手動安裝,確保C++標準庫鏈入其中,只需要在項目鏈接標記中包含 -lc++即可。

非死book POP動效庫:https://github.com/非死book/pop

如果不懂得如何使用CocoaPods,請看這個教程:

CocoaPods簡易使用指南

步驟2: 將POP加入到工程中


在工程開頭添加如下:

#import <POP/POP.h>


步驟 3:創建動效


使用POP可以創建4類動效:: spring, decay, basic and custom.

Spring (彈性)動效可以賦予物體愉悅的彈性效果

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
Decay (衰減) 動效可以用來逐漸減慢物體的速度至停止

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
Basic(基本)動效可以在給定時間的運動中插入數值調整運動節奏

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
Custom(自定義)動效可以讓設計值創建自定義動效,只需簡單處理CADisplayLink,并聯系時間-運動關系

在這片簡短教程中將不涵蓋自定義動效,大家可以看看POP的Github來獲取更多進階知識https://github.com/非死book/pop

步驟4: 給動效添加屬性


Pop 讓我們可以這樣設置動效的屬性:

velocity : anim.velocity @(1000.);

fromValue: anim.fromValue @(0.0);

toValue: anim.toValue @(1.0);

bounciness: anim.springBounciness 10;

步驟5 :動起來


若想讓物體動起來,只需要添加步驟3所創建的東西到視圖。

[self.yourView.layer pop_addAnimation:anim forKey:@"typeANameForYourAnimationHere"];

這就是POP簡單創建動效的教程。大家可以看看例子來理解如何創建動效。爭取努力變得技藝純熟吧。


步驟6:測試效果

Pop有相關文件擴展作為測試。安裝測試文件的方法是用終端進入POP根目錄,然后輸入

pod install

必須確保CocoaPods已經安裝


# 動效案例


這個動效將按鈕縮小到一半

POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5)];
scaleAnimation.springBounciness = 10.f;
[self.button.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnim"];


這個動效將按鈕旋轉

POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
rotationAnimation.beginTime = CACurrentMediaTime() + 0.2;
rotationAnimation.toValue = @(1.2);
rotationAnimation.springBounciness = 10.f;
rotationAnimation.springSpeed = 3;
[button.layer pop_addAnimation:rotationAnimation forKey:@”rotationAnim”];


這個改變透明度:

POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];
opacityAnimation.toValue = @(0.5);
[animView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];

#更多


Pop Github : https://github.com/非死book/pop

Popping -Pop案例 : https://github.com/schneiderandre/popping

POP使用教程: https://github.com/maxmyers/非死bookPop


中文教程


POP使用指南(來自Cocohina)

使用FaceceBook的Pop框架替換UIScrollView的減速動畫(來自Cocohina)

非死book POP 進階指南(來自Cocohina)


demo參考鏈接:https://github.com/jxd001/POPdemo/blob/master/README.md

                              http://codeplease.io/

                              http://tapity.com/tutorial-getting-started-with-pop/

 本文由用戶 yn6e 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!