Создание анимаций для навигации в iOS / Хабр

Всем привет! Я хочу поделится своим опытом реализации кастомных переходов между экранами в iOS. Несмотря на то, что тема эта достаточно популярная, и очень многие дизайнеры хотят привнести в процесс перехода какую-то свою изюминку (затемнение, параллакс и т. п.), реализация этих вещей не очень тривиальна. Я попробую разложить все по полочкам. Рассмотрим сначала стандартное решение, которое не особо гибкое, но зачастую достаточное для многих проектов. Затем реализуем полностью кастомное и контролируемое исключительно нами решение.

Итак, погнали!

Речь пойдет о всем знакомых переходах между контроллерами внутри UINavigationController. Гораздо удобнее и приятнее с точки зрения пользователя иметь возможность совершать переходы с помощью свайпов. Эту задачу мы и будем решать в статье.

InteractivePopGestureRecognizer

Задача реализации навигации с помощью свайпа может быть решена с помощью interactivePopGestureRecognizer. Реализовывается чрезвычайно просто:

navigationController.interactivePopGestureRecognizer?.delegate = self
navigationController.interactivePopGestureRecognizer?.isEnabled = true

Это позволит с помощью свайпа слева направо возвращаться на предыдущий контроллер в стэке. Начинаться свайп должен будет с левой кромки экрана.

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

UIViewControllerAnimatedTransitioning

Следующий способ основан на протоколе UIViewControllerAnimatedTransitioning, который мы можем реализовать и передать в соответствующем методе делегата нашему экземпляру UINavigationController. Объект, реализующий этот протокол, будет определять необходимую нам анимацию, которая будет использована для анимирования возврата на предыдущий экран (pop). В общем случае, можно использовать его и для перехода на новый экран (push), но лучше пока сосредоточиться только на одной задаче, чтобы не усложнять код.

Также будет необходимо передать и объект, реализующий протокол UIViewControllerInteractiveTransitioning. Данный объект позволит управлять анимацией с помощью жестов.

Давайте создадим наследника UINavigationController, назовем его BackSwipeNavigationController. Это действие не то, чтобы обязательное, но мне удобно делать так, чтобы в проекте иметь возможность использовать как обычные UINavigationController, так и с кастомной логикой.

Полный код файла:

Hidden text

import UIKit

class BackSwipeNavigationController: UINavigationController {
    lazy var navigationData: BackSwipeNavigationData = {
        let data = BackSwipeNavigationData()
        return data
    }()

    lazy var backSwipeManager: BackSwipeNavManager = {
        let manager = BackSwipeNavManager(data: self.navigationData, navController: self)
        return manager
    }()

