Facebook开源动画库 POP-POPSpringAnimation运用

时间:2022-12-31 10:16:46

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-POPSpringAnimation运用的更多相关文章

  1. Facebook 开源动画库 pop

    官网:https://github.com/facebook/pop Demo: https://github.com/callmeed/pop-playground 一:pop的基本构成: POPP ...

  2. 使用 Facebook开源动画库 POP 实现真实衰减动画

    1. POP动画基于底层刷新原理.是基于CADisplayLink,1秒钟运行60秒,接近于游戏开发引擎 @interface ViewController () @property (nonatom ...

  3. Facebook开源动画库 POP-POPBasicAnimation运用

    动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...

  4. Facebook开源动画库 POP-小实例

    实例1:图片视图跟着手在屏幕上的点改变大小 - (void)viewDidLoad { [super viewDidLoad]; //添加手势 UIPanGestureRecognizer *gest ...

  5. Facebook开源动画库 POP-POPDecayAnimation运用

    关于POPDecayAnimation的介绍先引用别人写的一些内容,基本上把它的一些注意点都说明了: Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果 ...

  6. rebound是facebook的开源动画库

    网址:http://www.jcodecraeer.com/a/opensource/2015/0121/2338.html 介绍: rebound是facebook的开源动画库.可以认为这个动画库是 ...

  7. [转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?

    iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 ...

  8. 第三方开源动画库EasyAnimation中一个小bug的修复

    看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...

  9. Lottie安卓开源动画库使用

    碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...

随机推荐

  1. System.gc

    Java中的内存分配是随着new一个新的对象来实现的,这个很简单,而且也还是有一些可以“改进”内存回收的机制的,其中最显眼的就是这个System.gc()函数. 乍一看这个函数似乎是可以进行垃圾回收的 ...

  2. .NET:再论异常处理,一个真实的故事

    .NET:再论异常处理,一个真实的故事 背景 关于是使用枚举或布尔类型来表示方法执行状态,还是使用异常,可以参考这里的文章:http://www.google.ee/search?q=site%3Aw ...

  3. scrapy 数据存储mysql

    #spider.pyfrom scrapy.linkextractors import LinkExtractor from scrapy.spiders import CrawlSpider, Ru ...

  4. django之模板显示静态文件

    由于django的模板渲染机制,图片不能直接引用,否则不会显示. <img src="/static/img/logo.jpg"> 可以看出图片的大小轮廓,但并不显示内 ...

  5. js文件上传原理(form表单 ,FormData &plus; XHR2 &plus; FileReader &plus; canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  6. DB9针和DB25针串口的引脚定义

    <设备监控技术详解>第3章串口设备监控,本章着力介绍串口交换机和串口联网方式.本节为大家介绍标准25针串口的引脚定义. 作者:李瑞民来源:机械工业出版社 3.3 串口线的制作和转换 串口的 ...

  7. react 粗略使用

    1.首先在index.html页面上写好dom,给他一个id让他引用js里的react. 2.index.js里面的代码就是三步走. 第一步:引用react,各种引用依赖. 第二步:创建dom,但它是 ...

  8. 薛兆丰吴军何帆曾鸣万维刚李笑来罗永浩等得到APP专栏作者的书23本

    最近看了何帆的<大局观>,是他在得到APP的专栏文章的精选.顺便整理以下最近两三年内看过的得到APP其他专栏与课程作者的得到精选文集和他们写过的其他的书共23本. 薛兆丰 4星|<薛 ...

  9. react-navigation 使用详解(转载)

    上篇博客和大家分享了关于React Native jsBundle预加载,界面启动优化的内容,详情可点击: 基于最新版本React Native实现JsBundle预加载,界面秒开优化 一.开源库介绍 ...

  10. 【BZOJ 3747】 3747&colon; &lbrack;POI2015&rsqb;Kinoman (线段树)

    3747: [POI2015]Kinoman Time Limit: 60 Sec  Memory Limit: 128 MBSubmit: 830  Solved: 338 Description ...