iOS实现Pinterest的转场动画

Posted on

我们先来看看效果

实现原理

你可以先在github上下载本文的demo。

我们要实现自定义转场动画，最通用的方法就是自定义实现转场动画的类，并使这个类遵守UIViewControllerAnimatedTransitioning协议。

Pinterest的这个转场动画主要是通过UINavigationController的push和pop实现的，所以我们的目的就是自定义push和pop的转场动画，demo中的HXPinterestTransition类就是具体实现转场动画的类，它遵守了UIViewControllerAnimatedTransitioning协议。

实现步骤

1、定义一个协议HXPinterestTransitionView

这个协议的主要目的就是让需要转场动画的ViewController实现它，并管理需要做动画的View。协议很简单：

// MARK: -  要实现转场动画的ViewController必须遵守此协议
protocol HXPinterestTransitionView {

    func fromTransitionView() -> UIView?

    func toTransitionView() -> UIView?

}

2、定义HXPinterestTransition，并遵守UIViewControllerAnimatedTransitioning协议

这是实现转场动画的核心类，本类中实现了Pinterest转场的push和pop方法。

在效果图中，Pinterest控制器的瀑布流中点击到的cell上的imageView会放大并平移到Detail控制器的imageView的位置上，实现完美重合，在此期间，Pinterest控制器的collectionView也会跟随着放大，就好像是collectionView放大且平移着带动点击中的cell移动到Detail控制器的imageView上，整个过程非常平滑。

所以push方法的代码是这样的：

    /// push
    private func pushAnimateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        /// 首先对参数进行校验
        guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
            let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to),
            let fromTargetView = (fromVC as? HXPinterestTransitionView)?.fromTransitionView(),
            let toTargetView = (toVC as? HXPinterestTransitionView)?.toTransitionView() else {
                transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
                return
        }
        let containerView = transitionContext.containerView
        /// 计算动画view的初始frame和结束frame
        let fromFrame = fromTargetView.convert(fromTargetView.bounds, to: UIApplication.shared.keyWindow)
        let toFrame = toTargetView.convert(toTargetView.bounds, to: UIApplication.shared.keyWindow)
        let animationScale = toFrame.width / fromFrame.width
        let toScale = 1 / animationScale
        /// 定义一个UIImageView来做动画
        let snapImageView = UIImageView(image: fromTargetView.getScreenImage())
        snapImageView.frame = fromFrame
        /// 设置动画的初始状态
        toVC.view.alpha = 0
        toVC.view.transform = CGAffineTransform(scaleX: toScale, y: toScale)
        toVC.view.frame.origin = CGPoint(x: -toFrame.origin.x * toScale + fromFrame.origin.x, y: -toFrame.origin.y * toScale + fromFrame.origin.y)
        /// 添加一个白背景
        let bgView = UIView(frame: UIScreen.main.bounds)
        bgView.backgroundColor = .white
        /// 添加相应的view
        containerView.addSubview(bgView)
        containerView.addSubview(toVC.view)
        containerView.addSubview(fromVC.view)
        containerView.addSubview(snapImageView)

         UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0, options: .curveEaseOut, animations: {
            /// 1. 放大snapImageView，并使snapImageView的frame.origin处于一个正确的位置
            snapImageView.transform = CGAffineTransform(scaleX: animationScale, y: animationScale)
            snapImageView.frame.origin = toFrame.origin
            /// 2. 同时放大fromVC.view，并使fromVC.view的frame.origin处于一个正确的位置, 并改变透明度
            fromVC.view.alpha = 0
            fromVC.view.transform = CGAffineTransform(scaleX: animationScale, y: animationScale)
            fromVC.view.frame.origin = CGPoint(x: -fromFrame.origin.x * animationScale + toFrame.origin.x, y: -fromFrame.origin.y * animationScale + toFrame.origin.y)
            /// 3. 还原toVC.view的状态
            toVC.view.alpha = 1
            toVC.view.transform = CGAffineTransform.identity
            toVC.view.frame = UIScreen.main.bounds
        }) { (_) in
            /// 动画结束，移除多余的view
            bgView.removeFromSuperview()
            snapImageView.removeFromSuperview()
            /// 还原fromVC.view的状态
            fromVC.view.alpha = 1
            fromVC.view.transform = CGAffineTransform.identity
            fromVC.view.frame = UIScreen.main.bounds
            /// 结束动画
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        }
    }

代码中首先对参数进行校验，fromVC和toVC必须是要遵守了HXPinterestTransitionView且实现了相应方法的类。

接下来就是动画的具体实现了，别看代码很长，其实结构很清晰：计算动画view的初始frame和结束frame，定义来做动画的snapImageView，并设置toVC的初始状态，并将需要在动画中展示的view添加到containerView上。在 UIView.animate方法中，主要做了三步，在代码中已经注释过了，这里就不多啰嗦了。

