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的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...
随机推荐
- 解决360、猎豹浏览器等极速模式下css3兼容问题
有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...
- 把DataTable转换为泛型List<T>或是JSON
在开发ASP.NET Web API或ASP.NET MVC时,我们从数据库得到的数据往往是DataSet或是DataTable.为了能让前端JQuery能方便使用至这些数据,我们需要把这些数据转换为 ...
- QTableWidget的美化
FriendTable->setFrameShape(QFrame::NoFrame); //设置边框 FriendTable->setHorizontalHeaderLabels( ...
- makefile变量赋值
在定义变量的值时,我们可以使用其它变量来构造变量的值,在Makefile中有两种方式来在用变量定义变量的值. 先看第一种方式,也就是简单的使用“=”号,在“=”左侧是变量,右侧是变量的值,右侧变量的值 ...
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
- Windows Server 2012 配置多用户远程桌面
前段时间因为需要多用户同时远程连接 windows server 2012,但找了半天也没找到远程桌面管理,最后从搜索中找到如下方法,经测试可行! 打开注册表,进入路径: [HKEY_LOCAL_MA ...
- 登录校验(demo)
1. 登录流程分析图: 2. 登录demo:
- 让 ListView 在 Android 可回弹
说明:让 ListView 在 Android 可回弹. 适用:Delphi XE5 修改:找出 FMX.Platform.Android.pas 档案,并复制到自己的 Project 路径里,找到 ...
- PHP程序员7小时学会Kotlin系列
这是我尝试给自己一个目标去学会一门新语言的方法.正在创作中,敬请期待! 提纲 第一小时 概念 第二小时 基础 第三小时 函数 第四小时 类与对象 第五小时 类与对象二 第六小时 DSL 第七小时 工程 ...
- this指针
this Note:不论是类中的构造函数,还是类中的普通成员函数,内部都隐含一个形参叫this指针,用于接收当前正在构造/调用对象的地址,因此不同的对象被构造/调用时,同一个函数的执行结果不同;对于一 ...