    lazy var panGestureRecognizer: UIPanGestureRecognizer = {
        UIPanGestureRecognizer(target: backSwipeManager,
                               action: #selector(BackSwipeNavManager.handlePanGesture(_:)))
    }()
    
    init() {
        super.init(nibName: nil, bundle: nil)
        configure()
    }

    override init(nibName: String?, bundle: Bundle?) {
        super.init(nibName: nibName, bundle: bundle)
        configure()
    }

    override init(rootViewController: UIViewController) {
        super.init(rootViewController: rootViewController)
        configure()
    }

    func configure() {
        delegate = backSwipeManager
        panGestureRecognizer.isEnabled = true
        view.addGestureRecognizer(panGestureRecognizer)
    }
    
    override func pushViewController(_ contoller: UIViewController, animated: Bool) {
        navigationData.duringPushAnimation = true
        super.pushViewController(contoller, animated: animated)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Здесь мы переопределяем метод pushViewController, чтобы отслеживать момент начала push-анимации, которую мы пока не будет переопределять.

override func pushViewController(_ contoller: UIViewController, animated: Bool) {
    navigationData.duringPushAnimation = true
    super.pushViewController(contoller, animated: animated)
}

Также в нашем контроллере появляется два новых объекта классов BackSwipeNavigationData и BackSwipeNavManager. Первый будет хранить необходимые нам данные, которые в зависимости от задачи можно будет расширять. Второй будет делегатом контроллера и содержать логику управления жестами.

lazy var navigationData: BackSwipeNavigationData = {
    let data = BackSwipeNavigationData()
    return data
}()

lazy var backSwipeManager: BackSwipeNavManager = {
    let manager = BackSwipeNavManager(data: self.navigationData, navController: self)
    return manager
}()

В контроллере также определяем UIPanGestureRecognizer, который будет ловить жесты, обработку которых мы поручаем BackSwipeNavManager.

lazy var panGestureRecognizer: UIPanGestureRecognizer = {
  UIPanGestureRecognizer(target: backSwipeManager,
                         action: #selector(BackSwipeNavManager.handlePanGesture(_:)))
}()

Приведем код BackSwipeNavigationData:

class BackSwipeNavigationData {
    var duringPushAnimation: Bool = false
    var duringPopAnimation: Bool = false
    var percentDrivenInteractiveTransition: UIPercentDrivenInteractiveTransition!
}

Флаги duringPushAnimation и duringPopAnimation хранят информацию о типе анимации. Почему-то мне было проще использовать булевские переменные, хотя очень даже просится enum. Ну не суть :-)

Переменная percentDrivenInteractiveTransition будет нашим рычагом управления анимацией. Именно с помощью нее мы будем осуществлять магию, задавая момент времени, на который мы перемещаем анимацию, а также осуществлять запуск анимации с текущего фрейма вперед или назад.

Прежде, чем мы перейдем к реализации BackSwipeNavManager, я хочу схематично описать всех участников процесса.

По этой схеме мы можем теперь описать дальнейший алгоритм, который реализуем в двух основных классах решения - BackSwipeNavManager и BackSwipeAnimatedTransitioning.

Итак, наш NavigationController будет делегировать всю основную логику в BackSwipeNavManager, включая логику обработки жестов от PanGestureRecognizer и обработку методов протокола UINavigationControllerDelegate, которые и запускают кастомизацию процесса перехода.

BackSwipeNavManager будет делать две основные вещи:

Запускать кастомную анимацию перехода, реализацией которой займется класс BackSwipeNavigationTransitioning.
Контролировать кастомную анимацию с помощью экземпляра класса UIPercentDrivenInteractiveTransition, подключив логику контроля к обработке жестов.

Теперь приведем полный код BackSwipeNavManager.

Hidden text

class BackSwipeNavManager: NSObject, UINavigationControllerDelegate {
    var navigationData: BackSwipeNavigationData!
    var navController: BackSwipeNavigationController!
    
    init(data: BackSwipeNavigationData,
               navController: BackSwipeNavigationController) {
        navigationData = data
        self.navController = navController
    }
    
    func navigationController(_ navigationController: UINavigationController,
                              animationControllerFor operation: UINavigationController.Operation,
                              from fromVC: UIViewController,
                              to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        if navigationData.duringPushAnimation {
            return nil
        }

        return BackSwipeAnimatedTransitioning()
    }
    
    func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) {
        navigationData.duringPushAnimation = false
    }
    
    func navigationController(_ navigationController: UINavigationController,
                              interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {

        if navigationData.duringPushAnimation {
            return nil
        }

        if navController.panGestureRecognizer.state == .began {
            navigationData.percentDrivenInteractiveTransition = UIPercentDrivenInteractiveTransition()
            navigationData.percentDrivenInteractiveTransition.completionCurve = .easeOut
        } else {
            navigationData.percentDrivenInteractiveTransition = nil
        }

        return navigationData.percentDrivenInteractiveTransition
    }
    
    @objc func handlePanGesture(_ panGesture: UIPanGestureRecognizer) {
        let percent = max(panGesture.translation(in: navController.view).x, 0) / navController.view.frame.width

        switch panGesture.state {

        case .began:
            guard navController.viewControllers.count > 1 else {
                return
            }

            navController.delegate = self
            navigationData.duringPopAnimation = true
            navController.popViewController(animated: true)

        case .changed:
            if let percentDrivenInteractiveTransition = navigationData.percentDrivenInteractiveTransition {
                percentDrivenInteractiveTransition.update(percent)
            }

        case .ended:

            navigationData.duringPopAnimation = false
            guard let percentDrivenInteractiveTransition = navigationData.percentDrivenInteractiveTransition else { return }

            let velocity = panGesture.velocity(in: navController.view).x

            // Continue if drag more than 50% of screen width or velocity is higher than 1000
            if percent > 0.5 || velocity > 1000 {
                percentDrivenInteractiveTransition.finish()
            } else {
                percentDrivenInteractiveTransition.cancel()
                navigationData.percentDrivenInteractiveTransition = nil
            }

        case .cancelled,
             .failed:

            navigationData.duringPopAnimation = false
            guard let percentDrivenInteractiveTransition = navigationData.percentDrivenInteractiveTransition else { return }

            percentDrivenInteractiveTransition.cancel()
            navigationData.percentDrivenInteractiveTransition = nil

        default:
            break
        }
    }
}

Рассмотрим этот код подробнее. Начнем с метода:

func navigationController(_ navigationController: UINavigationController,
                          animationControllerFor operation: UINavigationController.Operation,
                          from fromVC: UIViewController,
                          to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    if navigationData.duringPushAnimation {
        return nil
    }

    return BackSwipeAnimatedTransitioning()
}

Тут мы убеждаемся, что это именно pop-анимация. Затем, если это именно она, создаем и возвращаем экземпляр класса BackSwipeAnimatedTransitioning. В этом классе будет определена сама анимация перехода, и его мы рассмотрим позднее.

Далее определим метод:

func navigationController(_ navigationController: UINavigationController,
                              interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
    if navigationData.duringPushAnimation {
        return nil
    }

    if navController.panGestureRecognizer.state == .began {
        navigationData.percentDrivenInteractiveTransition = UIPercentDrivenInteractiveTransition()
        navigationData.percentDrivenInteractiveTransition.completionCurve = .easeOut
    } else {
        navigationData.percentDrivenInteractiveTransition = nil
    }

    return navigationData.percentDrivenInteractiveTransition
}

В этом месте мы создаем и возвращаем объект класса UIPercentDrivenInteractiveTransition, с помощью которого будем контролировать анимацию.

Затем идет объявление функции:

@objc func handlePanGesture(_ panGesture: UIPanGestureRecognizer)

В ней мы осуществляем обработку жестов. Рассмотрим кейсы состояния рекогнайзера:

began

Убеждаемся, что нам есть, куда откатываться в navigation-stack, выставляем делегатом себя (мало ли, кто его изменил в процессе :-) ), устанавливаем флаг типа анимации, и осуществляем сам pop.

changed

Осуществляем установку момента анимации. Его высчитываем в самом начале, так как он будет использоваться в нескольких кейсах.

ended

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

cancelled или failed

В этом кейсе всегда отменяем анимацию.

Остается теперь реализация самой анимации. Ее мы реализуем в классе BackSwipeAnimatedTransitioning.

Hidden text

class BackSwipeAnimatedTransitioning: NSObject, UIViewControllerAnimatedTransitioning {

    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.3
    }
    
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        let containerView = transitionContext.containerView
        
        guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
              let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) else {
            return
        }
        
