• Stars
    star
    143
  • Rank 256,025 (Top 6 %)
  • Language
    Objective-C
  • Created over 6 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

iOS 自定义转场动画集锦:新浪微博图片浏览转场效果、网易云音乐启动屏转场动画、手势过渡动画、开关门动画、全屏侧滑Pop返回和UIScrollView、UISlider三者手势滑动事件冲突

简书地址:https://www.jianshu.com/p/a9b1307b305b

自定义转场动画集锦.gif

本文只是记录分享下自定义转场动画的实现方法,具体到动画效果的代码可以到Github下载查看,注释还算清晰。

模态化present和dismiss 自定义转场

1、创建一个遵循协议的动画过渡管理对象(第一步需要返回的),并实现如下两个方法:

//返回动画事件
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    return 0.3;
}
//所有的过渡动画事务都在这个方法里面完成
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{

 //取出转场前后的视图控制器
  UIViewController * fromVC = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
  UIViewController * toVC = (UIViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

 //取出转场前后视图控制器上的视图view
    UIView * toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    UIView * fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];

 //这里有个重要的概念containerView,要做转场动画的视图就必须要加入containerView上才能进行,可以理解containerView管理着所有做转场动画的视图
    UIView *containerView = [transitionContext containerView];

  //如果加入了手势交互转场,就需要根据手势交互动作是否完成/取消来做操作,完成标记YES,取消标记NO,必须标记,否则系统认为还处于动画过程中,会出现无法交互之类的bug
   [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
     if ([transitionContext transitionWasCancelled]) { 
    //如果取消转场
          }else{
   //完成转场
     }
}

2、自定义一个继承于UIPercentDrivenInteractiveTransition的手势过渡管理对象(第一步需要返回的),可以根据手势需要设置控制动画转场进度的百分比。

//必要调用实现的系统方法

//手势过程中,通过updateInteractiveTransition设置转场过程动画进行的百分比,然后系统会根据百分比自动布局动画控件,不用我们控制了
 [self updateInteractiveTransition:percentComplete];
//完成转场操作
 [self finishInteractiveTransition];
//取消转场操作
 [self cancelInteractiveTransition];

3、转场时最上层的视图控制器需要遵循的协议,并设置为代理,并实现如下代理方法:

//设置转场代理
self.transitioningDelegate = self;

#pragma mark -- UIViewControllerTransitioningDelegate

//返回一个处理present动画过渡的对象
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
    return self.transitionAnimation;
}
//返回一个处理dismiss动画过渡的对象
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
    //这里我们初始化dismissType
    self.transitionAnimation.transitionType = WSLTransitionOneTypeDissmiss;
    return self.transitionAnimation;
}
//返回一个处理present手势过渡的对象 
- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator{
    return self.transitionInteractive;
}
//返回一个处理dismiss手势过渡的对象
- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator{
    return self.transitionInteractive;
}

导航控制器push和pop 自定义转场

1、同上 2、同上 3、在push动画之前设置导航控制器的转场动画代理,转场时最上层的视图控制器需要遵循的协议,并设置为代理,并实现如下代理方法:

 //在push动画之前设置转场动画代理
 self.navigationController.delegate = animationFour;

#pragma mark -- UINavigationControllerDelegate
//返回处理push/pop动画过渡的对象
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                            animationControllerForOperation:(UINavigationControllerOperation)operation
                                                         fromViewController:(UIViewController *)fromVC
                                                           toViewController:(UIViewController *)toVC{
    
    if (operation == UINavigationControllerOperationPush) {
        self.transitionAnimation.transitionType = WSLTransitionTwoTypePush;
        return self.transitionAnimation;
    }else if (operation == UINavigationControllerOperationPop){
        self.transitionAnimation.transitionType = WSLTransitionTwoTypePop;
    }
    return self.transitionAnimation;
}

//返回处理push/pop手势过渡的对象 这个代理方法依赖于上方的方法 ,这个代理实际上是根据交互百分比来控制上方的动画过程百分比
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
                                   interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController{
    
    //手势开始的时候才需要传入手势过渡代理,如果直接pop或push,应该返回nil,否者无法正常完成pop/push动作
    if ( self.transitionAnimation.transitionType == WSLTransitionTwoTypePop) {
        return self.transitionInteractive.isInteractive == YES ? self.transitionInteractive : nil;
    }
    return nil;
}

全屏侧滑返回

