Facebook开源动画库 POP-POPSpringAnimation运用
POPSpringAnimation也许是大多数人使用POP的理由 其提供一个类似弹簧一般的动画效果;实例源代码已经上传至gitHub,地址:https://github.com/wujunyang/facebookPopTest
POPSpringAnimation可配置的属性与默认值为
springBounciness:4.0 //[0-20] 弹力 越大则震动幅度越大
springSpeed :12.0 //[0-20] 速度 越大则动画结束越快
dynamicsTension :0 //拉力 接下来这三个都跟物理力学模拟相关 数值调整起来也很费时 没事不建议使用哈
dynamicsFriction:0 //摩擦 同上
dynamicsMass :0 //质量 同上
注意:POPSpringAnimation是没有duration字段的 其动画持续时间由以上几个参数决定
实例1:实现一个X轴运动并有反弹效果的动画,在完成动画后输出当前的坐标值
//1:初始化第一个视图块
if (self.myRedView==nil) {
self.myRedView=[[UIView alloc]initWithFrame:CGRectMake(, , , )];
self.myRedView.backgroundColor=[UIColor redColor];
[self.view addSubview:self.myRedView];
} //创建一个POPSpringAnimation动画 实现X轴运动 有反弹效果
POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
anSpring.toValue =@();
anSpring.beginTime = CACurrentMediaTime() + 1.0f;
anSpring.springBounciness=14.0; //[0-20] 弹力 越大则震动幅度越大
anSpring.springSpeed=12.0; //[0-20] 速度 越大则动画结束越快
[anSpring setCompletionBlock:^(POPAnimation *prop, BOOL fint) {
if (fint) {
NSLog(@"self.myRedView.frame=%@",NSStringFromCGRect(self.myRedView.frame));
}
}];
[self.myRedView pop_addAnimation:anSpring forKey:@"myRedViewposition”];
可以查看到动画结束后,输出的值为:self.myRedView.frame={{285, 80}, {30, 30}}
实例2:实现一个视图块闪动的效果,从0.2到1.0的弹效果 缩放效果
//2:初始化一个视图块 if (self.myLayView==nil) { self.myLayView=[[UIView alloc]initWithFrame:CGRectMake(, , , )]; self.myLayView.backgroundColor=[UIColor blueColor]; [self.view addSubview:self.myLayView]; } //创建一个POPSpringAnimation动画 实现闪一下效果 从0.2到1.0的弹效果 缩放效果 POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; scaleAnimation.fromValue = [NSValue valueWithCGSize:CGSizeMake(0.2, 0.2f)]; scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.0f, 1.0f)]; scaleAnimation.beginTime = CACurrentMediaTime() + 1.0f; scaleAnimation.springBounciness = 20.0f; scaleAnimation.springSpeed = 20.0f; [self.myLayView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation”];
实例3:创建一个POPSpringAnimation动画 将视图进行旋转
//3:初始化一个视图块 if (self.myRotaView==nil) { self.myRotaView=[[UIView alloc]initWithFrame:CGRectMake(, , , )]; self.myRotaView.backgroundColor=[UIColor yellowColor]; [self.view addSubview:self.myRotaView]; } //创建一个POPSpringAnimation动画 将视图进行旋转 POPSpringAnimation *rotationAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation]; rotationAnimation.beginTime = CACurrentMediaTime() + 0.2; rotationAnimation.toValue = @(1.2); rotationAnimation.springBounciness = .f; rotationAnimation.springSpeed = ; [self.myRotaView.layer pop_addAnimation:rotationAnimation forKey:@"rotationAnim”];
实例4:创建一个POPSpringAnimation动画 按键左右摇动
//4:初始化一个按键 if (self.myButton==nil) { self.myButton=[[UIButton alloc]init]; self.myButton.frame=CGRectMake(, , , ); self.myButton.backgroundColor = [UIColor grayColor]; [self.myButton setTitle:@"登录" forState:UIControlStateNormal]; [self.myButton addTarget:self action:@selector(touchUpInside:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:self.myButton]; } 响应事件内容: -(void)touchUpInside:(id)sender { //创建一个POPSpringAnimation动画 按键左右摇动 POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX]; positionAnimation.velocity = @; positionAnimation.springBounciness = ; [positionAnimation setCompletionBlock:^(POPAnimation *animation, BOOL finished) { self.myButton.userInteractionEnabled = YES; }]; [self.myButton.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"]; }
实例5:结合先前的POPBasicAnimation动画,制画一个综合的动画效果,就是向下显示一个视图,又可以回收回去;
@interface OtherViewController () @property(assign,nonatomic)BOOL isMenuOpen; @property(strong,nonatomic)UIView *myMenuView; @property(nonatomic)CGPoint VisiblePosition,HiddenPosition; @end @implementation OtherViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor=[UIColor whiteColor]; _isMenuOpen=NO; self.VisiblePosition=CGPointMake(, ); self.HiddenPosition=CGPointMake(, -); UIBarButtonItem *anotherButton = [[UIBarButtonItem alloc] initWithTitle:@"显示" style:UIBarButtonItemStylePlain target:self action:@selector(refreshPropertyList)]; self.navigationItem.rightBarButtonItem = anotherButton; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } -(void)refreshPropertyList { if (_isMenuOpen) { [self hidePopup]; } else { [self showPopup]; } } //隐藏时响应 - (void)hidePopup { _isMenuOpen = NO; POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity]; opacityAnimation.fromValue = @(); opacityAnimation.toValue = @(); [self.myMenuView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"]; POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; positionAnimation.fromValue = [NSValue valueWithCGPoint:self.VisiblePosition]; positionAnimation.toValue = [NSValue valueWithCGPoint:self.HiddenPosition]; [self.myMenuView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"]; POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; scaleAnimation.fromValue = [NSValue valueWithCGSize:CGSizeMake(1.0f, 1.0f)]; scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.5f, 0.5f)]; [self.myMenuView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation"]; } //显示时响应 - (void)showPopup { //初始化视图 if (self.myMenuView==nil) { self.myMenuView=[[UIView alloc]initWithFrame:CGRectMake(,, , )]; self.myMenuView.backgroundColor=[UIColor redColor]; [self.view addSubview:self.myMenuView]; } _isMenuOpen = YES; POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity]; opacityAnimation.fromValue = @(); opacityAnimation.toValue = @(); opacityAnimation.beginTime = CACurrentMediaTime() + 0.1; [self.myMenuView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"]; POPBasicAnimation *positionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; positionAnimation.fromValue = [NSValue valueWithCGPoint:self.HiddenPosition]; positionAnimation.toValue = [NSValue valueWithCGPoint:self.VisiblePosition]; [self.myMenuView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"]; POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; scaleAnimation.fromValue = [NSValue valueWithCGSize:CGSizeMake(0.5, 0.5f)]; scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.0f, 1.0f)]; scaleAnimation.springBounciness = 20.0f; scaleAnimation.springSpeed = 20.0f; [self.myMenuView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation"]; } @end
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
Facebook开源动画库 POP-POPSpringAnimation运用的更多相关文章
- Facebook 开源动画库 pop
官网:https://github.com/facebook/pop Demo: https://github.com/callmeed/pop-playground 一:pop的基本构成: POPP ...
- 使用 Facebook开源动画库 POP 实现真实衰减动画
1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatom ...
- Facebook开源动画库 POP-POPBasicAnimation运用
动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...
- Facebook开源动画库 POP-小实例
实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gest ...
- Facebook开源动画库 POP-POPDecayAnimation运用
关于POPDecayAnimation的介绍先引用别人写的一些内容,基本上把它的一些注意点都说明了: Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果 ...
- rebound是facebook的开源动画库
网址:http://www.jcodecraeer.com/a/opensource/2015/0121/2338.html 介绍: rebound是facebook的开源动画库.可以认为这个动画库是 ...
- [转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?
iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 ...
- 第三方开源动画库EasyAnimation中一个小bug的修复
看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...
- Lottie安卓开源动画库使用
碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...
随机推荐
- 【Linux驱动】内核等待队列
在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...
- 开源服务专题之-------rsync数据备份
RSYNC是Remote Sync 远程同步的简称,与SCP的比较,SCP= 无法备份大量数据,类似windows的复制,而rsync=边复制 ,边统计,边比较,可以备份大量数据.可以镜像保存整个目录 ...
- Auto Mapper02《demo》
学习这些基本上网上都有一些教程或者别人做的demo,我是按照这个方式去学习的.先做个demo,学会如何去使用它,接着去慢慢的了解它是如何的运行的,理解里面的一些基本的基础知识.我们不可以再像 ...
- 相关子查询【SQL Server】
查询book表中大于该类图书价格平均值的图书信息 先将第一条记录的类编号的值为2代入子查询中,子查询为 select avg(price) from book b where b.id=2 则得到类编 ...
- ado.net 用c#与数据库连接实现增删改查
ADO.NET: 数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 是所有数据访问技术的基础 ...
- 使用POI替换word中的特定字符/文字改进版
package com.xfzx.test.POI.main; import java.io.File; import java.io.FileInputStream; import java.io. ...
- "Hello World!" for the NetBeans IDE
"Hello World!" for the NetBeans IDE It's time to write your first application! These detai ...
- 多态(RAW)
函数重写overwrite:当子类提供了和父类同名的虚函数时,称之为函数重写,函数的返回值类 函数名 参数列表必须完全相同 名字隐藏namehide:当子类提供了和父类同名的数据时 叫名字隐藏 函数重 ...
- 利用PBFunc在Powerbuilder中支付宝当面付功能
在PB实现支付宝当面付的功能,需要先在支付宝进行商户签约,并设置相关的公钥信息(具体参考支付宝文档). 然后使用对应的私钥文件对参数进RSAWithSha1前面计算.具体代码如下: string ls ...
- Verilog学习笔记简单功能实现(七)...............接口设计(并行输入串行输出)
利用状态机实现比较复杂的接口设计: 这是一个将并行数据转换为串行输出的变换器,利用双向总线输出.这是由EEPROM读写器的缩减得到的,首先对I2C总线特征介绍: I2C总线(inter integra ...