POP简单动画简单使用 (入门级别)
动画可以让APP“更友好”的与用户交互,苹果提供很多的好看的动画供开发者使用,不过简单的平移、旋转、缩放.......使用起来很简单,但是想要进行一些比较复杂的动画效果,使用起来就比较难以实现,俗话说需求促进开发,facebook提供的开源的框架供我们免费使用,底层使用的是c++去实现,流畅度不输苹果的动画效果,甚至有的动画效果看起来比苹果提供的动画更“流畅”。。。。。。
这篇文章介绍大名鼎鼎的POP动画的使用
POP: https://github.com/facebook/pop
POP有四种动画:
一:POPBasicAnimation 基础动画 与苹果的 Core Animation 一样
二:POPSpringAnimation 弹簧动画
三:POPDecayAnimation 减速动画(阻尼动画)
四:POPCustomAnimation 自定义动画 (自己实现动画效果),使用很简单不要害怕!!!
第一步:安装
推荐使用Cocoa pods安装 (不会使用Cocoa pods的自行百度吧!以下代码是基于1.0.9版本的!!!)
pod 'pop', '~> 1.0.9'
第二部:编写代码
#pragma mark----------------POPBasicAnimation(基础动画)--------------------
#pragma mark--平移
一:X轴移动
#import "ViewController.h" #import <POP.h> @interface ViewController () @property (nonatomic, weak) UIView * redView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIView * view = [[UIView alloc] initWithFrame:CGRectMake(10, 50, 100, 100)]; view.backgroundColor = [UIColor redColor]; [self.view addSubview:view]; self.redView = view; } - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { [super touchesBegan:touches withEvent:event]; [self eyBasic_kPOPLayerPositionX]; } - (void)eyBasic_kPOPLayerPositionX { // kPOPLayerPositionX 这个参数决定了执行什么动画 POPBasicAnimation * basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX]; // 不设置默认从当前位置开始执行动画 // basic.fromValue = @(self.redView.center.x); //移动后的位置 一定要包装为NSValue类型 basic.toValue = @(self.redView.center.x + 50); //开始动画的时间 相当于延迟 (当前时间+1.0秒)一般不设置 basic.beginTime = CACurrentMediaTime() + 1.0f; // 动画从开始到结束执行的时间 默认为0.4S 根据需要修改 basic.duration = 0.5; // 字符串@"positionX" 是自己起的名字可以传nil, // 有时候需要移除动画的时候才用到,一般很少用到 [self.redView pop_addAnimation:basic forKey:@"positionX"]; } @end
二: y轴移动
- (void)eyBasic_kPOPLayerPositionY { POPBasicAnimation * basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY]; basic.toValue = @(self.redView.center.y + 50); [self.redView pop_addAnimation:basic forKey:nil]; }
三:x和y轴同时移动
- (void)eyBasic_kPOPLayerPosition { POPBasicAnimation * basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; // 一定要包装为NSValue类型 basic.toValue = [NSValue valueWithCGPoint:CGPointMake(self.redView.center.x + 20, self.redView.center.y + 20)]; [self.redView pop_addAnimation:basic forKey:nil]; }
#pragma mark-----------------POPSpringAnimation(弹簧动画)-------------------
#pragma mark--平移
一:X轴移动
- (void)eySpring_kPOPLayerPositionX { POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX]; spring.toValue = @(self.redView.center.x + 100); // 动画执行的速度 0~20 默认12 spring.springSpeed = 20; // 弹簧的范围 0~20 默认为4 默认效果非常不明显 spring.springBounciness = 15; [self.redView pop_addAnimation:spring forKey:nil]; }
二: y轴移动
- (void)eySpring_kPOPLayerPositionY { POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY]; spring.toValue = @(self.redView.center.y + 100); spring.springBounciness = 15; [self.redView pop_addAnimation:spring forKey:nil]; }
三:x和y轴同时移动
- (void)eySpring_kPOPLayerPosition { POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition]; spring.toValue = [NSValue valueWithCGPoint:CGPointMake(self.redView.center.x + 100, self.redView.center.y + 100)]; spring.springBounciness = 15; [self.redView pop_addAnimation:spring forKey:@"positionX"]; }
#pragma mark----------------POPDecayAnimation(减速动画)------------------
#pragma mark--平移
一:X轴移动
- (void)eyDecay_kPOPLayerPosition { POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX]; // 速度 decay.velocity = @(600); // 衰减系数(越小则衰减得越快) 默认为0.998 decay.deceleration = 0.99; [self.redView pop_addAnimation:decay forKey:nil]; }
二:y轴移动
- (void)eyDecay_kPOPLayerPositionY { POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionY]; // 速度 decay.velocity = @(600); [self.redView pop_addAnimation:decay forKey:nil]; }
三:x和y轴同时移动
- (void)eyDecay_kPOPLayerPosition { POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition]; // 速度 decay.velocity = [NSValue valueWithCGPoint:CGPointMake(self.redView.center.x + 20, self.redView.center.y + 20)]; [self.redView pop_addAnimation:decay forKey:nil]; }
更多内容--> 博客导航 每周一篇哟!!!
有任何关于iOS开发的问题!欢迎下方留言!!!或者邮件 lieryangios@126.com 虽然我不一定能够解答出来,但是我会请教iOS开发高手!!!解答您的问题!!!