IOS轻松几步实现自定义转场动画

一、系统提供的转场动画

目前,系统给我们提供了push/popspresent/dismiss两种控制器之间跳转方.当然,通过设置UIModalTransitionStyle属性,可以实现下面4种modal效果,相信大家都比较熟悉了,这里就不再展示效果图.

 UIModalTransitionStyleCoverVertical   // 从下往上,
 UIModalTransitionStyleFlipHorizontal  // 水平翻转
 UIModalTransitionStyleCrossDissolve   // 淡入淡出
 UIModalTransitionStylePartialCurl   // 卷角翻页

二、自定义转场动画使用场景

系统给我们提供的转场动画效果较少,并且有时想对系统的效果做一些修改.例如:我们使用淡入淡出的modal效果,系统的动画时间我们不满意,希望让动画快点,或者慢点.系统并没有给我提供直接修改的属性或者方法,那么,这时我们不得不考虑使用自定义转场动画来实现我们想要的效果.

三、自定义转场动画的实现步骤

第1步:设置需要弹出控制器的modalPresentationStyleUIModalPresentationCustom

 detailVc.modalPresentationStyle = UIModalPresentationCustom;

第2步:设置转场代理

detailVc.transitioningDelegate = self

可以抽一个工具类,专门负责转场动画

第3步:遵守UIViewControllerTransitioningDelegate代理实现两个方法

确定谁负责弹出动画

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
 self.isPresnted = YES;
 return self;
}

确定谁负责动画消失

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
 self.isPresnted = NO;
 return self;
}

第4步:实现转场动画

上面都返回self,说明当前控制器即负责弹出动画又负责动画消失,所以具体的转场动画在当前控制器中进行.

先确定转场动画时间间隔

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

再实现具体动画(由于当前控制器即负责弹出动画,又负责消失动画,所以定义一个Bool类型属性isPresnted加以区分)

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

 if (self.isPresnted == YES) {
  //这里做弹出动画

 } else {

 //这里做消失动画
 }
}

小结:

也可以让不同的控制器分别负责弹出和消失动画,这样就不需要定义一个专门用于区分的属性.个人建议最好是抽取一个专门负责转场动画的工具类,让该工具类负责所有转场动画,这样,不管是从业务逻辑上还是代码的复用性上都更加好.当然,这样做存在的一个弊端就是,转场动画中需要用到的一些属性必须通过定义变量,代理和Block等方式传递进来,而使用不同的控制器来管理弹出和消失动画在获取属性上更加方便.具体怎样做,也就仁者见仁,智者见智了.

下面来具体实现一个转场动画效果吧

由于实现动画的核心代码在第四步,这里也就只看animateTransition:这一个方法啦!

从上往下的Modal效果

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

 if (self.isPresnted == YES) {
  //1.取出view
  UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:presentedView];
  //3.设置基本属性
  presentedView.frame = CGRectMake(0, -667, 375, 667);
  //4.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   presentedView.frame = CGRectMake(0, 0, 375, 667);
  }completion:^(BOOL finished) {
   [transitionContext completeTransition:YES];
  }];

 } else {
  //1.取出view
  UIView *dismissedView = [transitionContext viewForKey:UITransitionContextFromViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:dismissedView];

  //3.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   dismissedView.frame =CGRectMake(0, -667, 375, 667);
  }completion:^(BOOL finished) {

   [transitionContext completeTransition:YES];
  }];

 }
}

模仿系统淡入淡出效果

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

 if (self.isPresnted == YES) {
  //1.取出view
  UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:presentedView];
  //3.设置基本属性
  presentedView.alpha = 0;
  //4.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   presentedView.alpha = 1.0;
  }completion:^(BOOL finished) {
   [transitionContext completeTransition:YES];

  }];

 } else {
  //1.取出view
  UIView *dismissedView = [transitionContext viewForKey:UITransitionContextFromViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:dismissedView];
  //3.设置基本属性
  dismissedView.alpha = 1;
  //4.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   dismissedView.alpha = 0;
  }completion:^(BOOL finished) {

   [transitionContext completeTransition:YES];
  }];
 }
}

动画的时间可以从ransitionDuration:方法获取

通过UITransitionContextToViewKeyUITransitionContextFromViewKey两个Key分别获取弹出和消失动画的View(注意别混淆两个Key)

要将做动画的View加入到专门用于动画的containerView

总结

