iOS UIView动画实践（三）：Transition Animation

时间  2019-11-06
标签 ios uiview 动画 实践 transition animation 栏目 iOS 繁體版
原文   原文链接

前言

在上两篇文章中向你们介绍了如何建立基于动画属性的视图动画，好比位置、透明度等。可是你们有没有想过添加或删除一个视图时怎样添加相应的动画呢？ios

固然咱们能够用第一篇文章中对用户名、密码输入框的处理办法，可是还有更好的办法处理这种情况。那就是在这篇文章中将向你们介绍的过渡转变（Transition）动画。web

过渡转变更画是Apple预约义的动画集，它没有更改视图某属性起始值和终止值的概念，而只须要你设定不一样的动画选项便可。swift

添加新视图

在进行示例以前，你们须要注意一点过渡转变更画与动画属性动画的不一样之处。咱们在建立动画属性动画时只须要在animations闭包中添加对视图动画属性修改的代码便可，它没有做用域或做用视图的概念。而在过渡转变更画中有做用视图的概念，也就是说咱们调用过渡转变更画方法时须要指定一个做用视图。闭包

明确这点不一样以后，咱们对做用视图再做进一步的说明。过渡转变更画中的做用视图并非咱们的目标视图，而是目标视图的容器视图，那么你们不难想象，若是该容器视图中有多个子视图，那么这些子视图都会有过渡转变更画效果。下面用示例像你们说明。app

先看看一个简单的视图结构：iview

 

很明显，咱们添加了一个视图做为容器视图，而且尺寸等于屏幕尺寸。在ViewController.swift中有该容器视图的Outlet以及一个图片视图：iphone

[cpp] view plaincopyide

  1. @IBOutlet weak var containerView: UIView!  学习

  2. let ipadView = UIImageView(frame: CGRectMake(100, 100, 200, 151.5))  动画

在viewDidLoad()方法中给ipadView指定图片：

[cpp] view plaincopy

  1. ipadView.image = UIImage(named: "ipad")  

而后在viewDidAppear()方法中添加以下代码：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.containerView, duration: 1.5, options: .TransitionFlipFromBottom, animations: {  

  2.     self.containerView.addSubview(self.ipadView)  

  3. }, completion: nil)  

上述代码就是咱们今天的主角，过渡转变方法之一，它一样是UIView的类方法，共有五个参数：

  • view：第一个参数，也就是做用视图，通常都是容器视图。

  • duration：动画持续时间。

  • options：过渡转变更画选项，由它来肯定过渡转变的具体展示形式。

  • animations：动画闭包。

  • completion：动画结束后执行该闭包中的代码。

除了第一个参数，其余四个参数你们应该都不会陌生。这段代码用文字解释出来就是将容器视图（containerView）添加子视图（ipadView）的过程使用.TransitionFlipFromBottom类型的过渡转变更画展现出来，持续时间为1.5秒。编译运行看看效果：

                                        

咱们再来添加一个子视图（该子视图的初始化代码再也不累赘）：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.containerView, duration: 1.5, options: .TransitionFlipFromBottom, animations: {  

  2.     self.containerView.addSubview(self.ipadView)  

  3.     self.containerView.addSubview(self.iphoneView)  

  4. }, completion: nil)  

编译运行看看效果：

                                        

你们能够看到这两个子视图都依托与它们的容器视图进行了过渡转变更画。下面的列表是全部过渡转变更画的动画选项，你们能够在大家本身的项目中逐个实验：

  • .TransitionFlipFromLeft

  • .TransitionFlipFromRight

  • .TransitionCurlUp

  • .TransitionCurlDown

  • .TransitionCrossDissolve

  • .TransitionFlipFromTop

  • .TransitionFlipFromBottom

若是咱们有多个目标视图，想进行不一样的过渡转变更画怎么办？那咱们就建立多个目标视图的容器视图，尺寸与目标视图一致，放置在合适的位置：

 

从上图中能够看出，咱们在屏幕上放置了四个容器视图，显而易见，咱们要分别对这四个容器视图添加过渡转变更画。固然容器视图里要添加什么样的视图随我的喜爱。

在viewDidLoad()方法中添加以下代码：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.ipadContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {  

  2.     self.ipadContainerView.addSubview(self.ipadView)  

  3. }, completion: nil)  

  4.   

  5. UIView.transitionWithView(self.iphoneContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromLeft], animations: {  

  6.     self.iphoneContainerView.addSubview(self.iphoneView)  

  7. }, completion: nil)  

  8.   

  9. UIView.transitionWithView(self.webContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromRight], animations: {  

  10.     self.webContainerView.addSubview(self.webView)  

  11. }, completion: nil)  

  12.   

  13. UIView.transitionWithView(textContainerView, duration: 2, options: [.CurveEaseOut, .TransitionCrossDissolve], animations: {  

  14.     self.textContainerView.addSubview(self.textView)  

  15. }, completion: nil)  

经过上述代码能够看出，咱们对四个容器视图分别添加了过渡转变更画，而且options参数使用了.CurveEaseOut和不一样的过渡转变更画选项。编译运行看看效果：

                                        

是否是有点儿意思！不过细心的朋友应该发现了，过渡转变更画的方法没有delay这个颇有用的属性，这就致使过渡转变更画都是同时发生，不能设置延迟时间。不过咱们能够曲线救国，本身写一个delay方法：

