你的位置:首页 > 操作系统

[操作系统]Facebook开源动画库 POP


动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习;本文主要针对的是POPBasicAnimation运用;实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest

 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 */ ....}