Swift - 异步编程库PromiseKit使用详解7（动画的扩展）

作者：hangge | 2018-12-17 08:10

APP 开发时除了要实现各种业务功能外，也少不了各种动画效果，PromiseKit 同样也对其进行了扩展，方便我们使用。

八、动画的扩展

1，安装配置

（1）首先要安装 PromiseKit 库，具体步骤可以参考我之前的文章：

Swift - 异步编程库PromiseKit使用详解1（安装配置、基本用法）

（2）接着安装 PromiseKit 的 UIKit 扩展库，从 GitHub 上下载最新的代码：

https://github.com/PromiseKit/UIKit

（3）将下载下来的源码包中 PMKUIKit.xcodeproj 拖拽至你的工程中

（4）工程 -> General -> Embedded Binaries 项，把 PMKUIKit.framework 添加进来。

（5）最后，在需要使用扩展的地方将其 import 进来就可以了

import PMKUIKit

2，Animate 动画样例

（1）效果图

程序启动后在屏幕上会有个黑色方块从左向右移动。
并且在移动的过程中，方块会从透明逐渐变成不透明。
在动画结束后（方块移动到最右侧），控制台输出结束信息。

（2）样例代码

import UIKit
import PromiseKit
import PMKUIKit

class ViewController: UIViewController {
    
    // 方块
    var block:UIView!
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        
        //创建方块
        block = UIView(frame:CGRect(x:0, y:120, width:40, height:40))
        block.backgroundColor = UIColor.darkGray
        block.alpha = 0  //默认为透明的
        self.view.addSubview(block)
        
        //播放动画
        playAnimation()
    }
    
    //播放动画
    func playAnimation() {
        UIView.animate(.promise, duration:1, delay: 0.4, options: [.curveEaseOut]) {
            self.block.frame.origin.x = self.view.bounds.width - self.block.frame.width
            self.block.alpha = 1
        }.done { success in
            print("动画结束")
        }
    }
}

3，Transitions 过渡动画样例

过渡动画强调的是 view 改变内容，它分成如下两种情况：单个 view 的过渡变化，两个 view 间的过渡切换。

（1）单个 view 的过渡动画

下面样例每次点击按钮，按钮会进行一次翻转。
并且每次翻转时，按钮颜色会变化一次。
翻转完毕后，控制台输出结束信息。

import UIKit
import PromiseKit
import PMKUIKit

class ViewController: UIViewController {
    
    var reverse = false
    
    var button:UIButton!
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        
        //创建一个按钮，用来点击播放动画
        button = UIButton(type:.system)
        button.frame = CGRect(x:10, y:80, width:100, height:30)
        button.setTitle("播放动画", for:.normal)
        button.addTarget(self,action:#selector(ViewController.play),
                         for:.touchUpInside)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .blue
        self.view.addSubview(button)
    }
    
    //切换视图并播放动画
    @objc func play(){
        reverse = !reverse
        UIView.transition(.promise, with: self.button, duration: 10,
                          options: [.transitionFlipFromLeft]){
            self.button.backgroundColor = self.reverse ? .orange : .blue
        }.done { success in
            print("动画结束")
        }
    }
}

（2）两个 view 间的过渡动画

当调用两个 view 切换的动画方法时，第一个 view 会被第二个 view 替换掉。整个 transition 动画会在他们的 superview 进行动画。这里有如下两种可能的情况：

删除一个 subview，添加另一个：
如果.showHideTransitionViews 不包含在 options 中，那么第二个 view 在我们开始动画时，并不在视图层级。transition 动画 remove 将第一个 view 从 superview 上 remove 掉，将第二个 view 添加到相同的 superview 上。
隐藏一个 subview，显示另一个：
如果.showHideTransitionViews 包含在 options 中，那么两个 subview 一开始都在视图层级中。第一个 view 的 isHidden 是 false，第二个为 true。 transition 动画会对调两个 view 的 isHidden 属性。

下面样例每次点击屏幕，整个视图会翻翻转一次（红蓝两个视图切换）。
翻转完毕后，控制台输出结束信息。

import UIKit
import PromiseKit
import PMKUIKit

class ViewController: UIViewController {
    
    //红色视图
    var redView:UIView!
    
    //蓝色视图
    var blueView:UIView!
    
    //标记当前的视图
    var currentView:UIView!
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        
        redView = UIView(frame: CGRect(x:20, y:100, width:280, height:400))
        redView.backgroundColor = UIColor.red
        self.view.insertSubview(redView, at: 0)
        
        blueView = UIView(frame: CGRect(x:20, y:100, width: 280, height:400))
        blueView.backgroundColor = UIColor.blue
        self.view.insertSubview(blueView, at: 1)
        
        //初始时显示的是蓝色视图
        currentView = blueView
    }
    
    //点击切换两个红蓝视图
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let nextView = currentView == blueView ? redView : blueView
        UIView.transition(.promise, from: currentView, to: nextView!, duration: 1,
                          options: [.transitionFlipFromLeft])
        .done { success in
            self.currentView = nextView
            print("动画结束")
        }
    }
}

4，perform 系统动画样例

使用 perform 方法可以使用系统默认动画。不过可惜的是，目前苹果只提供一个 delete 动画可以使用。