4 UIView的转场动画

相对于过渡动画转场动画更多用于两个UIView视图的切换或者重绘某个UIView视图。在iOS开发中,UIView的转场动画有两种,一种是对UIView视图内容进行重绘而不切换视图时使用的转场效果,一种是用新的UIView视图代替旧的UIView视图时使用的转场动画。

4.1 重绘UIView视图时使用的转场动画

在实际开发中,开发者时常会遇到这样的需求:一个UIView视图中有许多子视图控件,当用户交互产生数据变化时,这些子视图控件需要进行重新布局等操作,使原UIView视图看起来好像换成了另一个。

实际上视图的重绘是在瞬间完成的,如果不加任何转场效果,闪屏会使用户感觉非常突兀,这时UIView的转场动画就派上了用场。

使用Xcode开发工具创建一个名为UIViewTransitionTest的工程,在ViewController类中声明一个UIView属性作为演示色块。

private var contentView:UIView?

在ViewController类的viewDidLoad中编写的初始化代码如下。

   override func viewDidLoad() {
        super.viewDidLoad()
        contentView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        contentView?.backgroundColor = UIColor.red
        self.view.addSubview(contentView!)
    }
在ViewController类中实现touchesBegan方法进行动画效果的演示。
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        UIView.transition(with: contentView!, duration: 3, options: [.transitionFlipFromLeft,.allowAnimatedContent], animations: { 
            self.contentView?.backgroundColor = UIColor.blue
        }, completion: nil)
    }

UIView的类方法transition(with:duration:options:animation:completion)用于完成视图重绘方式的转场动画, 这个方法中第1个参数为要执行转场动画的UIView对象。 第2个参数设置动画执行的时间。 第3个参数设置动画执行的一些配置参数,其中可用的枚举在5.1小节中有介绍。 第4个参数为要执行的重绘动作,开发者可以在这个代码块中进行改变视图控件的属性的操作或者子视图的重新布局。实际上,就算这个代码块中不编写任何重绘操作代码,视图的转场动画依然会执行,只是执行后的视图没有任何变化。 第5个参数设置动画执行完成后的回调代码块。UIView的转场动画也支持组合嵌套。

4.2 切换UIView视图时使用的转场动画

切换类型的转场动画用于开发中整体视图的切换需求,这一操作会将原先的UIView视图从其父视图上移除,然后将新的UIView视图代替原视图添加在父视图上。

打开UIViewTransitionTest工程,在ViewController类中再声明一个UIView属性作为要切换的视图控件。

  private var contentView:UIView?
    private var contentView2:UIView?

在viewDidLoad方法中添加contentView2的初始化代码。

    override func viewDidLoad() {
        super.viewDidLoad()
        contentView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        contentView?.backgroundColor = UIColor.red
        self.view.addSubview(contentView!)
        contentView2 = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        contentView2?.backgroundColor = UIColor.blue
    }

上面只对_contentView2进行初始化,并不将其添加到界面视图上。 在touchesBegan方法中添加如下代码:

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        UIView.transition(from: contentView!, to: contentView2!, duration: 3, options: [.transitionFlipFromLeft,.allowAnimatedContent], completion: nil)
    }

transition(form:to:options:completion)方法用于创建切换视图的转场动画,这个方法中第1个参数设置当前显示的View视图, 第2个参数设置将要切换的View视图, 第3个参数设置执行动画的配置参数, 第4个参数为动画执行完毕后的回调代码块。

在执行切换视图转场动画时,实际上将原视图从其父视图上移除掉,再添加上新的视图,切换视图的动画也是作用在两个切换视图的父视图上的。