创建一个继承于UINavigationController的一个对象WSLNavigatioController,遵守协议,实现如下方法:

  // 获取系统自带滑动手势的target对象
    id target = self.interactivePopGestureRecognizer.delegate;
    // 创建全屏滑动手势,调用系统自带滑动手势的target的action方法
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:target action:@selector(handleNavigationTransition:)];
    // 设置手势代理,拦截手势触发
    pan.delegate = self;
    // 给导航控制器的view添加全屏滑动手势
    [self.view addGestureRecognizer:pan];
    // 禁止使用系统自带的滑动手势
    self.interactivePopGestureRecognizer.enabled = NO;

#pragma mark -- UIGestureRecognizerDelegate
// 什么时候调用:每次触发手势之前都会询问下代理,是否触发。
// 作用:拦截手势触发
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    // 注意:只有非根控制器才有滑动返回功能,根控制器没有。
    // 判断导航控制器是否只有一个子控制器,如果只有一个子控制器,肯定是根控制器
    if (self.childViewControllers.count == 1) {
        // 表示用户在根控制器界面,就不需要触发滑动手势,
        return NO;
    }
    return YES;
}

解决UIScrollView的滑动手势与全屏侧滑手势的冲突

创建一个UIScrollView的类别UIScrollView+GestureConflict,重写如下方法:

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    
    // 首先判断otherGestureRecognizer是不是系统pop手势
    if ([otherGestureRecognizer.view isKindOfClass:NSClassFromString(@"UILayoutContainerView")]) {
        // 再判断系统手势的state是began还是fail,同时判断scrollView的位置是不是正好在最左边
        if (otherGestureRecognizer.state == UIGestureRecognizerStateBegan && self.contentOffset.x == 0) {
            return YES;
        }
    }
    return NO;
}

学习文章: https://www.jianshu.com/p/45434f73019e     http://www.cocoachina.com/ios/20150811/12897.html

更新于 2018/8/17 iOS 全屏侧滑手势/UIScrollView/UISlider间滑动手势冲突

效果预览

一、前期准备

有一个支持全屏侧滑返回的视图控制器ViewController,ViewController.view上有一个UIScrollView,UIScrollView上有UISlider。俺直接在之前的示例Demo上演示,简书地址:iOS 自定义转场动画 ,Github地址 :WSLTransferAnimation

二、问题展示

  • 现象 1UIScrollView当前在第一页即contentOffset.x=0时,左滑不能触发全屏侧滑pop返回的手势

UIScrollView和全屏侧滑pop返回手势冲突示意图

  • 现象2问题1解决后,你会发现拖拽UIScrollView第一页上的UISlider时,向右拖拽时却触发了全屏侧滑pop返回的手势,而UISlider本身的拖拽事件却没有响应;向左拖拽UISlider时,响应的是UIScrollView的拖动事件,而UISlider本身的拖拽事件也没有响应

UISlider与UIScrollView、全屏侧滑pop返回手势冲突示意图

  • 现象3当你长按UISlider超过150ms后直接拖拽,就不存在现象2中UISlider与UIScrollView、全屏侧滑返回的冲突问题了

手势冲突.gif

三、分析解决问题

这些问题很显然,肯定跟iOS事件的传递和响应链机制有关系,不了解的可以看看这篇文章 史上最详细的iOS之事件的传递和响应机制-原理篇

  • 分析解决问题 1 如果你了解事件的传递和响应链机制的话,应该能想到,是由于UIScrollView的内部手势方法阻断了全屏侧滑返回手势的的响应,那我们就找到这个方法,代码如下

创建一个UIScrollView的类别UIScrollView+GestureConflict,重写如下方法:

//处理UIScrollView上的手势和侧滑返回手势的冲突
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{

    // 首先判断otherGestureRecognizer是不是系统pop手势
    if ([otherGestureRecognizer.view isKindOfClass:NSClassFromString(@"UILayoutContainerView")]) {
        // 再判断系统手势的state是began还是fail,同时判断scrollView的位置是不是正好在最左边
        if (otherGestureRecognizer.state == UIGestureRecognizerStateBegan && self.contentOffset.x == 0) {
            return YES;
        }
    }
    return NO;
}

  • 分析解决问题 2和3

方案一:这个跟UIScrollView的一个属性delaysContentTouches有关。

