Как отобразить snapshot в NavigationController с кастомной AnimateTransition?

Question

[romanwb]

Мне нужно показать снимок вьюшки во время анимации, но когда я запускаю этот код, получается черный (прозрачный) экран. Снимок добавлен в containerView, выставлены корректные фреймы, isHidden = false, opaque = true.
В отладчике слоев экрана экран на переднем плане, но черный (прозрачный).
В containerView subviews он один присудствует:

[<_UIReplicantView: 0x7ff1f34138a0; frame = (0 0; 375 667); layer = <_UIReplicantLayer: 0x600000bb57a0>>] Properties: Opaque On Hidden Off

В прозрачном NavigationBar виден розовый цвет, значит слой есть, но конкретно в части отображения экрана - не отображается.

ps Эта проблема только в NavigationController, с обычным контроллером все работает как ожидается.

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

    let containerView = transitionContext.containerView

    // If remove this, toSnapshot trasparent (but in attributes alpha=1 transparent=0 opaque=false)
    fromView.removeFromSuperview()

    let toSnapshot = toView.snapshotView(afterScreenUpdates: true)!
    containerView.addSubview(toSnapshot)

    // Pritingig 
    print(containerView.subviews)

    //transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
}

Answer 1

[doublench21]

Что-то мне подсказывает, что Вы совершенно не понимаете логику переходов между VC и ГЛАВНОЕ в каком контексте это происходит.

Во-первых: Что за Магическая необходимость заставила вас удалять вью контроллера из которого вы переходите - неясно... А как вы перейдете назад? В никуда.

Во-вторых: Предоставляете ли вы свой класс анимации, тут Важно, не Контроллеру, к которому переходите, а Навигейшн Контроллеру? Что-то мне подсказывает, нет.

В-третьих: Вот полностью рабочий вариант. (Рабочий в том смысле, что он делает то, что вы хотите. Опущены проверки)


.

Код текстом

internal final class ModalAnimator: NSObject, UIViewControllerAnimatedTransitioning {

  private var isPresenting: Bool

  private let duration: TimeInterval = 3

  internal init(isPresenting: Bool) {
    self.isPresenting = isPresenting
  }

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

  internal func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    guard let fromVC = transitionContext.viewController(forKey: .from),
      let toVC = transitionContext.viewController(forKey: .to),
      let snapshot = toVC.view.snapshotView(afterScreenUpdates: true)
      else { return }

    let containerView = transitionContext.containerView

    snapshot.frame = fromVC.view.frame

    containerView.addSubview(toVC.view)
    containerView.addSubview(snapshot)

    fromVC.view.isHidden = true

    UIView.animate(
      withDuration: duration,
      animations: { snapshot.transform = CGAffineTransform(rotationAngle: .pi)},
      completion: { _ in
        fromVC.view.isHidden = false
        snapshot.removeFromSuperview()
        transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
    })
  }
}

Comments

[romanwb]

1 Контроллер нигде не удаляется, удаляется ВЬЮШКА старого контроллера (не важно удалил я ее или просто скрыл, эффект тот же). Логика перехода назад тут не рассматривается, я знаю как ее делать.

2 Разумеется представляю через расширение UINavigationControllerDelegate и в основном контроллере делаю navigationController?.delegate = self. Тут все работает однозначно, я поэтому не привожу код.

3 Ваш код работает с обычными контроллерами, мой тоже. Проблема только при использовании его в NavigationController.

[doublench21]

romanwb, Ну понятно что вью контроллера, а не сам контроллер. Ток зачем её удалять не ясно.
Не понял, мой код работает внутри навигейшн контроллера. Что из того что вы хотите, у меня не работает?

[romanwb]

@doublench21

Этот код работает, но интерактивные элементы не нажимаются на снимке (логично), значит после анимации мы должны добавить наш toView и удалить снапшот, верно?
Я думаю не самое эффективное занятие добавлять addSublayer(toView) после анимации, логичнее добавить его изначально и сразу скрыть, а в конце анимации сделать видимым.

