非死book開源動畫庫 POP-POPBasicAnimation運用

BrendanBlad 8年前發布 | 11K 次閱讀 iOS開發開源移動開發

來自： http://www.cnblogs.com/wujy/p/5191220.html

動畫在APP開發過程中還是經常出現，將花幾天的時間對非死book開源動畫庫 POP進行簡單的學習；本文主要針對的是POPBasicAnimation運用；實例源代碼已經上傳至gitHub,地址：https://github.com/wujunyang/非死bookPopTest

POP默認支持三種動畫但同時也支持自定義動畫

POPBasicAnimation //基本動畫

POPSpringAnimation //類似彈簧一般的動畫效果

POPDecayAnimation //過阻尼效果，衰減效果

POPCustomAnimation //自定義動畫

一：POPBasicAnimation運用

實例1：創建一個動畫效果，關于視圖透明度的變化，從全透明經過五秒的時間變成alpha為1的不透明效果；此處運用到的POPBasicAnimation類；

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor=[UIColor whiteColor];

    //1:初始化一個視圖塊
    if (self.myView==nil) {
        self.myView=[[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
        self.myView.backgroundColor=[UIColor redColor];
        self.myView.alpha=0;
        [self.view addSubview:self.myView];
    }

    //創建一個POPBasicAnimation動畫
    POPBasicAnimation *basicAnimation=[POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    basicAnimation.fromValue=@(0);
    basicAnimation.toValue=@(1);
    basicAnimation.duration=5; //設置動畫的間隔時間 默認是0.4秒
    basicAnimation.repeatCount=HUGE_VALF; //重復次數 HUGE_VALF設置為無限次重復
    [self.myView pop_addAnimation:basicAnimation forKey:@"myViewAnimation"];
}

其實POP創建動畫的步驟分為三步，a:創建相應的動畫類 b:增加相應的屬性 c:附加到相應的對象上；

上面實例中kPOPViewAlpha是POP為我們封裝好的一個關于透明度的動畫效果；加上屬性就滿足我們的要求；從而也引出POP中一個很關鍵的類POPAnimatableProperty，里面定義的一些常量在今后的運用中非常關鍵；

我們可以簡單看一下POPAnimatableProperty里面定義的一些常量，因為主要針對IOS方面，所以就選出IOS相關的內容：

/**
 Common CALayer property names.
 */
extern NSString * const kPOPLayerBackgroundColor;
extern NSString * const kPOPLayerBounds;
extern NSString * const kPOPLayerCornerRadius;
extern NSString * const kPOPLayerBorderWidth;
extern NSString * const kPOPLayerBorderColor;
extern NSString * const kPOPLayerOpacity;
extern NSString * const kPOPLayerPosition;
extern NSString * const kPOPLayerPositionX;
extern NSString * const kPOPLayerPositionY;
extern NSString * const kPOPLayerRotation;
extern NSString * const kPOPLayerRotationX;
extern NSString * const kPOPLayerRotationY;
extern NSString * const kPOPLayerScaleX;
extern NSString * const kPOPLayerScaleXY;
extern NSString * const kPOPLayerScaleY;
extern NSString * const kPOPLayerSize;
extern NSString * const kPOPLayerSubscaleXY;
extern NSString * const kPOPLayerSubtranslationX;
extern NSString * const kPOPLayerSubtranslationXY;
extern NSString * const kPOPLayerSubtranslationY;
extern NSString * const kPOPLayerSubtranslationZ;
extern NSString * const kPOPLayerTranslationX;
extern NSString * const kPOPLayerTranslationXY;
extern NSString * const kPOPLayerTranslationY;
extern NSString * const kPOPLayerTranslationZ;
extern NSString * const kPOPLayerZPosition;
extern NSString * const kPOPLayerShadowColor;
extern NSString * const kPOPLayerShadowOffset;
extern NSString * const kPOPLayerShadowOpacity;
extern NSString * const kPOPLayerShadowRadius;

/**
 Common CAShapeLayer property names.
 */
extern NSString * const kPOPShapeLayerStrokeStart;
extern NSString * const kPOPShapeLayerStrokeEnd;
extern NSString * const kPOPShapeLayerStrokeColor;
extern NSString * const kPOPShapeLayerFillColor;
extern NSString * const kPOPShapeLayerLineWidth;
extern NSString * const kPOPShapeLayerLineDashPhase;

/**
 Common NSLayoutConstraint property names.
 */
extern NSString * const kPOPLayoutConstraintConstant;


#if TARGET_OS_IPHONE

/**
 Common UIView property names.
 */
extern NSString * const kPOPViewAlpha;
extern NSString * const kPOPViewBackgroundColor;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewCenter;
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewScaleX;
extern NSString * const kPOPViewScaleXY;
extern NSString * const kPOPViewScaleY;
extern NSString * const kPOPViewSize;
extern NSString * const kPOPViewTintColor;

/**
 Common UIScrollView property names.
 */
extern NSString * const kPOPScrollViewContentOffset;
extern NSString * const kPOPScrollViewContentSize;
extern NSString * const kPOPScrollViewZoomScale;
extern NSString * const kPOPScrollViewContentInset;
extern NSString * const kPOPScrollViewScrollIndicatorInsets;

/**
 Common UITableView property names.
 */
extern NSString * const kPOPTableViewContentOffset;
extern NSString * const kPOPTableViewContentSize;

/**
 Common UICollectionView property names.
 */
extern NSString * const kPOPCollectionViewContentOffset;
extern NSString * const kPOPCollectionViewContentSize;

/**
 Common UINavigationBar property names.
 */
extern NSString * const kPOPNavigationBarBarTintColor;

/**
 Common UIToolbar property names.
 */
extern NSString * const kPOPToolbarBarTintColor;

/**
 Common UITabBar property names.
 */
extern NSString * const kPOPTabBarBarTintColor;

/**
 Common UILabel property names.
 */
extern NSString * const kPOPLabelTextColor;

#else

/**
 Common NSView property names.
 */
extern NSString * const kPOPViewFrame;
extern NSString * const kPOPViewBounds;
extern NSString * const kPOPViewAlphaValue;
extern NSString * const kPOPViewFrameRotation;
extern NSString * const kPOPViewFrameCenterRotation;
extern NSString * const kPOPViewBoundsRotation;

/**
 Common NSWindow property names.
 */
extern NSString * const kPOPWindowFrame;
extern NSString * const kPOPWindowAlphaValue;
extern NSString * const kPOPWindowBackgroundColor;

#endif

從上面的源代碼不難發現，其實針對不同的UIKit都有一些相應的常量，比如在UIView中就有我們上面實例中出現的kPOPViewAlpha；因為POP動畫是針對對象的，所以很多的控件都可以做出相應的動畫效果；CALayer、CAShapeLayer、UIView中相關的常量大部分控件都可以使用；

實例2：創建一個動畫效果，實現一個視圖在延遲2s后經過5秒的時間X軸從50移到300位置的動畫效果；

//2:初始化一個視圖塊
    if (self.myXView==nil) {
        self.myXView=[[UIView alloc]initWithFrame:CGRectMake(50, 210, 50, 50)];
        self.myXView.backgroundColor=[UIColor blueColor];
        [self.view addSubview:self.myXView];
    }

    //創建一個POPBasicAnimation動畫 X軸的變化 從50移到300位置
    POPBasicAnimation *anBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX];
    anBasic.toValue = @(300);
    anBasic.beginTime = CACurrentMediaTime() + 2.0f; //可以用來設置動畫延遲執行時間，若想延遲2s，就設置為CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當前時間
    anBasic.duration=5;//設置動畫的間隔時間 默認是0.4秒
    [self.myXView pop_addAnimation:anBasic forKey:@"myBackColorViewAnimation”];

實例3：創建一個動畫效果，實現視圖的背影色經過5秒后從黑色變成黃色的動畫效果；

 //3:初始化一個視圖塊
    if (self.myBackColorView==nil) {
        self.myBackColorView=[[UIView alloc]initWithFrame:CGRectMake(250, 100, 50, 50)];
        self.myBackColorView.backgroundColor=[UIColor blackColor];
        [self.view addSubview:self.myBackColorView];
    }

    //創建一個POPBasicAnimation動畫 視圖的背影色從黑色經過5秒后漸進變成黃色
    POPBasicAnimation *anBackGroundBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
    anBackGroundBasic.toValue=[UIColor yellowColor];
    anBackGroundBasic.duration=5;
    [self.myBackColorView pop_addAnimation:anBackGroundBasic forKey:@"myBackColorViewAnimation”];

從上面三個實例可以發現，其實toValue或FormValue的值都是根據動畫屬性類型來定義，因為它們都是id型；這也決定它們可以是任何類型的值，只要符合我們要求就行；

除了上面那些常用的屬性外，還有一個運行CAMediaTimingFunction:速度控制函數屬性；四種如下：

kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態的感覺

kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，然后加速離開

kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，然后減速的到達目的地

kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，然后減速的到達目的地。這個是默認的動畫行為。

實例4：創建一個POPBasicAnimation動畫視圖中心以kCAMediaTimingFunctionLinear直線運行到中心點為100,64

    //4:初始化一個視圖塊
    if (self.mytimingFunctionLinearView==nil) {
        self.mytimingFunctionLinearView=[[UIView alloc]initWithFrame:CGRectMake(0, 300, 50, 50)];
        self.mytimingFunctionLinearView.backgroundColor=[UIColor greenColor];
        [self.view addSubview:self.mytimingFunctionLinearView];
    }

    //創建一個POPBasicAnimation動畫 視圖中心以kCAMediaTimingFunctionLinear直線運行到中心點為100,64
    POPBasicAnimation *anLinearBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
    anLinearBasic.toValue=[NSValue valueWithCGPoint:CGPointMake(100, 64)];
    anLinearBasic.duration=5;
    anLinearBasic.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [self.mytimingFunctionLinearView pop_addAnimation:anLinearBasic forKey:@"myLinearBasic"];

實例5：創建一個POPBasicAnimation動畫視圖中心以kCAMediaTimingFunctionEaseInEaseOut直線運行到中心點為200,64

    //5:初始化一個視圖塊
    if (self.mytimingFunctionEaseInEaseOutView==nil) {
        self.mytimingFunctionEaseInEaseOutView=[[UIView alloc]initWithFrame:CGRectMake(100, 300, 50, 50)];
        self.mytimingFunctionEaseInEaseOutView.backgroundColor=[UIColor grayColor];
        [self.view addSubview:self.mytimingFunctionEaseInEaseOutView];
    }

    //創建一個POPBasicAnimation動畫 視圖中心以kCAMediaTimingFunctionEaseInEaseOut直線運行到中心點為200,64
    POPBasicAnimation *anEaseInEaseOutBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
    anEaseInEaseOutBasic.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 64)];
    anEaseInEaseOutBasic.duration=5;
    anEaseInEaseOutBasic.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.mytimingFunctionEaseInEaseOutView pop_addAnimation:anEaseInEaseOutBasic forKey:@"mytimingFunctionEaseInEaseOutView”];

POP比較好的一點是保留了動畫結束后的狀態，通過block回調。如下面的實例視圖塊的大小會被變成100*100

實例6：創建一個POPBasicAnimation動畫讓視圖塊的大小從5050 慢慢變到100100

    //6:初始化一個視圖塊
    if (self.mySizeView==nil) {
        self.mySizeView=[[UIView alloc]initWithFrame:CGRectMake(250, 300, 50, 50)];
        self.mySizeView.backgroundColor=[UIColor redColor];
        [self.view addSubview:self.mySizeView];
    }

    //創建一個POPBasicAnimation動畫 讓視圖塊的大小從50*50 慢慢變到100*100
    POPBasicAnimation *ansizeBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
    ansizeBasic.toValue=[NSValue valueWithCGSize:CGSizeMake(100, 100)];
    ansizeBasic.duration=5;
    ansizeBasic.repeatCount=HUGE_VALF;
    [self.mySizeView pop_addAnimation:ansizeBasic forKey:@"mySizeView”];

setCompletionBlock可以在動畫完成后做一些其它的操作；

實例7：創建一個POPBasicAnimation動畫讓視圖塊的大小從6030 慢慢變到100100 動畫完成后又有一個動畫變成60*30

    //7:初始化一個Label
    if (self.myLabel==nil) {
        self.myLabel=[[UILabel alloc]initWithFrame:CGRectMake(50, 300, 60, 30)];
        self.myLabel.backgroundColor=[UIColor redColor];
        self.myLabel.textAlignment=NSTextAlignmentCenter;
        self.myLabel.textColor=[UIColor whiteColor];
        self.myLabel.alpha=1;
        self.myLabel.text=@"Label";
        [self.view addSubview:self.myLabel];
    }

    //創建一個POPBasicAnimation動畫 讓視圖塊的大小從60*30 慢慢變到100*100  動畫完成后又有一個動畫變成60*30
    POPBasicAnimation* anLabelBasic = [POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
    anLabelBasic.duration=3.0;
    anLabelBasic.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    anLabelBasic.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [anLabelBasic setCompletionBlock:^(POPAnimation *ani, BOOL fin) {
        if (fin) {
            NSLog(@"self.myLabel.frame=%@",NSStringFromCGRect(self.myLabel.frame));

            POPBasicAnimation *newLabelAnimation=[POPBasicAnimation animationWithPropertyNamed:kPOPViewSize];
            newLabelAnimation.duration=3.0;
            newLabelAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(60, 30)];
            newLabelAnimation.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
            [self.myLabel pop_addAnimation:newLabelAnimation forKey:@"newMyLabelAnimation"];
        }
    }];
    [self.myLabel pop_addAnimation:anLabelBasic forKey:@"myLabelAnimation"];

對于forKey是為了可以管理相應的動畫，比如移除動畫之類的，可以簡單了解一下官方的實例

POPSpringAnimation *anim = [POPSpringAnimation animation];
...
[layer pop_addAnimation:anim forKey:@"myKey”];

移除：

[layer pop_removeAnimationForKey:@"myKey”];

可以判斷是否存在
anim = [layer pop_animationForKey:@"myKey"];
if (anim) {
  /* update to value to new destination */
  anim.toValue = @(42.0);
} else {
  /* create and start a new animation */
  ....
}

本文由用戶 BrendanBlad 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455546855448.html

iOS開發開源移動開發

非死book開源動畫庫 POP-POPBasicAnimation運用

實例1：創建一個動畫效果，關于視圖透明度的變化，從全透明經過五秒的時間變成alpha為1的不透明效果；此處運用到的POPBasicAnimation類；

實例2：創建一個動畫效果，實現一個視圖在延遲2s后經過5秒的時間X軸從50移到300位置的動畫效果；

實例3：創建一個動畫效果，實現視圖的背影色經過5秒后從黑色變成黃色的動畫效果；

實例4：創建一個POPBasicAnimation動畫視圖中心以kCAMediaTimingFunctionLinear直線運行到中心點為100,64

實例5：創建一個POPBasicAnimation動畫視圖中心以kCAMediaTimingFunctionEaseInEaseOut直線運行到中心點為200,64

實例6：創建一個POPBasicAnimation動畫讓視圖塊的大小從5050 慢慢變到100100

實例7：創建一個POPBasicAnimation動畫讓視圖塊的大小從6030 慢慢變到100100 動畫完成后又有一個動畫變成60*30

相關經驗

相關資訊

相關文檔

目錄

非死book開源動畫庫 POP-POPBasicAnimation運用

實例1：創建一個動畫效果，關于視圖透明度的變化，從全透明經過五秒的時間變成alpha為1的不透明效果；此處運用到的POPBasicAnimation類；

實例2：創建一個動畫效果，實現一個視圖在延遲2s后經過5秒的時間X軸從50移到300位置的動畫效果；

實例3：創建一個動畫效果，實現視圖的背影色經過5秒后從黑色變成黃色的動畫效果；

實例4：創建一個POPBasicAnimation動畫 視圖中心以kCAMediaTimingFunctionLinear直線運行到中心點為100,64

實例5：創建一個POPBasicAnimation動畫 視圖中心以kCAMediaTimingFunctionEaseInEaseOut直線運行到中心點為200,64

實例6：創建一個POPBasicAnimation動畫 讓視圖塊的大小從50*50 慢慢變到100*100

實例7：創建一個POPBasicAnimation動畫 讓視圖塊的大小從60*30 慢慢變到100*100 動畫完成后又有一個動畫變成60*30

相關經驗

相關資訊

相關文檔

目錄

實例4：創建一個POPBasicAnimation動畫視圖中心以kCAMediaTimingFunctionLinear直線運行到中心點為100,64

實例5：創建一個POPBasicAnimation動畫視圖中心以kCAMediaTimingFunctionEaseInEaseOut直線運行到中心點為200,64

實例6：創建一個POPBasicAnimation動畫讓視圖塊的大小從5050 慢慢變到100100

實例7：創建一個POPBasicAnimation動畫讓視圖塊的大小從6030 慢慢變到100100 動畫完成后又有一個動畫變成60*30