scrollView.delaysContentTouches = NO; delaysContentTouches 默认值为YES 表示延迟scrollView上子视图的响应,所以当直接拖动UISlider时,如果此时touch时间在150ms以内,UIScrollView会认为是拖动自己,从而拦截了event,导致UISlider接收不到滑动的event。但是只要长按住UISlider一会儿再拖动,此时touch时间超过150ms,因此滑动的event会发送到UISlider上,然后UISlider再作出响应;设置为NO后,拖动UISlider时就可以直接做出响应,解决了UISlider与UIScrollView之间的冲突,同时也解决了向右拖拽时却触发了全屏侧滑pop返回的问题。

方案二: 重写类别UIScrollView+GestureConflict中的如下方法来解决UISlider与UIScrollView之间的冲突,然后还需要执行下面 问题补充 中的操作来处理UISlider的滑动与全屏侧滑pop返回事件的冲突。

//拦截事件的处理 事件传递给谁,就会调用谁的hitTest:withEvent:方法。
//处理UISlider的滑动与UIScrollView的滑动事件冲突
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    /*
     直接拖动UISlider,此时touch时间在150ms以内,UIScrollView会认为是拖动自己,从而拦截了event,导致UISlider接受不到滑动的event。但是只要按住UISlider一会再拖动,此时此时touch时间超过150ms,因此滑动的event会发送到UISlider上。
     */
    UIView *view = [super hitTest:point withEvent:event];
    
    if([view isKindOfClass:[UISlider class]]) {
        //如果接收事件view是UISlider,则scrollview禁止响应滑动
        self.scrollEnabled = NO;
    } else {   //如果不是,则恢复滑动
        self.scrollEnabled = YES;
    }
    return view;
}

  • 问题补充
    示例Demo中的UISlider是在UIScrollView上的,如果UISlider不是在UIScrollView上,而是直接就在ViewController.view上,那也就会出现拖拽UISlider时却响应了全屏侧滑pop返回手势的问题。

在支持全屏侧滑返回的UINavigationController的子类WSLNavigatioController中,遵守协议,实现如下方法:

#pragma mark -- UIGestureRecognizerDelegate
//触发之后是否响应手势事件
//处理侧滑返回与UISlider的拖动手势冲突
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
    //如果手势是触摸的UISlider滑块触发的,侧滑返回手势就不响应
    if ([touch.view isKindOfClass:[UISlider class]]) {
        return NO;
    }
    return YES;
}

四、应用示例

手势冲突应用示例.gif

好了,俺要去鹊桥跟俺家织女相会咯✌️😊(*❦ω❦),就说这么多了,今天七夕节,也祝各位单身猿告白成功,玩的开心😊O(∩_∩)O哈哈~

表白🌹

推荐阅读: iOS 自定义转场动画 iOS 瀑布流封装 WKWebView的使用 UIScrollView视觉差动画 iOS 传感器集锦 iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果 UIActivityViewController系统原生分享-仿简书分享 iOS UITableView获取特定位置的cell

欢迎扫描下方二维码关注——iOS开发进阶之路——微信公众号:iOS2679114653 本公众号是一个iOS开发者们的分享,交流,学习平台,会不定时的发送技术干货,源码,也欢迎大家积极踊跃投稿,(择优上头条) ^_^分享自己开发攻城的过程,心得,相互学习,共同进步,成为攻城狮中的翘楚!

iOS开发进阶之路.jpg

More Repositories

1

iOS_Tips

iOS的一些示例,持续更新中:1、AVFoundation 高仿微信相机拍摄和编辑 2、AVFoundation 人脸检测、实时滤镜、音视频编解码、GPUImage框架的使用等音视频相关内容 3、OpenGLES 4、LeetCode算法练习 5、iOS Crash防护和APM监控 6、WKWebView相关的内容 等........
Objective-C
1,217
star
2

WKWebView

WKWebView的使用、JS和OC的交互、网页内容加载进度条的实现、WKWebView+UITableView混排 、 WKWebView离线缓存
Objective-C
474
star
3

WSLWaterFlowLayout

功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的控件, 目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。
Objective-C
333
star
4

LyricsAnalysis

iOS音乐播放器之锁屏效果(仿网易云音乐和QQ音乐)+歌词解析 :锁屏歌曲信息、控制台远程控制音乐播放:暂停/播放、上一首/下一首、快进/快退、列表菜单弹框和拖拽控制台的进度条调节进度(结合了QQ音乐和网易云音乐在锁屏状态下的效果)、歌词解析并随音乐滚动显示。
Objective-C
195
star
5

