Facebook开源动画库 POP-POPSpringAnimation运用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(0, 80, 30, 30)]; self.myRedView.backgroundColor=[UIColor redColor]; [self.view addSubview:self.myRedView]; } //创建一个POPSpringAnimation动画 实现X轴运动 有反弹效果 POPSpringAnimation *anSpring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX]; anSpring.toValue [email protected](300); 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(20, 120, 30, 30)]; 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(20, 170, 30, 30)]; 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 = 10.f; rotationAnimation.springSpeed = 3; [self.myRotaView.layer pop_addAnimation:rotationAnimation forKey:@"rotationAnim”];
实例4:创建一个POPSpringAnimation动画 按键左右摇动
//4:初始化一个按键 if (self.myButton==nil) { self.myButton=[[UIButton alloc]init]; self.myButton.frame=CGRectMake(20, 220, 60, 30); 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 = @2000; positionAnimation.springBounciness = 20; [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(290, 100); self.HiddenPosition=CGPointMake(290, -80); 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 = @(1); opacityAnimation.toValue = @(0); [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(0,0, 80, 50)]; self.myMenuView.backgroundColor=[UIColor redColor]; [self.view addSubview:self.myMenuView]; } _isMenuOpen = YES; POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity]; opacityAnimation.fromValue = @(0); opacityAnimation.toValue = @(1); 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
以上是关于Facebook开源动画库 POP-POPSpringAnimation运用的主要内容,如果未能解决你的问题,请参考以下文章
Facebook开源动画库 POP-POPSpringAnimation运用
让动画不再僵硬:Facebook Rebound Android动画库介绍