自定义转场动画

效果图:


自定义转场


1.封装好的工具类(可以根据需求改变圆心的位置再封装)

WeCircleAnimation.h文件

#import<Foundation/Foundation.h>

#import<UIKit/UIKit.h>

@interface WeCircleAnimation :NSObject<UIViewControllerTransitioningDelegate>

@end

WeCircleAnimation.m文件

@interface WeCircleAnimation ()<UIViewControllerAnimatedTransitioning,CAAnimationDelegate>

//动画是呈现还是解除

@property (nonatomic, assign) BOOL isPresented;

//保存动画上下文(必须要弱引用,如果强引用则会导致循环引用,内存泄露)

@property (nonatomic, weak) id<UIViewControllerContextTransitioning> transitionContext;

@end

@implementation WeCircleAnimation

//告诉控制器谁来提供展现转场动画

- (nullable id)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{    

self.isPresented = YES;    return self;

}

//告诉控制器谁来提供解除转场动画

- (nullable id)animationControllerForDismissedController:(UIViewController *)dismissed{

self.isPresented = NO;

return self;

}

/** 返回动画时长 @param transitionContext 转场上下文 @return 转场动画 */

- (NSTimeInterval)transitionDuration:(nullable id)transitionContext{

return 0.3;

}

** 转场动画最核心的方法-有程序员提供自己的动画实现 @param transitionContext 转场上下文提供转场动画的所有细节 容器视图-转场动画的表演的舞台 转场上下文会对展现的控制器强引用 */

- (void)animateTransition:(id)transitionContext{

//1.获取容器视图

UIView *containerView = transitionContext.containerView;

//2.获取目标视图,如果是展现去toView,如果是解除,去fromView;

UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];

UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];

UIView *view = self.isPresented?toView:fromView;

NSLog(@"%@---%@",fromView,toView);

//3.添加目标视图到容器视图

[containerView addSubview:view];

//4.动画

[self layerAnimationWithView:view];

//5.一定要完成转场,如果不完成,系统会一直等待转场完成,就无法接收用户的任何交互

//应该在动画完成之后在通知系统转场结束

self.transitionContext = transitionContext;

}

-(void)layerAnimationWithView:(UIView *)view{

//1.创建形状图层ShapeLayer

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];

//圆的屏幕边距

CGFloat mergin = 20;

//圆的半径

CGFloat radiu = 25;

CGRect startRect = CGRectMake(view.bounds.size.width - mergin - radiu*2, mergin, radiu*2, radiu*2);

//2.创建圆形贝塞尔路径 参数是圆的外界矩形

UIBezierPath *startBezierPath = [UIBezierPath bezierPathWithOvalInRect:startRect];

CGFloat sWidth = view.bounds.size.width;

CGFloat sHeight = view.bounds.size.height;

//结束圆的半径(屏幕的半径)

CGFloat endRadius = sqrt(sWidth * sWidth + sHeight * sHeight);

//使用缩进矩形创建圆的外接矩形

CGRect endRect = CGRectInset(startRect, -endRadius, -endRadius);

//3.外接圆的的贝塞尔路径

UIBezierPath *endPath = [UIBezierPath bezierPathWithOvalInRect:endRect];

//设置形状图层的填充颜色 fillColor:填充圆 strokeColor:边框圆

//    shapeLayer.fillColor = [UIColor redColor].CGColor;

//4.绘制号的贝塞尔路径为形状图层的路径

shapeLayer.path = startBezierPath.CGPath;

//设置shapeLayer为控制器视图的遮罩图层

//5.设置mask遮罩图层:1.会裁切图层,让图层只能看见shapelayer的形状的区域 2.一旦将layer设置为遮罩图层之后,填充颜色会失效

view.layer.mask = shapeLayer;

//将shape添加到视图中,addSublayer实在当前的图层上添加一个layer的形状区域

//    [self.view.layer addSublayer:shapeLayer];

//5.动画 -如果要做layer视图的动画,不能使用UIView的动画,应该使用核心动画

//    [UIView animateWithDuration:3 animations:^{

//                //设置图层的路径

//        layer.path = endPath.CGPath;

//

//    }];

//6.实例化对象

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];

//7.设置动画的属性:1.时间  2.填充模式

//设置动画属性

//时长

animation.duration = [self transitionDuration:self.transitionContext];

//判断是展现还是解除

if (self.isPresented) {

//formValue

animation.fromValue = (__bridge id _Nullable)(startBezierPath.CGPath);

animation.toValue = (__bridge id _Nullable)(endPath.CGPath);

}else{

animation.fromValue = (__bridge id _Nullable)(endPath.CGPath);

animation.toValue = (__bridge id _Nullable)(startBezierPath.CGPath);

}

//设置向前填充模式

animation.fillMode = kCAFillModeForwards;

//完成之后不删除

animation.removedOnCompletion = NO;

//设置动画代理 必须要写在添加动画到图层的前面,否则代理不会调用(一旦将动画添加到图层,动画已经开启,在设置代理已经来不及了)

animation.delegate = self;

//8.将动画添加到图层 -shapeLayer,让哪个图层执行动画就应该将动画添加到哪个图层

[shapeLayer addAnimation:animation forKey:nil];

}

/**

监听动画完成

@param anim 动画

@param flag 完成

*/

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

[self.transitionContext completeTransition:YES];

}

@end


运用:

ViewController.m 

#import "ViewController.h"

#import "WeCircleAnimation.h"

@interface ViewController ()

@property (nonatomic, strong) WeCircleAnimation *circleAnnimation;

@end

@implementation ViewController

-(void)awakeFromNib{ 

   [super awakeFromNib];    

//1.设置展示样式为自定义    

self.modalPresentationStyle = UIModalPresentationCustom;  

  //2.设置转场代理    

self.circleAnnimation = [[WeCircleAnimation alloc]init];    self.transitioningDelegate = self.circleAnnimation;

}

- (void)viewDidLoad {    [super viewDidLoad];}-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event{

[self dismissViewControllerAnimated:YES completion:nil];

}

@end

storyBoard中的控件效果图



GitHub链接地址:https://github.com/KeithBigBather666/CircleAnnimation.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容