UIActivityViewController

仿简书分享--系统原生分享:利用UIActivityViewController实现系统原生分享,不需要三方SDK,支持自定义分享,可以分享到微博、微信、QQ、信息、邮件、备忘录、通讯录、剪贴板、FaceBook.....等等
Objective-C
150
star
6

ScanQRcode

功能描述:WSLNativeScanTool是在利用原生API的条件下封装的二维码扫描工具,支持二维码的扫描、识别图中二维码、生成自定义颜色和中心图标的二维码、监测环境亮度、打开闪光灯这些功能;WSLScanView是参照微信封装的一个扫一扫界面,支持线条颜色、大小、动画图片、矩形扫描框样式的自定义;这个示例本身就是仿照微信的扫一扫功能实现的。
Objective-C
102
star
7

UITableViewLinkage

iOS UITableView/UICollectionView获取特定位置的cell,解决UITableView/UICollectionView联动、获取处于UITableView/UICollectionView中心的cell等这类与特定cell位置有关的问题
Objective-C
76
star
8

UIScrollViewAnimation

UIScrollView视觉差动画,仿凤凰新闻的推荐新闻版块效果
Objective-C
72
star
9

SwiftStudy

Swift学习之微博朋友圈列表功能实现
Swift
70
star
10

WSLAPP

音乐播放器,新闻,壁纸,画板,二维码,计分器,一个我自己做的完整的项目源码
Objective-C
62
star
11

MultilevelList

TableView多级列表:分级展开或合并,逐级获取并展示其子级数据,可以设置最大的层级数,支持多选、单选、取消选择。
Objective-C
61
star
12

SensorDemo

指纹识别、运动传感器、加速计、环境光感、距离传感器、指南针、陀螺仪等传感器示例集锦
Objective-C
58
star
13

WSL_RollView

功能描述:WSL_RollView 是基于UICollectionView实现的支持水平和垂直两个方向上的的分页和渐进循环轮播效果,可以设置时间间隔、渐进速率、是否循环、分页宽度和间隔,还支持高度自定义分页视图的控件。
Objective-C
57
star
14

Compass

高仿系统指南针效果
Objective-C
31
star
15

CoreDataLearn

CoreData增删改查、数据库升级
Objective-C
27
star
16

WSLPictureBrowser

功能描述:支持网络和本地gif、jpeg等格式图片的浏览、捏合或双击放大缩小、长按保存到本地相册、获取gif图片的循环次数和时长。
Objective-C
26
star
17

AlgorithmSet

LeetCode 算法练习集合 ~ 每天一道算法题
Swift
19
star
18

YanZhengCode

图片验证码和滑块验证码
Objective-C
12
star
19

ContactsSort

通讯录排序,类似微信通讯录
Objective-C
9
star
20

GOVAVPlayer

GOVVideoPlayer/GOVVideoController是一个基于AVPlayer封装的视频播放器,支持播放/暂停、左右退拽快进、上下滑动调节音量、有缓冲进度指示条、和卡顿指示器.
Objective-C
7
star
21

AppIconBadge

解决在前台时重启应用和设置应用角标的问题
Objective-C
6
star
22

Draw

涂鸦画板:画笔颜色、粗细、橡皮擦、撤销功能等
Objective-C
6
star
23

WSLScrollView

UIScrollerView当前显示3张图:这是在继承UIView的基础上利用UIScrollerView进行了封装,支持循环轮播、自动轮播、自定义时间间隔、图片间隔、当前页码和图片大小,采用Block返回当前页码和处理当前点击事件的一个View。
Objective-C
2
star
24

Wsl2Ls.github.io

欢迎来前往我的博客查看效果 https://wsl2ls.github.io 或者我的简书:https://www.jianshu.com/p/55bf6559aa93
HTML
1
star
25

iOS_TipsPreview

iOS_Tips系列效果预览图,示例代码主工程在 https://github.com/wsl2ls/iOS_Tips
1
star
26

iOS10NotificationAndRegularExpression

iOS10通知和正则表达式
Objective-C
1
star
27

progressLabelAndWaterProgress

水波纹进度和文字进度动画以及镂空文字
1
star
28

AlarmClock

闹铃,刮刮乐,拼图
Objective-C
1
star
29

APPInternational

APP国际化
Objective-C
1
star
30

MVx

MVC、MVP、MVVM 比较
Objective-C
1
star