Анимации бывают разные и видеть уже отрендереную toView бывает не нужно (например делаем модальное окно с частичным перекрытие и анимацией одновременно toView (toSnapshot) и fromView (fromSnapshot).

Сделать все это можно и без снимков, анимировать сами вьюшки, но эффективность будет падать при загруженных элементах.

Вопрос именно почему не работает мой код, который в вопросе, это был вопрос не реализации, а понять почему. И вот буквально сейчас я нашел вероятное решение:

1 https://stackoverflow.com/questions/54812883/navig...
2 https://forums.developer.apple.com/thread/63438

Это баг, когда снапшот получается с черным экраном.

Решается созданием снимка как изображение:

extension UIView {
    // Replacement of `snapshotView` on iOS 10.
    // Fixes the issue of `snapshotView` returning a blank white screen.
    func snapshotImageView() -> UIImageView? {
        UIGraphicsBeginImageContextWithOptions(bounds.size, true, 1)
        guard let context = UIGraphicsGetCurrentContext() else {
            return nil
        }
        layer.render(in: context)
        let viewImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return UIImageView(image: viewImage, highlightedImage: viewImage)
    }
}

Вводило в заблуждение, что в обычном контроллере работает, а в навигейшене нет.

В любом случае, благодарю за ответы.

[doublench21]

romanwb, Вы не поняли. Вы удаляете вью у контроллера от которого перешли, а когда вы захотите вернуться, что будет на месте вью у контроллера? ничего. И вы снова создадите и присвоите? Мазохизм.

Запомните, любые глобальные манипуляции делаются до анимации. И если вам кровь из носу нужно убрать вью контроллера, то isHidden или alpha ваш выбор.

А что касается вашего кода, я так Вас и не понял. Я Вам показал ваш код перехода. Он работает как в случаи навигейшн контроллера, так и без него. Что не так? (Я просто убрал ненужную строку удаления вью)

[romanwb]

doublench21, согласен, удалять не нужно

посмотрите, как будет возможность https://github.com/romanwb/testcustomtransition

у меня получается вот это

[doublench21]

romanwb, посмотрел.

final class ModalAnimator: NSObject, UIViewControllerAnimatedTransitioning {

  var isPresenting: Bool

  let duration: TimeInterval = 3

  init(isPresenting: Bool) {
    self.isPresenting = isPresenting
  }

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

  func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
    guard let fromVC = transitionContext.viewController(forKey: .from),
          let toVC = transitionContext.viewController(forKey: .to),
          let snapshot = toVC.view.snapshotView(afterScreenUpdates: true)
    else { return }

    let containerView = transitionContext.containerView

    snapshot.frame = fromVC.view.frame

    containerView.addSubview(toVC.view)
    containerView.addSubview(snapshot)

    fromVC.view.isHidden = true

    UIView.animate(withDuration: duration, animations: {
      snapshot.transform = CGAffineTransform(rotationAngle: .pi)
    }) { succes in
      fromVC.view.isHidden = false
      snapshot.removeFromSuperview()
      transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
    }
  }
}

[doublench21]

romanwb, твоя проблема была в том, что у тебя duration равен 3, а transitionContext.completeTransition ты вызываешь тут же. Если добавишь анимацию, пусть даже пустую, я добавил просто поворот, всё будет отображаться как надо.

[romanwb]

doublench21, спасибо!)

[doublench21]

romanwb, Welcome! Убери инфу про баг, не путай людей :)

[romanwb]

doublench21, убрал)

Последняя просьба, посмотрите пожалуйста этот переход, во время анимации (push) черный экран (после конечно показывается нужная вьюшка):

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        guard let fromVC = transitionContext.viewController(forKey: .from),
            let fromSnapshot = fromVC.view.snapshotView(afterScreenUpdates: true),
            let toVC = transitionContext.viewController(forKey: .to),
            let toSnapshot = toVC.view.snapshotView(afterScreenUpdates: true)
            else {
                return
        }
        
        let containerView = transitionContext.containerView
        
        toSnapshot.frame.origin.x = containerView.frame.width
        
        containerView.addSubview(fromSnapshot)
        containerView.addSubview(toVC.view)
        containerView.addSubview(toSnapshot)
        
        fromVC.view.isHidden = true
        toVC.view.isHidden = true
        
        UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseInOut], animations: {
            fromSnapshot.frame.origin.x = -(containerView.frame.width / 2.0)
            toSnapshot.frame.origin.x = 0
        }) { _ in
            toVC.view.isHidden = false
            fromSnapshot.removeFromSuperview()
            toSnapshot.removeFromSuperview()
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        }
    }

[doublench21]

