iOS | CAShapeLayer转场动画
什么也不说了,作为一名乐于分享技术的小开发,直接先上个样式最为直观贴切,有需要的朋友可以直接拿过去用。
需要demo请点击这里 :github
在这个demo中,核心为选用画布CAShapeLayer,因为一般都是用它来处理形状之类的动画,结合了贝塞尔曲线来控制路径,然后使用CABasicAnimation核心动画来产生所有效果。
首先封装一个自定义的动画。
///动画自定义封装
-(void)animationWithView:(UIView *)view{
//1.创建layer
CAShapeLayer *layer = [[CAShapeLayer alloc]init];
//2.创建贝塞尔路径(参数为圆的外接矩形)
//间距
CGFloat margin = 20;
//半径
CGFloat radius = 25;
//屏幕尺寸
CGFloat viewWidth = [UIScreen mainScreen].bounds.size.width;
//屏幕高度
CGFloat viewHeight = [UIScreen mainScreen].bounds.size.height;
//屏幕对角线
CGFloat endRadius =sqrt(viewHeight*viewHeight +viewWidth*viewWidth);
//起始路径
CGRect startRect = CGRectMake(viewWidth-2*radius-margin, margin, radius*2, radius*2);
UIBezierPath *startPath = [UIBezierPath bezierPathWithOvalInRect:startRect];
//终止路径
UIBezierPath *endPath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(startRect, -endRadius, -endRadius) ];
//3.设置贝塞尔属性
//填充颜色
layer.fillColor = [UIColor redColor].CGColor;
//4.将贝塞尔作为layer的路径
layer.path = startPath.CGPath;
//将layer作为父视图的遮罩图层.
view.layer.mask = layer;
//5.将path添加到视图中
//[self.view.layer addSublayer:layer];
//使用核心动画实现
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
//这个属性是判断是动画之前还是动画之后的。
if (self.isPresent) {
animation.fromValue = (__bridge id _Nullable)(startPath.CGPath);
animation.toValue = (__bridge id _Nullable)(endPath.CGPath);
}else{
animation.fromValue = (__bridge id _Nullable)(endPath.CGPath);
animation.toValue = (__bridge id _Nullable)(startPath.CGPath);
}
animation.delegate = self;
//设置动画属性
animation.fillMode = kCAFillModeForwards;
animation.duration = 2;
animation.removedOnCompletion = NO;
//添加动画到图层
[layer addAnimation:animation forKey:nil];
}
! 这里要注意这个mask的属性,设置之后就不需要再额外的add进去,它是一种用于遮罩视图的效果,并且设置的颜色会失效
在这个动画中,有三个重要的属性,号称“转场三剑客”。
UIViewControllerAnimatedTransitioning,主要负责转场的动画时间和动画具体内容。
#pragma mark - UIViewControllerAnimatedTransitioning
///转场动画时间
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
return 2;
}
///转场动画的内容
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
//1.获取上下文的容器视图
UIView *containerView = transitionContext.containerView;
//2.获取目标视图
UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
//3.将目标视图添加到容器视图
UIView *aniView = self.isPresent?toView:fromView;
[containerView addSubview:aniView];
//4.开始动画
[self animationWithView:aniView];
self.context = transitionContext;
}
CAAnimationDelegate,主要负责监控动画开始和动画结束之后。
#pragma mark - CAAnimationDelegate
///动画开始
- (void)animationDidStart:(CAAnimation *)anim{
}
///每次动画结束调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//5.告诉上下文完成转场,否则上下文将会一直等待系统通知是否完成.
[self.context completeTransition:YES];
}
UIViewControllerTransitioningDelegate,主要负责告诉系统由哪个控制器提供转场,哪个控制器来解除转场。
#pragma mark - UIViewControllerTransitioningDelegate
///告诉由谁提供转场
- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
self.isPresent = YES;
return self;
}
///由谁解除转场
- (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
self.isPresent = NO;
return self;
}
最后只需要在需要转场的控制器中使用这个封装的类即可
-(void)awakeFromNib{
[super awakeFromNib];
//1.设置跳转样式
self.modalPresentationStyle = UIModalPresentationCustom;
//2.设置代理
self.animation = [[JanCustomAnimation alloc]init];
self.transitioningDelegate = self.animation;
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self dismissViewControllerAnimated:YES completion:nil];
}
需要注意的是设置样式和代理,必须要优先于viewdidload之前设置,因为这里涉及到控制器的生命周期的问题。
好了,到这里就可以实现完整的自定义转场的酷炫效果了。
iOS | CAShapeLayer转场动画的更多相关文章
- iOS 自定义转场动画浅谈
代码地址如下:http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不 ...
- iOS 自定义转场动画
代码地址如下:http://www.demodashi.com/demo/12955.html 一.总效果 本文记录分享下自定义转场动画的实现方法,具体到动画效果:新浪微博图集浏览转场效果.手势过渡动 ...
- iOS自定义转场动画实战讲解
iOS自定义转场动画实战讲解 转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerA ...
- VCTransitionsLibrary –自定义iOS交互式转场动画的库
简介 VCTransitionsLibrary 提供了许多适用于入栈,出栈,模态等场景下控制器切换时的转场动画.它本身提供了一个定义好的转场动画库,你可以拖到自己工程中直接使用;也提供了许多拥有不同转 ...
- iOS 开发--转场动画
"用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下:" 本文主讲SWIFT版,OC版在后面会留下Demo下载 在iOS中,在同 ...
- iOS自定义转场动画的实现
iOS中熟悉的是导航栏中的push和pop这两种动画效果,在这里我们可以自己实现自己想要的一些转场动画 下面是我自己创建转场动画的过程 1.新建一个文件继承自NSObject ,遵循协议UIViewC ...
- ios图层转场动画
动画类型 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CA ...
- iOS之UI--转场动画
1.什么是转场动画? 就是从一个场景转换到另一个场景,像导航控制器的push效果,就是一个转场. 2.如何创建转场动画 创建转场动画 CATransition *anim = ...
- iOS之转场动画
CodeApp地址CATransition_Demo:https://github.com/Wheat-Qin/CATransition_Demo iOS中比较全的翻转过渡动画(不只是苹果提供的).包 ...
随机推荐
- ubuntu下安装MySQL8.0
为了一劳永逸不每次都到处找资料,花了一下午时间做了这些.其中大部分是根据官方手册来的,后面部分谢谢大佬的帮助,超开心. 一.首先,将MySQL APT存储库添加到系统的软件存储库列表中 1.转到htt ...
- 在Windows 7 上安装 Mapnik
环境: 1.Windows 7_64位 2.Python 2.7_32位 步骤: 1.下载 Mapnik SDK http://mapnik.org/download/ 我下载的是 Windo ...
- Hadoop的安装与配置(虚拟机中的伪分布模式)
1引言 hadoop如今已经成为大数据处理中不可缺少的关键技术,在如今大数据爆炸的时代,hadoop给我们处理海量数据提供了强有力的技术支撑.因此,了解hadoop的原理与应用方法是必要的技术知识. ...
- java原生文件打包
一.背景 前端时间,自己做的项目需要打包功能,不想再引外部的jar包 便用java.util.zip做了下该功能 二.适用场景 生成多个word.excel.xml等文件,并要求打包下载的情形 例:项 ...
- Hadoop ->> HDFS(Hadoop Distributed File System)
HDFS全称是Hadoop Distributed File System.作为分布式文件系统,具有高容错性的特点.它放宽了POSIX对于操作系统接口的要求,可以直接以流(Stream)的形式访问文件 ...
- Python新式类 单例模式与作用域(四)
1 新式类与旧式类 新式类拥有经典类的全部特性之外,还有一些新的特性,比如 __init__发生变化,新增了静态方法__new__,python3目前都采用新式类,新式类是广度优先,旧式类是深度优先 ...
- Struts的学习-配置
1.进入官网http://struts.apache.org/download.cgi#struts2513,这里为下载地址,(ps:struts-2.5.13-all版本). 2.将..\strut ...
- 在centos7中安装redis,并通过node.js操作redis
引言 最近在学习node.js 连接redis的模块,所以尝试了一下在虚拟机中安装cent OS7,并安装redis,并使用node.js 操作redis.所以顺便做个笔记. 如有不对的地方,欢迎大家 ...
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- 从产品展示页面谈谈Hybris系列之二: DTO, Converter和Populator
文章作者:张健(Zhang Jonathan) 上一篇文章 从产品展示页面谈谈Hybris的特有概念和设计结构 我们讲解了Hybris一些特有的概念以及大体架构,并且介绍了Facade层里是如何定义D ...