然后就是pop动画了，在效果图中，pop动画的效果就好像是push动画反过来了一样，所以，实现的代码跟push的代码差别不大：

     /// pop
    private func popAnimateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
            let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to),
            let fromTargetView = (fromVC as? HXPinterestTransitionView)?.toTransitionView(),
            let toTargetView = (toVC as? HXPinterestTransitionView)?.fromTransitionView() else {
                transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
                return
        }
        let containerView = transitionContext.containerView
        let fromFrame = fromTargetView.convert(fromTargetView.bounds, to: UIApplication.shared.keyWindow)
        let toFrame = toTargetView.convert(toTargetView.bounds, to: UIApplication.shared.keyWindow)
        let animationScale = fromFrame.width / toFrame.width

        let snapImageView = UIImageView(image: toTargetView.getScreenImage())
        snapImageView.frame = toFrame
        snapImageView.transform = CGAffineTransform(scaleX: animationScale, y: animationScale)
        snapImageView.frame.origin = fromFrame.origin

        toVC.view.transform = CGAffineTransform(scaleX: animationScale, y: animationScale)
        toVC.view.frame.origin = CGPoint(x: -toFrame.origin.x * animationScale + fromFrame.origin.x, y: -toFrame.origin.y * animationScale + fromFrame.origin.y)

        let bgView = UIView(frame: UIScreen.main.bounds)
        bgView.backgroundColor = .white

        containerView.addSubview(toVC.view)
        containerView.addSubview(bgView)
        containerView.addSubview(snapImageView)

        UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0, options: .curveEaseOut, animations: {
            snapImageView.transform = CGAffineTransform.identity
            snapImageView.frame.origin = toFrame.origin
            toVC.view.transform = CGAffineTransform.identity
            toVC.view.frame = UIScreen.main.bounds
            bgView.alpha = 0
        }) { (_) in
            snapImageView.removeFromSuperview()
            bgView.removeFromSuperview()
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        }
    }

需要注意的是fromTargetView是fromVC.toTransitionView()，toTargetView是toVC.fromTransitionView()。

3、定义HXPinterestTransitionManager

为了更加易于使用，笔者还定义了一个HXPinterestTransitionManager类来专门管理是否需要执行转场动画，只需要将navigationController的delegate设置为HXPinterestTransitionManager的实例就可以了。

代码是这样的：

// MARK: -  为转场类定制的manager
class HXPinterestTransitionManager: NSObject, UINavigationControllerDelegate {

    public func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        /// 如果fromVC和toVC都遵守HXPinterestTransitionView协议，就使用Pinterest转场动画，否则使用系统转场动画
        guard let _ = fromVC as? HXPinterestTransitionView, let _ = toVC as? HXPinterestTransitionView else { return nil }
        switch operation {
        case .push:
            return HXPinterestTransition(.push)
        case .pop:
            return HXPinterestTransition(.pop)
        case .none:
            return nil
        }
    }
}

4、应用场景实例

这里有两个ViewController，分别是PinterestViewController和DetailViewController。
在PinterestViewController中设置navigationController的代理为HXPinterestTransitionManager的实例，最好是将其设置为属性，这样可以保证在navigationController的生命周期中一直有效。

  private let pinterestTransitionManager = HXPinterestTransitionManager()

    // MARK: -  Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        /// 设置导航控制器代理为pinterestTransitionManager
        navigationController?.delegate = pinterestTransitionManager
        /// 其他代码
        ......
    }

分别在PinterestViewController和DetailViewController中遵守HXPinterestTransitionView协议。

// MARK: -  HXPinterestTransitionView
extension PinterestViewController: HXPinterestTransitionView {
    func fromTransitionView() -> UIView? {
        ///这里取collectionView中被选中的cell
        guard let selectedItem = collectionView.indexPathsForSelectedItems?.first,
            let cell = collectionView.cellForItem(at: selectedItem) as? PintersetCell else { return nil }
        return cell.imageView
    }

    func toTransitionView() -> UIView? {
        return nil
    }
}
// MARK: -  HXPinterestTransitionView
extension DetailViewController: HXPinterestTransitionView {
    func fromTransitionView() -> UIView? {
        return nil
    }

    func toTransitionView() -> UIView? {
        return imageView
    }
}

具体的实现就是这么简单，只需要设置navigationController的代码，然后在需要做动画的viewController中分别遵守HXPinterestTransitionView协议就行了。

总结

自定义转场动画是iOS开发中比较常见的需求，这里给各位看官提供一种思路，如果有什么错误的地方，请指正。
github的代码在这里，如果觉得不错，请不要吝啬star，谢谢。

作者：hxwxww

发表评论

邮箱地址不会被公开。 必填项已用*标注