5.Popping笔记--Custom Transition

Popping笔记。Github上搜索"Popping"即可下载源代码。

Custom Transition


分析动画。

1.点击中央的button,从上面弹出一个新的ViewController。

2.同时带有spring的效果,且原来的背景变为灰色。

3.点击新的button,则恢复原来的样子。


1.CustomTransitionViewController.m:

增加presentButton,设置点击事件。在我们使用addConstraint:方法时要注意这里:

[self.view addSubview:presentButton];

上面这行代码要在下面这些代码之前,否则会报错。

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:presentButton
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1.f
                                                       constant:0.f]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:presentButton
                                                      attribute:NSLayoutAttributeCenterY
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterY
                                                     multiplier:1.f
                                                       constant:0.f]];

2.在present:方法里,我们创建一个ModalViewController(即我们看到的蓝色的view controller)。

3.ModalViewController.m很简单。设置VC的背景颜色,圆角并且增加一个dismissButton,为这个dismissButton增加点击事件,因此用户点击的时候会调用dismissViewControllerAnimated:completion:(我们将VC的切换设置成了custom,所以事实上在调用presentViewController:animated:completion:和dismissViewControllerAnimated:completion:方法的时候,调用的是UIViewControllerTransitioningDelegate里面的方法,这样可以更自由的设置动画)。

4.回到CustomTransitionViewController.m,继续设置:

modalViewController.transitioningDelegate = self;
modalViewController.modalPresentationStyle = UIModalPresentationCustom;

[self.navigationController presentViewController:modalViewController
                                        animated:YES
                                      completion:NULL];

可以看到,将modalVC的transitioningDelegate设置为当前的VC,将modalVC的modalPresentationStyle设置为custom。

5.在我们设置transitioningDelegate的时候,我们给当前VC增加了一个协议:

@interface CustomTransitionViewController() <UIViewControllerTransitioningDelegate>

@end

这个协议有以下方法:

-(id< UIViewControllerAnimatedTransitioning >)animationControllerForPresentedController:(UIViewController )presented presentingController:(UIViewController )presenting sourceController:(UIViewController *)source;

-(id< UIViewControllerAnimatedTransitioning >)animationControllerForDismissedController:(UIViewController *)dismissed;

-(id< UIViewControllerInteractiveTransitioning >)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator;
    
-(id< UIViewControllerInteractiveTransitioning >)interactionControllerForDismissal:(id < UIViewControllerAnimatedTransitioning>)animator;

前两个用于动画切换,后两个用于交互切换。

这里我们用到的是前两个方法:

#pragma mark - UIViewControllerTransitioningDelegate

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source
{
    return [PresentingAnimator new];
}

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    return [DismissingAnimator new];
}

总结一下,我们设置了 modalViewController.transitioningDelegate = self 以及
modalViewController.modalPresentationStyle = UIModalPresentationCustom;并且实现了UIViewControllerTransitioningDelegate的两个方法。

这时候当我们调用presentViewController:animated:completion:方法的时候,会自动调用-(id< UIViewControllerAnimatedTransitioning >)animationControllerForPresentedController:(UIViewController )presented presentingController:(UIViewController )presenting sourceController:(UIViewController *)source方法。

当我们调用dismissViewControllerAnimated:completion:方法的时候,会自动调用-(id< UIViewControllerAnimatedTransitioning >)animationControllerForDismissedController:(UIViewController *)dismissed方法。这里是和第3点一样的。

6.可以看到,这两个代理方法返回的是

id<UIViewControllerAnimatedTransitioning>

也就是说是一个实现UIViewControllerAnimatedTransitioning协议的id类型的值。

所以我们创建了PresentingAnimator和DismissingAnimator,它们的父类都是NSObject,且都实现了UIViewControllerAnimatedTransitioning。

UIViewControllerAnimatedTransitioning这个协议有两个方法需要我们来实现:

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext;

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

第一个方法是VC切换的时间,第二个方法是具体如何切换。

7.我们首先来看PresentingAnimator.m:

首先将切换时间设置为0.5:

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 0.5f;
}

接着在- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
中:

我们可以看到它的参数transitionContext是一个实现UIViewControllerContextTransitioning协议的id类型的值,通过这个transitionContext我们来获取切换的上下文信息,比如从哪个VC切换过来,切换到哪个VC等等。

首先我们获得起始VC的view:

UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
fromView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
fromView.userInteractionEnabled = NO;

