2

我想在具有不同UINavigationBar背景颜色的视图之间实现平滑的动画。嵌入式视图具有相同的背景颜色UINavigationBar，我想模仿推送/弹出过渡动画，例如：

在此处输入图像描述

我准备了自定义过渡：

class CustomTransition: NSObject, UIViewControllerAnimatedTransitioning {

    private let duration: TimeInterval
    private let isPresenting: Bool

    init(duration: TimeInterval = 1.0, isPresenting: Bool) {
        self.duration = duration
        self.isPresenting = isPresenting
    }

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

    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        let container = transitionContext.containerView
        guard
            let toVC = transitionContext.viewController(forKey: .to),
            let fromVC = transitionContext.viewController(forKey: .from),
            let toView = transitionContext.view(forKey: .to),
            let fromView = transitionContext.view(forKey: .from)
        else {
            return
        }

        let rightTranslation = CGAffineTransform(translationX: container.frame.width, y: 0)
        let leftTranslation = CGAffineTransform(translationX: -container.frame.width, y: 0)

        toView.transform = isPresenting ? rightTranslation : leftTranslation

        container.addSubview(toView)
        container.addSubview(fromView)

        fromVC.navigationController?.navigationBar.backgroundColor = .clear
        fromVC.navigationController?.navigationBar.setBackgroundImage(UIImage.fromColor(color: .clear), for: .default)

        UIView.animate(
            withDuration: self.duration,
            animations: {
                fromVC.view.transform = self.isPresenting ? leftTranslation :rightTranslation
                toVC.view.transform = .identity
            },
            completion: { _ in
                fromView.transform = .identity
                toVC.navigationController?.navigationBar.setBackgroundImage(
                    UIImage.fromColor(color: self.isPresenting ? .yellow : .lightGray),
                    for: .default
                )
                transitionContext.completeTransition(true)
            }
        )
    }
}

并在UINavigationControllerDelegate方法实现中返回：

func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    return CustomTransition(isPresenting: operation == .push)
}

虽然推送动画效果很好，但流行音乐却没有。

在此处输入图像描述

问题：

  1. 为什么在弹出动画之前清除 NavBar 颜色后它仍然是黄色的？
  2. 有没有更好的方法来实现我的目标？（导航栏不能一直透明，因为它只是流程的一部分）

这是我在 GitHub 上的测试项目的链接。

编辑

这是 gif，展示了所讨论问题的全貌和预期效果：

在此处输入图像描述

4

3 回答 3

6

这些组件总是很难定制。我认为，Apple 希望系统组件在每个应用程序中的外观和行为都相同，因为它允许在整个 iOS 环境中保持共享的用户体验。

有时，从头开始实现自己的组件比尝试自定义系统组件更容易。定制通常会很棘手，因为您不确定内部组件是如何设计的。因此，您必须处理大量边缘情况并处理不必要的副作用。

不过，我相信我对您的情况有解决方案。我已经分叉了您的项目并实施了您描述的行为。你可以在GitHub 上找到我的实现。见animation-implementation分行。

UI导航栏

弹出动画无法正常工作的根本原因是它UINavigationBar有自己的内部动画逻辑。当UINavigationController's堆栈改变时，UINavigationController告诉UINavigationBar改变UINavigationItems。因此，首先，我们需要禁用UINavigationItems. 可以通过子类化来完成UINavigationBar：

class CustomNavigationBar: UINavigationBar {
   override func pushItem(_ item: UINavigationItem, animated: Bool) {
     return super.pushItem(item, animated: false)
   }

   override func popItem(animated: Bool) -> UINavigationItem? {
     return super.popItem(animated: false)
   }
}

然后UINavigationController应该初始化CustomNavigationBar：

let nc = UINavigationController(navigationBarClass: CustomNavigationBar.self, toolbarClass: nil)

UINavigationController

由于需要保持动画之间的平滑和同步UINavigationBar，因此UIViewController我们需要创建自定义过渡动画对象UINavigationController并CoreAnimation使用CATransaction。

自定义过渡

您对过渡动画师的实现几乎完美，但从我的角度来看，很少有细节被遗漏。在自定义过渡动画一文中，您可以找到更多信息。另外，请注意UIViewControllerContextTransitioning协议中的方法注释。

所以，我的推送动画版本如下：