romanwb, Посмотрел. view.snapshotView(afterScreenUpdates: true) делает снимок и ожидает изменения view ровно до тех пор, пока не пройдет весь цикл RunLoop(рендер цикл). А вы после снимка, тут же делаете view.isHidden = true. Угадайте что будет на снимке? Пустота.

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        guard let fromVC = transitionContext.viewController(forKey: .from),
            let fromSnapshot = fromVC.view.snapshotView(afterScreenUpdates: true),
            let toVC = transitionContext.viewController(forKey: .to),
            let toSnapshot = toVC.view.snapshotView(afterScreenUpdates: true)
            else {
                return
        }
        
        let containerView = transitionContext.containerView
        
        toSnapshot.frame.origin.x = containerView.frame.width
        
        containerView.addSubview(fromSnapshot)
        containerView.addSubview(toVC.view)
        containerView.addSubview(toSnapshot)
        
   //     fromVC.view.isHidden = true
   //     toVC.view.isHidden = true
        
        UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseInOut], animations: {
            fromSnapshot.frame.origin.x = -(containerView.frame.width / 2.0)
            toSnapshot.frame.origin.x = 0
        }) { _ in
         //   toVC.view.isHidden = false
            fromSnapshot.removeFromSuperview()
            toSnapshot.removeFromSuperview()
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        }
    }

[romanwb]

doublench21, Стало более понятно, следовательно, для fromVC.view мы можем сделать snapshotView(afterScreenUpdates: false) и скрыть его нормально, а для toVC.view не получится т.к. вьюша не на экране. Вызов перерисовки через setNeedsLayout setNeedsDisplay layoutIfNeeded layoutSubviews не дал результата.

Возникает вопрос для анимации, где между переходами должен быть виден пустой фон (допустим черный), fromVC.view уезжает по диагонали вниз, а toView приезжает по диагонали сверху, как правильно реализовать?

У меня две идеи:
1 Добавить в containerView сначала toVC.view, потом временную вьюшку с непрозрачным фоном, далее снимки и т.д., в конце удалить снимки и временную вьюшку (анимация отрабатывает, как нужно).

guard let fromVC = transitionContext.viewController(forKey: .from),
    let fromSnapshot = fromVC.view.snapshotView(afterScreenUpdates: false),
    let toVC = transitionContext.viewController(forKey: .to),
    let toSnapshot = toVC.view.snapshotView(afterScreenUpdates: true)
    else {
        return
}

let containerView = transitionContext.containerView

containerView.addSubview(toVC.view)
let blackView = UIView(frame: containerView.frame)
blackView.backgroundColor = .black
containerView.addSubview(blackView)

containerView.addSubview(fromSnapshot)
containerView.addSubview(toSnapshot)

toSnapshot.frame.origin.x = containerView.frame.width
toSnapshot.frame.origin.y = -containerView.frame.height

UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseInOut], animations: {
    fromSnapshot.frame.origin.x = -containerView.frame.width
    fromSnapshot.frame.origin.y = containerView.frame.height
    toSnapshot.frame.origin = .zero
}) { _ in
    blackView.removeFromSuperview()
    fromSnapshot.removeFromSuperview()
    toSnapshot.removeFromSuperview()
    transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
}

2 В блоке после анимации, добавить в containerView сначала toVC.view, а потом удалять снимки), но тут получается беда, вероятно, с аутолейаутом снимка, кнопка возврата прыгает вниз, я думаю из за навигейшин бара (кнопка привязана сверху к safe area и на момент снимка о нем ничего не знает). Можно что-то с этим сделать?

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        guard let fromVC = transitionContext.viewController(forKey: .from),
            let fromSnapshot = fromVC.view.snapshotView(afterScreenUpdates: false),
            let toVC = transitionContext.viewController(forKey: .to),
            let toSnapshot = toVC.view.snapshotView(afterScreenUpdates: true)
            else {
                return
        }
        
        let containerView = transitionContext.containerView
        
        containerView.addSubview(fromSnapshot)
        containerView.addSubview(toSnapshot)
        
        toSnapshot.frame.origin.x = containerView.frame.width
        toSnapshot.frame.origin.y = -containerView.frame.height
        
        fromVC.view.isHidden = true
        
        UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseInOut], animations: {
            fromSnapshot.frame.origin.x = -containerView.frame.width
            fromSnapshot.frame.origin.y = containerView.frame.height
            toSnapshot.frame.origin = .zero
        }) { _ in
            containerView.addSubview(toVC.view)
            
            fromSnapshot.removeFromSuperview()
            toSnapshot.removeFromSuperview()
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        }
    }