通过viewControllerForKey:方法,获得源VC,通过其view属性获得fromView。

设置其userInteractionEnabled为NO,意味着不再响应用户事件。

设置其tintAdjustmentMode为dimmed。如果你运行程序,仔细观察左上角"popping"这几个字,你会发现在新的VC出来的时候,其颜色由蓝色变成了灰色,这样看起来更好一些。你可能会想,去掉这行代码,将旧的VC的view的backgroundColor设置成灰色,并且适当的调整其layer的opacity的值可能也会达到这样的效果,但是事实上如果这么做"popping"依旧会是蓝色的而不是灰色的。这也是为什么我们设置tintAdjustmentMode为dimmed模式的原因。

接着我们创建一个dimmingView来将背景变成灰色,并设置其layer.opacity属性使其暂时完全透明。(我们希望背景颜色是由透明到灰色半透明,而不是灰色到灰色半透明,opacity默认是1.0)

接着我们获得toView,即新的VC的view。设置其frame以及center。

接着将dimmingView和toView加到transitionContext.containerView上。(containerView就是在哪里发生切换的VC的视图。。有点绕嘴。。在这个例子里就相当于CustomTransitionViewController.view ? 个人理解。因为PresentingAnimator是NSObject,没有类似self.view这种感念。。所以transitionContext就是我们获得一切想要信息的希望。。)

下面就很简单了,设置positionAnimation使toView从上向下运动并且进行scale动画,并且将dimmingView的layer的opacity属性设置为0.2,使其看起来变成灰色半透明。注意在positionAnimation完成之后的代码,以此来通知已经完成切换。

[positionAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
    [transitionContext completeTransition:YES];
}];

8.在DismissingAnimator.m中的方法与上面的一样就不细写了,要注意的是这几行:

__block UIView *dimmingView;
[transitionContext.containerView.subviews enumerateObjectsUsingBlock:^(UIView *view, NSUInteger idx, BOOL *stop) {
    if (view.layer.opacity < 1.f) {
        dimmingView = view;
        *stop = YES;
    }
}];

因为transitionContext,我们可以很容易得到fromVC和toVC,但是之前我们将dimmingView设置为灰色半透明,此时我们想让ModalVC消失,并且需要将dimmingView设置为透明,但是有一个问题:我们怎么能找到dimmingView?

我们这样做:遍历transitionContext.containerView的所以子视图,如果发现一个视图的opacity小于1.0f,那么就是我们刚才设置的dimmingView。虽然在block中可以访问之前定义的dimmingView,但是却是只读的,无法修改它的值,所以我们在UIView *dimmingView前面加上了__block,这样就可以给dimmingView赋值了。


总结:

  • 点击中央的按钮

  • 创建了ModalVC,设置其transitioningDelegate为CustomTransitionVC和modalPresentationStyle为custom

  • CustomTransitionVC中实现UIViewControllerTransitioningDelegate的两个代理方法

  • 当调用presentViewController:animated:completion:和dismissViewControllerAnimated:completion方法的时候会分别调用这两个代理方法

  • 在这两个代理方法中都返回一个id类型的值,且实现UIViewControllerAnimatedTransitioning协议中的两个方法(新建一个基于NSOject的类,实现两个代理方法)

  • 两个方法一个控制VC切换时间,一个具体如何切换

  • 切换过程的信息都在transitionContext中,并且记得在切换完成后调用 [transitionContext completeTransition:YES]。


结束。

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

推荐阅读更多精彩内容

  • 概述 这篇文章,我将讲述几种转场动画的自定义方式,并且每种方式附上一个示例,毕竟代码才是我们的语言,这样比较容易上...
    伯恩的遗产阅读 53,853评论 37 381
  • 前言的前言 唐巧前辈在微信公众号「iOSDevTips」以及其博客上推送了我的文章后,我的 Github 各项指标...
    VincentHK阅读 5,362评论 3 44
  • 1.自定义控件 a.继承某个控件 b.重写initWithFrame方法可以设置一些它的属性 c.在layouts...
    圍繞的城阅读 3,389评论 2 4
  • 此文章来自王巍大神的WWDC 2013 Session笔记 - iOS7中的ViewController切换 毫无...
    iYeso阅读 191评论 0 0
  • iOS视图控制器详解 视图控制器中的视图显示在屏幕上有两种方式:最主要的方式是内嵌在容器控制器中,比如 UINav...
    coder_feng阅读 11,224评论 2 12