pop支持4种动画类型:弹簧动画效果、衰减动画效果、基本动画效果和自定义动画效果。

弹簧动画效果

1.效果图如下:

2.控制器代码如下,首先用pod安装导入pop框架:

#import "ViewController.h"

#import

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

CALayer *layer = [CALayer layer];

layer.frame = CGRectMake(0, 0, 50, 50);

layer.backgroundColor = [UIColor cyanColor].CGColor;

layer.cornerRadius = 25.f;

layer.position = self.view.center;

[self.view.layer addSublayer:layer];

// 弹簧动画

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];

anim.toValue = [NSValue valueWithCGPoint:CGPointMake(3.f, 3.f)];

anim.springSpeed = 0.f;

[layer pop_addAnimation:anim forKey:nil];

}

@end

3.上述代码设置了弹簧对象的速度(springSpeed)、最终值大小(toValue),最后图层对象layer添加弹簧对象。

衰减动画

1.衰减动画效果

2.实现代码:

#import "ViewController.h"

#import

@interface ViewController ()

@property(nonatomic) UIControl *dragView;

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// 初始化dragView

self.dragView = [[UIControl alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

self.dragView.center = self.view.center;

self.dragView.layer.cornerRadius = CGRectGetWidth(self.dragView.bounds)/2;

self.dragView.backgroundColor = [UIColor cyanColor];

[self.view addSubview:self.dragView];

[self.dragView addTarget:self

action:@selector(touchDown:)

forControlEvents:UIControlEventTouchDown];

// 添加手势

UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self

action:@selector(handlePan:)];

[self.dragView addGestureRecognizer:recognizer];

}

- (void)touchDown:(UIControl *)sender {

[sender.layer pop_removeAllAnimations];

}

- (void)handlePan:(UIPanGestureRecognizer *)recognizer {

// 拖拽

CGPoint translation = [recognizer translationInView:self.view];

recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,

recognizer.view.center.y + translation.y);

[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

// 拖拽动作结束

if(recognizer.state == UIGestureRecognizerStateEnded)

{

// 计算出移动的速度

CGPoint velocity = [recognizer velocityInView:self.view];

// 衰退减速动画

POPDecayAnimation *positionAnimation = \

[POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];

// 设置代理

positionAnimation.delegate = self;

// 设置速度动画

positionAnimation.velocity = [NSValue valueWithCGPoint:velocity];

// 添加动画

[recognizer.view.layer pop_addAnimation:positionAnimation

forKey:nil];

}

}

@end

3.对拖拽对象添加了pan手势,根据手势的位置移动拖拽对象,recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,recognizer.view.center.y + translation.y)之后要清零相对位置,即调用[recognizer setTranslation:CGPointMake(0, 0) inView:self.view]。在拖拽动作结束的时候,计算出相对速度设置给衰减动画对象。

基本动画效果

1.基本动画效果如下:

2.代码如下:

#import "ViewController.h"

#import

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// 创建view

UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

showView.alpha = 0.f;

showView.layer.cornerRadius = 50.f;

showView.center = self.view.center;

showView.backgroundColor = [UIColor cyanColor];

[self.view addSubview:showView];

// 执行基本动画效果

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];

anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

anim.fromValue = @(0.0);

anim.toValue = @(1.0);

anim.duration = 4.f;

[showView pop_addAnimation:anim forKey:nil];

}

@end

3.基本动画对象只需要设置起始值(fromValue)和最终值(toValue)以及持续时间(duration)就可以了。

POP动画综合实战

1.动画效果如下:

2.点击中间红色按钮,6个按钮从上面坠落。点击取消,6个按钮又从上边掉下消失。代码实现如下:

#import "BSPublishController.h"

#import "BSVerticalButton.h"

#import

@interface BSPublishController ()

@property(nonatomic,weak)UIImageView *sloganView;

@end

@implementation BSPublishController

