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(, , , )];

    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 + );

    //开始动画的时间 相当于延迟 （当前时间+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 + );

    [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 + , self.redView.center.y + )];

    [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 + );

    // 动画执行的速度 0~20 默认12

    spring.springSpeed = ;

    // 弹簧的范围 0~20 默认为4 默认效果非常不明显

    spring.springBounciness = ;

    [self.redView pop_addAnimation:spring forKey:nil];

}

二： y轴移动

- (void)eySpring_kPOPLayerPositionY

{

    POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];

    spring.toValue = @(self.redView.center.y + );

    spring.springBounciness = ;

    [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 + , self.redView.center.y + )];

    spring.springBounciness = ;

    [self.redView pop_addAnimation:spring forKey:@"positionX"];

}

#pragma mark----------------POPDecayAnimation(减速动画)------------------

#pragma mark--平移

一：X轴移动

- (void)eyDecay_kPOPLayerPosition

{

    POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];

    // 速度

    decay.velocity = @();

    // 衰减系数(越小则衰减得越快) 默认为0.998

    decay.deceleration = 0.99;

    [self.redView pop_addAnimation:decay forKey:nil];

}

二：y轴移动

- (void)eyDecay_kPOPLayerPositionY

{

    POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionY];

    // 速度

    decay.velocity = @();

    [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 + , self.redView.center.y + )];

    [self.redView pop_addAnimation:decay forKey:nil];

}

更多内容--> 博客导航每周一篇哟!!!

有任何关于iOS开发的问题!欢迎下方留言!!!或者邮件 lieryangios@126.com 虽然我不一定能够解答出来,但是我会请教iOS开发高手!!!解答您的问题!!!

巴特西

POP简单动画简单使用 (入门级别)

最新文章

热门文章