以上就是这篇文章的全部内容了,这里只介绍怎样实现转场动画,至于其他好玩NB的效果,大家可以自己试着实现,小编以后也会分享其他更好的效果,希望这篇文章对大家能有一定的帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • IOS实战之自定义转场动画详解

    转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

  • iOS实现类似格瓦拉电影的转场动画

    用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 自定义转场动画 首先就要声明一个遵守UIViewControllerAnimatedTransitioning协议的类. 然后实现协议中的两个函数 // This is used for percent driven interactive transitions, as well as for container controllers that have companion animati

  • 详解IOS图层转场动画

    CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 具体代码: /* 过渡效果 fade //交叉淡化过渡(不支持过渡方

  • 详解iOS开发中的转场动画和组动画以及UIView封装动画

    一.转场动画 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 转场动画代码示例 1.界面搭建 2.实现代码 复制代码

  • iOS swift实现转场动画的方法示例

    转场动画介绍 转场动画在我们日常开发中是经常遇到的,所谓转场动画,就是一个控制器的view切到另一个控制器的view上过程中过的动画效果.本例子是实现了在导航控制器的titleView边上慢慢弹出一个控制器.下面话不多说,来一起看看详细的介绍: 效果图: 专场前 专场后 示例代码 首先自定义一个animator类.在需要转场的控制器内,设置代理 //需要设置转场动画的控制器titleViewVc.transitioningDelegate = aniamator//这里的animator是ani

  • 实例讲解iOS中的CATransition转场动画使用

    一.简介 CATransition是CAAnimation的子类,用于做转场动画 能够为图层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 如:UINavigationController导航控制器就是通过CATransition转场动画实现了将控制器的视图推入屏幕的动画效果 CATransition头文件 动画属性: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点

  • 深入学习iOS7自定义导航转场动画

    在iOS7以前,开发者如果希望定制导航控制器推入推出视图时的转场动画,一般都只能通过子类化UINavigationController或者自己编写动画代码去覆盖相应的方法,现在iOS7为开发者带来了福音,苹果公司引入了大量新API,给予了开发者很高的自由度,在处理由UIViewController管理的UIView动画时,这些API使用方便,可扩展性也很强,定制起来非常轻松: 全新的针对UIView的动画block方法 全新的UIViewControllerAnimatedTransitioni

  • IOS轻松几步实现自定义转场动画

    一.系统提供的转场动画 目前,系统给我们提供了push/pops和present/dismiss两种控制器之间跳转方.当然,通过设置UIModalTransitionStyle属性,可以实现下面4种modal效果,相信大家都比较熟悉了,这里就不再展示效果图. UIModalTransitionStyleCoverVertical // 从下往上, UIModalTransitionStyleFlipHorizontal // 水平翻转 UIModalTransitionStyleCrossDis

  • iOS自定义转场动画的几种情况

    前言 在开发中,无论我们使用 Push 还是 Present 推出新的 ViewController 时,系统为了提高用户体验都会为我们默认加上一些过渡动画.但是,系统默认的动画总是不能满足大家各种各样的需求的,所以系统也为我们提供了在不同场景下自定义过渡动画以及通过手势控制过渡进度的实现方案. 这篇文章记录了自定义转场动画中的几种情况: 模态跳转(Present) 导航控制器跳转(Push) UITabbarController 三方框架--Lottie 效果图 预备 首先,我们现在介绍几个在

  • Flutter 用自定义转场动画实现页面切换

    fluro 转场动画源码 在使用自定义转场动画前,先扒一扒 fluro 的源码,通过源码可以发现这么一个标准的转场方法: RouteTransitionsBuilder _standardTransitionsBuilder( TransitionType? transitionType) { return (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation

  • iOS Swift控制器转场动画示例代码

    前言 在IOS开发中,我们model另外一个控制器的时候,一般都使用默认的转场动画.本文将给大家详细介绍关于iOS Swift控制器转场动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 返回效果也可更改 四种转场动画 1. move:源图片位置移动到目标图片位置: 2. circle:根据源控件大小创建圆形或者椭圆形path路径,放大展示目标: 3. tier:源左右,目标由小到大缩放: 4. middle:源的中心点开始放大,返回是缩回到中心. 代码解析 给UI

  • iOS如何自定义控制器转场动画push详解

    前言 最近有些空闲时间,整理了下最近做的项目,本文主要介绍了关于iOS自定义控制器转场动画push的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图: iOS7 开始苹果推出了自定义转场的 API .从此,任何可以用 CoreAnimation 实现的动画,都可以出现在两个 ViewController 的切换之间.并且实现方式高度解耦,这也意味着在保证代码干净的同时想要替换其他动画方案时只需简单改一个类名就可以了,真正体会了一把高颜值代码带来的愉悦感. 其实网

  • iOS实现转场动画的3种方法示例

    什么是转场动画 在 NavigationController 里 push 或 pop 一个 View Controller,在 TabBarController 中切换到其他 View Controller,以 Modal 方式显示另外一个 View Controller,这些都是 View Controller Transition.在 storyboard 里,每个 View Controller 是一个 Scene,View Controller Transition 便是从一个 Sce

随机推荐