Настало время офигительных историй. Кастомные транзишены в iOS. [2/2]

В прошлой статье мы реализовали анимацию ZoomIn/ZoomOut для открытия и закрытия экрана с историями.

В этот раз мы прокачаем StoryBaseViewController и реализуем кастомные анимации при переходе между историями.

Навигация между историями

Давайте сделаем анимацию для переходов между историями.

enum TransitionOperation {
    case push, pop
}

public class StoryBaseViewController: UIViewController {
    
    // MARK: - Constants
    private enum Spec {
        static let minVelocityToHide: CGFloat = 1500
        
        enum CloseImage {
            static let size: CGSize = CGSize(width: 40, height: 40)
            static var original: CGPoint = CGPoint(x: 24, y: 50)
        }
    }
    
    // MARK: - UI components
    private lazy var closeButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setImage(#imageLiteral(resourceName: "close"), for: .normal)
        button.addTarget(self, action: #selector(closeButtonAction(sender:)), for: .touchUpInside)
        button.frame = CGRect(origin: Spec.CloseImage.original, size: Spec.CloseImage.size)
        return button
    }()
    
    // MARK: - Private properties
    // 1
    private lazy var percentDrivenInteractiveTransition: UIPercentDrivenInteractiveTransition? = nil
    private lazy var operation: TransitionOperation? = nil
    
    // MARK: - Lifecycle
    public override func loadView() {
        super.loadView()
        setupUI()
    }
    
}

extension StoryBaseViewController {
    
    private func setupUI() {
        // 2
        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
        panGestureRecognizer.delegate = self
        view.addGestureRecognizer(panGestureRecognizer)
        view.addSubview(closeButton)
    }
    
    @objc
    private func closeButtonAction(sender: UIButton!) {
        dismiss(animated: true, completion: nil)
    }
    
}

// MARK: UIPanGestureRecognizer
extension StoryBaseViewController: UIGestureRecognizerDelegate {
    
    @objc
    func handlePanGesture(_ panGesture: UIPanGestureRecognizer) {
        handleHorizontalSwipe(panGesture: panGesture)
    }
    
    // 3
    private func handleHorizontalSwipe(panGesture: UIPanGestureRecognizer) {
        
        let velocity = panGesture.velocity(in: view)
        // 4 Отвечает за прогресс свайпа по экрану, в диапазоне от 0 до 1
        var percent: CGFloat {
            switch operation {
            case .push:
                return abs(min(panGesture.translation(in: view).x, 0)) / view.frame.width
                
            case .pop:
                return max(panGesture.translation(in: view).x, 0) / view.frame.width
                
            default:
                return max(panGesture.translation(in: view).x, 0) / view.frame.width
            }
        }
        
        // 5
        switch panGesture.state {
        case .began:
            // 6
            percentDrivenInteractiveTransition = UIPercentDrivenInteractiveTransition()
            percentDrivenInteractiveTransition?.completionCurve = .easeOut
            
            navigationController?.delegate = self
            if velocity.x > 0 {
                operation = .pop
                navigationController?.popViewController(animated: true)
            } else {
                operation = .push
                
                let nextVC = StoryBaseViewController()
                nextVC.view.backgroundColor = UIColor.random
                navigationController?.pushViewController(nextVC, animated: true)
            }
            
        case .changed:
            // 7
            percentDrivenInteractiveTransition?.update(percent)
            
        case .ended:
            // 8
            if percent > 0.5 || velocity.x > Spec.minVelocityToHide {
                percentDrivenInteractiveTransition?.finish()
            } else {
                percentDrivenInteractiveTransition?.cancel()
            }
            percentDrivenInteractiveTransition = nil
            navigationController?.delegate = nil
            
        case .cancelled, .failed:
            // 9
            percentDrivenInteractiveTransition?.cancel()
            percentDrivenInteractiveTransition = nil
            navigationController?.delegate = nil
            
        default:
            break
        }
    }
    
}

1. Чтобы наша анимация была интерактивной и следовала за движением пальца, мы создаем объект percentDrivenInteractiveTransition. А operation отвечает за тип перехода (push или pop).

2. Добавляем наш жест во view.

3. Реализуем обработчик нажатия/свайпа.

4. percent отвечает за прогресс свайпа по экрану в диапазоне от 0 до 1.

5. В зависимости от состояния жеста конфигурируем наши свойства.

6. Как только начинается новый жест, создаем свежий экземпляр UIPercentDrivenInteractiveTransition и сообщаем делегату navigationController’а, что мы самостоятельно его реализуем (реализация будет ниже). Если направление свайпа положительное, то мы сохраняем в переменную operation значение .pop, и сообщаем navigationController’у, что мы начали процесс перехода с анимацией .navigationController?.popViewController(animated: true). Аналогично делаем для .push-перехода.

7. Когда наш свайп уже активен, мы передаем его прогресс в percentDrivenInteractiveTransition.

8. Если мы просвайпили более половины экрана, или это было сделано с скоростью более 1500, то мы завершаем наш переход percentDrivenInteractiveTransition?.finish(). В противном случае отменяем переход. При этом необходимо очистить percentDrivenInteractiveTransition и navigationController?.delegate.

9. В случае отмены свайпа мы также отменяем переход и очищаем значения.

Сейчас при начале свайпа нужно сообщить navigationController’у, что мы реализуем делегат navigationController?.delegate = self. Но мы этого так и не сделали. Самое время:

// MARK: UINavigationControllerDelegate    
extension StoryBaseViewController: UINavigationControllerDelegate {
    
