FaceBook pop 动画开源框架使用教程说明
2014-05-23 13:20
543 查看
https://github.com/facebook/pop
![](https://github.com/facebook/pop/blob/master/Images/pop.gif?raw=true)
Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration with existing Objective-C codebases and enables the animation of any property on any object. It's a mature and well-tested framework that drives all the animations and transitions in Paper.
![](https://travis-ci.org/facebook/pop.svg)
![](https://github.com/jxd001/POPdemo/blob/master/TestPop/Untitled1.gif?raw=true)
![](https://github.com/jxd001/POPdemo/blob/master/TestPop/Untitled2.gif?raw=true)
这个效果可以做一个弹出框从上往下跳出来,我之前做过这个效果,用了N多代码,用pop只用几句代码就实现了。
![](https://github.com/jxd001/POPdemo/blob/master/TestPop/Untitled3.gif?raw=true)
代码如下:
![](https://github.com/facebook/pop/blob/master/Images/pop.gif?raw=true)
Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration with existing Objective-C codebases and enables the animation of any property on any object. It's a mature and well-tested framework that drives all the animations and transitions in Paper.
POPdemo
A simple demo for facebook's pop framework.pop一共有四个大类
POPSpringAnimation 有弹性效果的动画类(个人比较喜欢这个) POPBasicAnimation 基本动画类 POPDecayAnimation 衰减动画类 POPCustomAnimation 可以自定义动画的类
导入pop
很简单,直接把pop文件夹拖到项目里,然后导入pop.h即可。#import "POP.h"
下面的代码示例用POPSpringAnimation做一个弹性放大-缩小的效果
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. //添加手势 UITapGestureRecognizer *gestureForSpring = [[UITapGestureRecognizer alloc] init]; [gestureForSpring addTarget:self action:@selector(changeSize:)]; [_springView addGestureRecognizer:gestureForSpring]; } - (void)changeSize:(UITapGestureRecognizer*)tap{ - //用POPSpringAnimation 让viewBlue实现弹性放大缩小的效果 POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerSize]; CGRect rect = _springView.frame; if (rect.size.width==100) { springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(300, 300)]; } else{ springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)]; } //弹性值 springAnimation.springBounciness = 20.0; //弹性速度 springAnimation.springSpeed = 20.0; [_springView.layer pop_addAnimation:springAnimation forKey:@"changesize"]; }
效果如下
![](https://github.com/jxd001/POPdemo/blob/master/TestPop/Untitled1.gif?raw=true)
上面的代码是改变view的size,下面示例改变position
POPSpringAnimation *springAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition]; CGPoint point = _springView.center; if (point.y==240) { springAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(point.x, -230)]; } else{ springAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(point.x, 240)]; } //弹性值 springAnimation.springBounciness = 20.0; //弹性速度 springAnimation.springSpeed = 20.0; [_springView pop_addAnimation:springAnimation forKey:@"changeposition"];
效果:
![](https://github.com/jxd001/POPdemo/blob/master/TestPop/Untitled2.gif?raw=true)
这个效果可以做一个弹出框从上往下跳出来,我之前做过这个效果,用了N多代码,用pop只用几句代码就实现了。
一个比较实用的效果,弹出菜单:
![](https://github.com/jxd001/POPdemo/blob/master/TestPop/Untitled3.gif?raw=true)
代码如下:
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"+" style:UIBarButtonItemStyleDone target:self action:@selector(showPop)]; - (void)showPop{ if (_isOpened) { [self hidePop]; return; } _isOpened = YES; POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame]; positionAnimation.fromValue = [NSValue valueWithCGRect:_hidePosition]; positionAnimation.toValue = [NSValue valueWithCGRect:_showPosition]; positionAnimation.springBounciness = 15.0f; positionAnimation.springSpeed = 20.0f; [_popView pop_addAnimation:positionAnimation forKey:@"frameAnimation"]; } - (void)hidePop{ POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPViewFrame]; positionAnimation.fromValue = [NSValue valueWithCGRect:_showPosition]; positionAnimation.toValue = [NSValue valueWithCGRect:_hidePosition]; //key一样就会用后面的动画覆盖之前的 [_popView pop_addAnimation:positionAnimation forKey:@"frameAnimation"]; _isOpened = NO; }
相关文章推荐
- FaceBook pop 动画开源框架使用教程说明
- FaceBook pop 动画开源框架使用说明
- GPUImage开源框架使用教程
- ionic入门教程第二十课-在微信中使用ionic的解决方案(开源框架)
- Android十大主流开源框架使用教程---Retrofit使用教程
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
- Farseer.net轻量级开源框架 入门篇:使用前说明
- UWP项目中EnitityFramework开源框架使用说明(二)
- 【开源java游戏框架libgdx专题】-09-动画的使用
- Android开源框架xUtils 说明以及使用
- Android十大主流开源框架使用教程---OKHTTP使用教程
- 开源框架:Appledoc——Objective-C文档生成工具使用教程
- B站开源播放框架ijkplayer(iOS版)使用教程
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
- iOS开发笔记--开源播放框架ijkplayer(iOS版)使用教程
- Fresco(Facebook开源的android项目)图片缓存框架的eclipse整合与使用探索(较详细配置说明)
- PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
- PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
- UWP项目中EnitityFramework开源框架使用说明(一)
- 开源播放框架ijkplayer(iOS版)使用教程