https://github.com/facebook/pop

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"]; }

效果如下

上面的代码是改变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"];

效果:


这个效果可以做一个弹出框从上往下跳出来,我之前做过这个效果,用了N多代码,用pop只用几句代码就实现了。

一个比较实用的效果,弹出菜单:


代码如下:

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 动画开源框架使用教程说明的更多相关文章

  1. iOS开发Facebook POP动效库使用教程

    如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能 ...

  2. Facebook POP动效库使用教程

    编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地 ...

  3. [翻译] POP Facebook的动画开源库

    Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it s ...

  4. android gif动画开源框架android-gif-drawable

    地址:https://github.com/koral--/android-gif-drawable   github里介绍挺详细的 项目中需要显示gif图片,并对用户体验有较高的要求,之前一直在使用 ...

  5. iOS - 开源框架、项目和学习资料汇总(动画篇)

    动画 1. Core Animation笔记,基本的使用方法 – Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组.2. awe ...

  6. Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  7. Farseer.net轻量级ORM开源框架 V1.x 教程目录

    本篇教程将以Ver 1.x版本进行详细使用讲解 大家有任何疑问可以加入我们的官方QQ群进行讨论.QQ群:116228666 (Farseer.net开源框架交流) 请注明:Farseer.Net 整个 ...

  8. facebook打开动画pop

    POP源代码:https://github.com/facebook/pop demo相关链接:https://github.com/jxd001/POPdemo/blob/master/README ...

  9. iOS常用第三方开源框架和优秀开发者博客等

    博客收藏iOS开发过程好的开源框架.开源项目.Xcode工具插件.Mac软件.文章等,会不断更新维护,希望对你们有帮助.如果有推荐或者建议,请到此处提交推荐或者联系我. 该文档已提交GitHub,点击 ...

随机推荐

  1. 2.7-2.8 导入、导出数据(进/出)hive表的方式

    一.导入数据进hive表 1.语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (p ...

  2. mysql慢日志记录

    DBA工作:通过日志找到执行慢的sql语句 慢日志: - 执行时间 > 10 - 未命中索引 配置: - 基于内存 show variables like '%query%'; set glob ...

  3. TypeScript完全解读(26课时)_18.Mixins混入

    本节的代码在mixin.ts文件内 同时在index.ts内引入 混入就是把两个对象或者类的内容混合到一起,从而实现一些功能复用. 对象混入 js中对象的混入 先来看一个js中对象的混入的例子 首先定 ...

  4. 5-1条件运算符 & 5-2

    三目运算符 新建类: ConditionDemo 用三目运算符: package com.imooc.operator; public class ConditionDemo { public sta ...

  5. Unresolved function or method require()

    1. 这是在JavaScript配置中没有node.js,去设置中配置就行了,方法如下: setting -> Languages&Frameworks -> Javascript ...

  6. jquery冲突的关键字nodeName、nodeValue和nodeType!

    原文:http://blog.csdn.net/hdfyq/article/details/52805836 [缘由]在工作流数据库设计的时候,  都节点管理的功能.  结果有2个字段为  NODE_ ...

  7. C#获得当前执行的函数名、当前代码行、源代码文件名

    http://blog.csdn.net/newegg2009/article/details/6220385 C#获得当前执行的函数名.当前代码行.源代码文件名 [日期:2010-10-18 11: ...

  8. CentOS 6.5 升级gcc到4.8 以及libstdc++

    CentOS 6.5 自带gcc太旧不支持c11, 升级到4.8的步骤: 引用: http://cache.baiducontent.com/c?m=9d78d513d99216f31eb0d5690 ...

  9. IT兄弟连 JavaWeb教程 JSTL常用标签

    1.条件标签 条件标签能够实现Java语言中的if语句以及if-else语句的功能,它包括以下几种: <c:if>:用于实现Java语言中的if语句的功能. <c:choose> ...

  10. Validation(3)--全局参数异常校验捕获及返回XML解决

    @RestControllerAdvice原创直接上代码,后面再说怎么用1.这个是一个Form,用来接收参数的,一个简单的NotEmpty注解校验,merchantName这个参数是必传的: pack ...