[cpp] view plaincopy

  1. func delay(seconds: Double, completion:()->()) {  

  2.     let popTime = dispatch_time(DISPATCH_TIME_NOW, Int64( Double(NSEC_PER_SEC) * seconds ))  

  3.     dispatch_after(popTime, dispatch_get_main_queue()) {  

  4.         completion()  

  5.     }  

  6. }  

而后咱们修改viewDidLoad()方法中的代码以下：

[cpp] view plaincopy

  1. delay(0, completion: {  

  2.    UIView.transitionWithView(self.ipadContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {  

  3.        self.ipadContainerView.addSubview(self.ipadView)  

  4.    }, completion: nil)  

  5. })  

  6.   

  7. delay(1, completion: {  

  8.             UIView.transitionWithView(self.iphoneContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromLeft], animations: {  

  9.                 self.iphoneContainerView.addSubview(self.iphoneView)  

  10.                 }, completion: nil)  

  11.  })  

  12.           

  13. delay(2, completion: {  

  14.             UIView.transitionWithView(self.webContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromRight], animations: {  

  15.                 self.webContainerView.addSubview(self.webView)  

  16.                 }, completion: nil)  

  17. })  

  18.   

  19. delay(3, completion: {  

  20.             UIView.transitionWithView(self.textContainerView, duration: 2, options: [.CurveEaseOut, .TransitionCrossDissolve], animations: {  

  21.                 self.textContainerView.addSubview(self.textView)  

  22.                 }, completion: nil)  

  23.  })  

咱们将每一个过渡转变更画延迟1秒进行，编译运行看看效果：

                                        

如今的效果是否是更好了呢！ : ]

移除视图

过渡转变更画一样能够用来移除视图。咱们在屏幕底部添加一个UIButton，当点击这个按钮的时候，经过过渡转变更画移除按钮上方的那两排字，而且改变屏幕背景色。go()方法是按钮链接在代码中的Touch Up Inside方法，在该方法中添加以下代码：

[cpp] view plaincopy

  1. UIView.animateWithDuration(0.5, animations: {  

  2.             self.view.backgroundColor = UIColor(red: 252.0/255.0, green: 155.0/255.0, blue: 65.0/255.0, alpha: 1)  

  3. })  

编译运行看看效果：

                                        

替换视图

在这一节咱们将要学习过渡转变更画的另外一个方法，替换视图方法。我设计的场景是当点击Go按钮后，除了上一节中的动画效果之外，iPad、iPhone、Web视图也会移位而且替换为别的视图，咱们继续在go()方法中的添加以下代码：

[cpp] view plaincopy

  1. UIView.animateWithDuration(1, delay: 0, options: [], animations: {  

  2.      self.iphoneView.frame = CGRectMake(0, 0, 334, 72)  

  3.      self.iphoneContainerView.frame = CGRectMake(26, 130, 334, 72)  

  4.   }, completion: {  

  5.         (flag: Bool) in  

  6.                 if flag {  

  7.                         UIView.transitionFromView(self.iphoneContainerView, toView: self.supportIphone, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)  

  8.                 }  

  9.  })  

  10.           

  11. UIView.animateWithDuration(1, delay: 1, options: [], animations: {  

  12.     self.ipadView.frame = CGRectMake(0, 0, 334, 72)  

  13.     self.ipadContainerView.frame = CGRectMake(26, 242, 334, 72)  

  14.   }, completion: {  

  15.         (flag: Bool) in  

  16.                 if flag {  

  17.                         UIView.transitionFromView(self.ipadContainerView, toView: self.supportIpad, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)  

  18.                 }  

  19. })  

  20.           

  21. UIView.animateWithDuration(1, delay: 2, options: [], animations: {  

  22.     self.webView.frame = CGRectMake(0, 0, 334, 72)  

  23.     self.webContainerView.frame = CGRectMake(26, 354, 334, 72)  

  24. }, completion: {  

  25.         (flag: Bool) in  

  26.                 if flag {  

  27.                         UIView.transitionFromView(self.webContainerView, toView: self.supportWeb, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)  

  28.                 }  

  29. })  

咱们来解释一下上述的代码，拿iPhone视图为例，首先经过动画属性动画改变它的尺寸大小和位置。而后在completion闭包中添加替换视图方法，该方法有五个参数：

  • fromView：被替换的视图。

  • toView：替换以后的视图。

  • duration：动画持续时间。

  • options：动画选项。

  • completion：动画执行结束后执行该闭包中的代码。

要注意的是该方法的做用视图能够是容器视图，也能够是目标视图。编译运行看看效果：

                                        

显示/隐藏视图

过渡转变更画也能够用于显示或隐藏视图，这里给出伪代码供参考：

[cpp] view plaincopy

  1. UIView.transitionWithView(self.someContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {  

  2.     self.someView.hidden = true  

  3.     // self.someView.hidden = false  

  4. }, completion: nil)  

结束语

过渡转变更画有不少动画选项，你们能够自行试试，找出本身喜欢的或最合适的过渡转变更画选项，而且能够尝试过渡转变更画和属性动画的组合，可使大家的App更加有趣。好了今天就到这里。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程