非死book开源动画库 POP-POPBasicAnimation运用

动画在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动画 让视图块的大小从50*50 慢慢变到100*100

    //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动画 让视图块的大小从60*30 慢慢变到100*100  动画完成后又有一个动画变成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 */    ....  }