func animatePush(_ transitionContext: UIViewControllerContextTransitioning) {
  let container = transitionContext.containerView

  guard let toVC = transitionContext.viewController(forKey: .to),
    let toView = transitionContext.view(forKey: .to) else {
      return
  }

  let toViewFinalFrame = transitionContext.finalFrame(for: toVC)
  toView.frame = toViewFinalFrame
  container.addSubview(toView)

  let viewTransition = CABasicAnimation(keyPath: "transform")
  viewTransition.duration = CFTimeInterval(self.duration)
  viewTransition.fromValue = CATransform3DTranslate(toView.layer.transform, container.layer.bounds.width, 0, 0)
  viewTransition.toValue = CATransform3DIdentity

  CATransaction.begin()
  CATransaction.setAnimationDuration(CFTimeInterval(self.duration))
  CATransaction.setCompletionBlock = {
      let cancelled = transitionContext.transitionWasCancelled
      if cancelled {
          toView.removeFromSuperview()
      }
      transitionContext.completeTransition(cancelled == false)
  }
  toView.layer.add(viewTransition, forKey: nil)
  CATransaction.commit()
}

流行动画的实现几乎相同。和属性的唯一区别CABasicAnimation。fromValuetoValue

UINavigationBar 动画

为了动画UINavigationBar，我们必须在图层上添加CATransition动画：UINavigationBar

let transition = CATransition()
transition.duration = CFTimeInterval(self.duration)
transition.type = kCATransitionPush
transition.subtype = self.isPresenting ? kCATransitionFromRight : kCATransitionFromLeft
toVC.navigationController?.navigationBar.layer.add(transition, forKey: nil)

上面的代码将为整个UINavigationBar. 为了只为背景设置动画，UINavigationBar我们需要从中检索背景视图UINavigationBar。诀窍是：第一个子视图UINavigationBar是_UIBarBackground视图（可以使用 Xcode Debug View Hierarchy 进行探索）。在我们的例子中，确切的类并不重要，它是UIView. _UIBarBackground最后，我们可以直接在的视图层上添加我们的动画过渡：

let backgroundView = toVC.navigationController?.navigationBar.subviews[0]
backgroundView?.layer.add(transition, forKey: nil)

我想指出，我们正在预测第一个子视图是背景视图。将来可能会更改视图层次结构，请记住这一点。

将两个动画添加到一个中很重要CATransaction，因为在这种情况下，这些动画将同时运行。

您可以在每个视图控制器的方法中设置UINavigationBar背景颜色。viewWillAppear

这是最终动画的样子：

在此处输入图像描述

我希望这有帮助。

于 2018-01-25T20:31:13.517 回答
1

我这样做的方法是使导航控制器完全透明。这样，包含的视图控制器的动画应该会产生您想要的效果。

编辑：您还可以通过在导航栏下限制 containerView 来获得“白色内容”。在示例代码中我做到了。推送随机选择一种颜色并随机赋予容器视图白色或透明。您将看到此示例涵盖了 gif 中的所有场景。

在操场上试试这个：

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
  var containerView: UIView!

  override func loadView() {
    let view = UIView()
    view.backgroundColor = .white

    containerView = UIView()
    containerView.backgroundColor = .white
    containerView.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(containerView)
    containerView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor).isActive = true
    containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    containerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    containerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true

    let button = UIButton()
    button.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
    button.setTitle("push", for: .normal)
    button.setTitleColor(.black, for: .normal)
    button.addTarget(self, action: #selector(push), for: .touchUpInside)
    containerView.addSubview(button)
    self.view = view
  }

  @objc func push() {
    let colors: [UIColor] = [.yellow, .red, .blue, .purple, .gray, .darkGray, .green]
    let controller = MyViewController()
    controller.title = "Second"

    let randColor = Int(arc4random()%UInt32(colors.count))
    controller.view.backgroundColor = colors[randColor]

    let clearColor: Bool = (arc4random()%2) == 1
    controller.containerView.backgroundColor = clearColor ? .clear: .white
    navigationController?.pushViewController(controller, animated: true)
  }
}
// Present the view controller in the Live View window

let controller = MyViewController()
controller.view.backgroundColor = .white
let navController = UINavigationController(rootViewController: controller)
navController.navigationBar.setBackgroundImage(UIImage(), for: .default)
controller.title = "First"


PlaygroundPage.current.liveView = navController
于 2018-01-21T10:52:49.173 回答
0

从您的项目中删除此代码：

toVC.navigationController?.navigationBar.setBackgroundImage(
        UIImage.fromColor(color: self.isPresenting ? .yellow : .lightGray),
        for: .default
)
于 2018-01-17T06:30:44.173 回答