- (void)viewDidLoad {

[super viewDidLoad];

//添加6个按钮

NSArray *name = @[@"发视频",@"发图片",@"发段子",@"发声音",@"审帖",@"离线下载"];

NSArray *imageName = @[@"publish-video",@"publish-picture",@"publish-text",@"publish-audio",@"publish-review",@"publish-offline"];

NSUInteger count = name.count;

NSUInteger maxCols = 3;

CGFloat buttonW = 72;

CGFloat buttonH = buttonW + 50;

CGFloat buttonStartX = 20;

CGFloat buttonStartY = (BSScreenH-2*buttonH)*0.5;

CGFloat buttonMargin = (BSScreenW-2*buttonStartX-buttonW*maxCols)/(maxCols-1);

for (NSUInteger i = 0; i < count; i++) {

BSVerticalButton *button = [[BSVerticalButton alloc]init];

[button setImage:[UIImage imageNamed:imageName[i]] forState:UIControlStateNormal];

[button setTitle:name[i] forState:UIControlStateNormal];

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

button.titleLabel.font = [UIFont systemFontOfSize:14];

button.tag = i;

[button addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:button];

//计算frame

NSUInteger row = i/maxCols;

NSUInteger col = i%maxCols;

CGFloat buttonX = buttonStartX + col*(buttonW+buttonMargin);

CGFloat buttonY = buttonStartY + row*buttonH;

//使用pop框架,改变frame往下掉,而且不需要再设置frame了,因为pop改变了frame

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];

anim.fromValue = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonY-BSScreenH, buttonW, buttonH)];

anim.toValue = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonY, buttonW, buttonH)];

anim.springBounciness = 8;

anim.springSpeed = 8;

anim.beginTime = CACurrentMediaTime()+0.1*i;

[button pop_addAnimation:anim forKey:nil];

}

//添加顶部图片

UIImageView *slogan = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"app_slogan"]];

self.sloganView = slogan;

[self.view addSubview:slogan];

//中心约束

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewCenter];

anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(BSScreenW*0.5, BSScreenH*0.2-BSScreenH)];

anim.toValue = [NSValue valueWithCGPoint:CGPointMake(BSScreenW*0.5, BSScreenH*0.2)];

anim.springBounciness = 8;

anim.springSpeed = 8;

anim.beginTime = CACurrentMediaTime()+0.1*count;

[slogan pop_addAnimation:anim forKey:nil];

}

上面没有单独设置按钮的frame,而是在pop对象的属性(fromValue和toValue)里进行了设置。这里重写了Button按钮,重写的代码如下:

#import "BSVerticalButton.h"

@implementation BSVerticalButton

- (instancetype)initWithFrame:(CGRect)frame {

if (self == [super initWithFrame:frame]) {

self.titleLabel.textAlignment = NSTextAlignmentCenter;

}

return self;

}

- (void)awakeFromNib {

self.titleLabel.textAlignment = NSTextAlignmentCenter;

}

//这个是控件重新布局,所以要调用layoutSubviews,而修改控件大小,是调用setFrame

- (void)layoutSubviews {

[super layoutSubviews];

self.imageView.x = 0;

self.imageView.y = 0;

self.imageView.width = self.width;

self.imageView.height = self.imageView.width;

self.titleLabel.x = 0;

self.titleLabel.y = self.imageView.height;

self.titleLabel.width = self.width;

self.titleLabel.height = self.height - self.width;

}

- (void)setFrame:(CGRect)frame {

[super setFrame:frame];

}

@end

点击取消6个按钮从上面掉下来,代码如下:

- (void)cancel:(void(^)(int))completeion{

//让按钮往下掉

NSUInteger index = 2;

NSUInteger count = self.view.subviews.count;

for (NSUInteger i = index; i

UIView *subview = self.view.subviews[i];

//这里不需要计算frame,因为已经添加到view中,只需要设置最后的位置

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];

anim.toValue = [NSValue valueWithCGPoint:CGPointMake(subview.centerX, subview.centerY+BSScreenH)];

anim.beginTime = CACurrentMediaTime()+0.1*i;

[subview pop_addAnimation:anim forKey:nil];

if (i == count-1) {

//最后一个控件pop完退出控制器,写在外面会直接退出

[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {

if (completeion) {

}

[self dismissViewControllerAnimated:NO completion:nil];

}];

}

}

}