    // 1
    public func navigationController(
        _ navigationController: UINavigationController,
        animationControllerFor operation: UINavigationController.Operation,
        from fromVC: UIViewController,
        to toVC: UIViewController
    ) -> UIViewControllerAnimatedTransitioning? {
        
        switch operation {
        case .push:
            return StoryBaseAnimatedTransitioning(operation: .push)
            
        case .pop:
            return StoryBaseAnimatedTransitioning(operation: .pop)
            
        default:
            return nil
        }
    }
    
    // 2
    public func navigationController(
        _ navigationController: UINavigationController,
        interactionControllerFor animationController: UIViewControllerAnimatedTransitioning
    ) -> UIViewControllerInteractiveTransitioning? {
    
        return percentDrivenInteractiveTransition
    }
    
}

1. Этот метод возвращает аниматор для соответствующего перехода.

2. Возвращаем объект типа UIPercentDrivenInteractiveTransition, который отвечает за прогресс интерактивного перехода.

Аниматор

Наконец-то реализуем аниматор, который непосредственно отвечает за поведение перехода.

Нам необходимы два метода делегата, отвечающие за продолжительность анимации и сам переход.

class StoryBaseAnimatedTransitioning: NSObject {
    
    private enum Spec {
        static let animationDuration: TimeInterval = 0.3
        static let cornerRadius: CGFloat = 10
        static let minimumScale = CGAffineTransform(scaleX: 0.85, y: 0.85)
    }
    
    private let operation: TransitionOperation
    
    init(operation: TransitionOperation) {
        self.operation = operation
    }
    
}

extension StoryBaseAnimatedTransitioning: UIViewControllerAnimatedTransitioning {
    
    // http://fusionblender.net/swipe-transition-between-uiviewcontrollers/
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        
        /// 1 Получаем view-контроллеры, которые будем анимировать.
        guard
            let fromViewController = transitionContext.viewController(forKey: .from),
            let toViewController = transitionContext.viewController(forKey: .to)
        else {
            return
        }
        
        /// 2 Получаем доступ к представлению, на котором происходит анимация (которое участвует в переходе).
        let containerView = transitionContext.containerView
        containerView.backgroundColor = UIColor.clear
        
