Facebook开源动画库 POP-POPBasicAnimation运用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Facebook开源动画库 POP-POPBasicAnimation运用相关的知识,希望对你有一定的参考价值。
动画在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[email protected](0); basicAnimation.toValue[email protected](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 */ .... }
以上是关于Facebook开源动画库 POP-POPBasicAnimation运用的主要内容,如果未能解决你的问题,请参考以下文章
Facebook开源动画库 POP-POPSpringAnimation运用
让动画不再僵硬:Facebook Rebound Android动画库介绍