dismiss ios pop效果_iOS 动画框架pop使用方法相关推荐

  1. dismiss ios pop效果_iOS ~ ViewController的Push,Pop和Present,Dismiss转场动画

    转场动画涉及到的包括导航控制器的Push动画和Pop动画,以及普通控制器的Present和Dismiss动画,主要就是通过控制器遵守UIViewControllerTransitioningDeleg ...

  2. Facebok的动画框架pop

    来源:http://www.jianshu.com/p/1172578c96e1 该开源框架比苹果的Core Animation功能更强大,我强烈推荐该动画框架. Facebook Paper 官网: ...

  3. dismiss ios pop效果_iOS实现pop效果(模态一个气泡出来)

    前面写过一篇关于UIPopoverPresentationController简单实用的文章,在使用中可能会碰到一个问题,就是点击pop出来的界面之外的地方pop出的界面才会消失,这就导致如果我在po ...

  4. dismiss ios pop效果_iOS正确解决隐藏导航栏后push和pop或dismiss和present闪黑问题

    情景: 一级页面不显示导航栏 ,二级页面显示导航栏. 方法一 适用于push/pop: 一级页面中 - (void)viewWillAppear:(BOOL)animated { [super vie ...

  5. dismiss ios pop效果_iOS实现自定义炫酷的弹出视图(popView)

    "前段时间,在项目中有个需求是支付完成后,弹出红包,实现这么一个发红包的功能.做了最后,实现的效果大致如下:" ###一.使用方法 整个ViewController的代码大致如下 ...

  6. Facebook POP 动画框架 进阶指南

    http://www.cocoachina.com/industry/20140704/9034.html http://www.cocoachina.com/ios/20140508/8352.ht ...

  7. iOS 自定义转场动画, nav的push/pop自定义动画

    本文记录分享下自定义转场动画的实现方法,具体到动画效果:新浪微博图集浏览转场效果.手势过渡动画.网易音乐启动屏转场动画.开关门动画.全屏侧滑返回效果 的代码可以到Github WSLTransferA ...

  8. iOS7新特性 ViewController转场切换(二) 系统视图控制器容器的切换动画---push pop present dismis

    @上一章,介绍了主要的iOS7所增加的API,可以发现,它们不是一个个死的方法,苹果给我们开发者提供的是都是协议接口,所以我们能够很好的单独提出来写成一个个类,在里面实现我们各种自定义效果.     ...

  9. iOS 自定义转场动画实现小红书的push效果思路以及下雪碎屏等动画的实现

    感觉好久没写会动的Demo了,前几天写了很久的Block源码分析,分析了几天整个人都不好了,都不知道block是什么了......,有需要的同学可以去看看,简直不要太简单Block是什么鬼毕竟也是做电 ...

最新文章

  1. Operation Queues并发编程
  2. GitHub 总星 4w+!删库?女装?表情包?这些沙雕中文项目真是我每天快乐的源泉!...
  3. FileReader采用的默认编码
  4. 一天一点linux(9):ubuntu下如何搭建LAMP开发环境?
  5. java 执行cmd 堵塞_java中调用cmd命令被阻塞无法返回和继续执行
  6. C# DataTable的Select()方法不支持 != 判断
  7. 由熊猫烧香引发的思考
  8. Openlayers 2.X加载高德地图
  9. ubuntu 定时执行php文件,Ubuntu crontab 定时执行php脚本文件
  10. 超图iserver登录密码忘记,重置密码
  11. .Net线程问题解答
  12. 练手CF3-C - Wormhouse
  13. Perl BEGIN块和END块
  14. interrupt()会中断线程的wait等待
  15. [转] 谈谈JS中的函数节流
  16. 生成8位的不重复乱码
  17. msys 中打开系统程序
  18. Quickadmin:基于ThinkPhp6+Vue+ElementUI后台管理框架
  19. Si24R1,CI24R1,nRF24L01简单解析对比
  20. jw实验二:配置VLAN Trunks

热门文章

  1. python闭包详解函数_详解python函数的闭包问题(内部函数与外部函数详述)
  2. oracle xe 最大连接数,解决Oracle XE报错ORA-12516(Oracle回话数超出限制)
  3. php gearman 扩展,Ubuntu 12.04 安装 gearman 以及php扩展安装脚本
  4. webgis 行政图报错_WebGIS 地图 示例源码下载
  5. java程序语言228_2019年Java面试题基础系列228道(5)
  6. Spring Boot中使用MyBatis注解配置详解
  7. 论文浅尝 - ACL2020 | 用于多媒体事件提取的跨媒体结构化公共空间
  8. 领域应用 | NLP 和知识图谱:金融科技领域的“双子星”
  9. 维多利亚的秘密 2005-2018年视频合集
  10. Failed to execute goal org.apache.maven.plugins:maven-resources-plugin