        /// 3 Закругляем углы наших view при переходе.
        fromViewController.view.layer.masksToBounds = true
        fromViewController.view.layer.cornerRadius = Spec.cornerRadius
        toViewController.view.layer.masksToBounds = true
        toViewController.view.layer.cornerRadius = Spec.cornerRadius
        
        /// 4 Отвечает за актуальную ширину containerView
        // Swipe progress == width
        let width = containerView.frame.width

        /// 5 Начальное положение fromViewController.view (текущий видимый VC)
        var offsetLeft = fromViewController.view.frame

        /// 6 Устанавливаем начальные значения для fromViewController и toViewController
        switch operation {
        case .push:
            offsetLeft.origin.x = 0
            toViewController.view.frame.origin.x = width
            toViewController.view.transform = .identity
            
        case .pop:
            offsetLeft.origin.x = width
            toViewController.view.frame.origin.x = 0
            toViewController.view.transform = Spec.minimumScale
        }
        
        /// 7 Перемещаем toViewController.view над/под fromViewController.view, в зависимости от транзишена
        switch operation {
        case .push:
            containerView.insertSubview(toViewController.view, aboveSubview: fromViewController.view)
            
        case .pop:
            containerView.insertSubview(toViewController.view, belowSubview: fromViewController.view)
        }
        
        // Так как мы уже определили длительность анимации, то просто обращаемся к ней
        let duration = self.transitionDuration(using: transitionContext)
        
        UIView.animate(withDuration: duration, delay: 0, options: .curveEaseIn, animations: {
        
            /// 8. Выставляем финальное положение view-контроллеров для анимации и трансформируем их.
            let moveViews = {
                toViewController.view.frame = fromViewController.view.frame
                fromViewController.view.frame = offsetLeft
            }

            switch self.operation {
            case .push:
                moveViews()
                toViewController.view.transform = .identity
                fromViewController.view.transform = Spec.minimumScale
                
            case .pop:
                toViewController.view.transform = .identity
                fromViewController.view.transform = .identity
                moveViews()
            }
            
        }, completion: { _ in
            
            ///9.  Убираем любые возможные трансформации и скругления
            toViewController.view.transform = .identity
            fromViewController.view.transform = .identity
            
            fromViewController.view.layer.masksToBounds = true
            fromViewController.view.layer.cornerRadius = 0
            toViewController.view.layer.masksToBounds = true
            toViewController.view.layer.cornerRadius = 0
     
            /// 10. Если переход был отменен, то необходимо удалить всё то, что успели сделать. То есть необходимо удалить toViewController.view из контейнера.
            if transitionContext.transitionWasCancelled {
                toViewController.view.removeFromSuperview()
            }
            
            containerView.backgroundColor = .clear
            /// 11. Сообщаем transitionContext о состоянии операции
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        })
        
    }
    
    // 12. Время длительности анимации
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return Spec.animationDuration
    }

1. Получаем view-контроллеры, которые будем анимировать.

2. Получаем доступ к представлению containerView, на котором происходит анимация (участвующее в переходе).

3. Закругляем углы наших view при переходе.

4. width отвечает при анимации за актуальную ширину containerView.

5. offsetLeft — начальное положение fromViewController.

6. Конфигурируем начальное положение для экранов.

7. Перемещаем toViewController.view над/под fromViewController.view, в зависимости от перехода.

8. Выставляем финальное положение view-контроллеров для анимации и трансформируем их.

9. Убираем любые возможные трансформации и скругления.

10. Если переход был отменен, то необходимо удалить всё то, что успели сделать. То есть необходимо удалить toViewController.view из контейнера.

11. Сообщаем transitionContext о состоянии перехода.

12. Указываем длительность анимации.

Всё, наш аниматор готов. Теперь запускаем проект и наслаждаемся результатом. Анимации работают.

Весь исходный код можете скачать тут. Буду рад вашим комментариям и замечаниям!