如何使用CrossDissolve幻灯片过渡为Tab栏选项卡开关设置动画？

小编典典

如何使用CrossDissolve幻灯片过渡为Tab栏选项卡开关设置动画？

swift

我试图在UITabBarController某种类似于Facebook应用程序的效果上创建过渡效果。我设法在选项卡开关上获得了“滚动效果”，但是我似乎无法弄清楚如何交叉溶解（或者至少不起作用）。

这是我当前的代码：

import UIKit

class ScrollingTabBarControllerDelegate: NSObject, UITabBarControllerDelegate {
    func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {

        return ScrollingTransitionAnimator(tabBarController: tabBarController, lastIndex: tabBarController.selectedIndex)
    }
}

class ScrollingTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    weak var transitionContext: UIViewControllerContextTransitioning?
    var tabBarController: UITabBarController!
    var lastIndex = 0

    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.2
    }

    init(tabBarController: UITabBarController, lastIndex: Int) {
        self.tabBarController = tabBarController
        self.lastIndex = lastIndex
    }

    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        self.transitionContext = transitionContext

        let containerView = transitionContext.containerView
        let fromViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
        let toViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)

        containerView.addSubview(toViewController!.view)

        var viewWidth = toViewController!.view.bounds.width

        if tabBarController.selectedIndex < lastIndex {
            viewWidth = -viewWidth
        }

        toViewController!.view.transform = CGAffineTransform(translationX: viewWidth, y: 0)

        UIView.animate(withDuration: self.transitionDuration(using: (self.transitionContext)), delay: 0.0, usingSpringWithDamping: 1.2, initialSpringVelocity: 2.5, options: .transitionCrossDissolve, animations: {
            toViewController!.view.transform = CGAffineTransform.identity
            fromViewController!.view.transform = CGAffineTransform(translationX: -viewWidth, y: 0)
        }, completion: { _ in
            self.transitionContext?.completeTransition(!self.transitionContext!.transitionWasCancelled)
            fromViewController!.view.transform = CGAffineTransform.identity
        })
    }
}

如果有人知道如何使它正常工作，已经尝试了好几天却没有任何进展，那就太好了…：/

编辑： 我通过将UIView.animate块替换为来实现交叉分解工作：

UIView.transition(with: containerView, duration: 0.2, options: .transitionCrossDissolve, animations: {

    toViewController!.view.transform = CGAffineTransform.identity
    fromViewController!.view.transform = CGAffineTransform(translationX: -viewWidth, y: 0)

}, completion: { _ in

    self.transitionContext?.completeTransition(!self.transitionContext!.transitionWasCancelled)
    fromViewController!.view.transform = CGAffineTransform.identity

})

但是，该动画确实很慢并且不可用:(

编辑2： 对于尝试使用这些摘要的人们，请不要忘记为挂接代表UITabBarController，否则将不会发生任何事情。

编辑3： 我发现了一个Swift库，它确实可以满足我的需求：https : //github.com/Interactive-
Studio/TransitionableTab

阅读 321

2020-07-07

共1个答案

小编典典

有一种更简单的方法可以做到这一点。在标签栏委托中添加以下代码：

在Swift 2、3和4上工作

class MySubclassedTabBarController: UITabBarController {

    override func viewDidLoad() {
      super.viewDidLoad()
      delegate = self
    }
}

extension MySubclassedTabBarController: UITabBarControllerDelegate  {
    func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {

        guard let fromView = selectedViewController?.view, let toView = viewController.view else {
          return false // Make sure you want this as false
        }

        if fromView != toView {
          UIView.transition(from: fromView, to: toView, duration: 0.3, options: [.transitionCrossDissolve], completion: nil)
        }

        return true
    }
}

编辑（4/23/18） 由于此答案越来越流行，因此我更新了代码以删除强制展开，这是一个不好的做法，并添加了保护声明。

编辑（18/11/11） @AlbertoGarcía是正确的。如果您两次点击标签栏图标，则会出现空白屏幕。所以我加了一张额外的支票

2020-07-07