        let fromView = fromVC.view
        let toView = toVC.view
        
        let originToFrame = toView?.frame ?? CGRect.zero
        
        let width = containerView.frame.width
        
        var offsetLeft = fromView?.frame
        offsetLeft?.origin.x = width
        
        var offscreenRight = toView?.frame
        offscreenRight?.origin.x = -width / 3.33

        toView?.frame = offscreenRight!
        
        fromView?.layer.shadowRadius = 5.0
        fromView?.layer.shadowOpacity = 1.0
        toView?.layer.opacity = 0.9

        let toFrame = (fromView?.frame)!
        
        containerView.insertSubview(toView!, belowSubview: fromView!)
        
        UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0, options: .curveLinear, animations: {
            toView?.frame = toFrame
            fromView?.frame = offsetLeft!

            toView?.layer.opacity = 1.0
            fromView?.layer.shadowOpacity = 0.1
        }, completion: { _ in
            toView?.layer.opacity = 1.0
            toView?.layer.shadowOpacity = 0
            fromView?.layer.opacity = 1.0
            fromView?.layer.shadowOpacity = 0

            toView?.frame = originToFrame
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        })
    }
}

Реализуя протокол UIViewControllerAnimatedTransitioning, мы должны реализовать два метода, определяющие длительность анимации и саму анимацию.

Рассмотрим немного метод создания анимации:

func animateTransition(using transitionContext: UIViewControllerContextTransitioning)

В него передается контекст перехода, из которого мы получаем доступ к контроллерам, между которыми осуществляется переход, а вместе с ними и к их view. Этого достаточно, чтобы реализовать абсолютно любую анимацию перехода между ними, которой затем мы сможем легко управлять.

Вот собственно и все. Отдельно хочу заметить, что подобным образом можно делать контролируемые кастомные анимации не только для переходов в UINavigationController, но и для переходов посредством present и dismiss контроллеров, а даже для переходов между экранами UITabBarController.

Всем спасибо! Удачи в реализации ваших анимаций в приложениях! :-)

P.S. Код демо-проекта из статьи доступен по ссылке