Swift之微信朋友圈图片浏览器

最近闲来无事,突然对微信, 微博, QQ等社交APP的九宫格的图片浏览功能非常感兴趣, 最近就尝试着研究了一下:

这里先附上

• 在介绍项目之前, 先介绍三个基础知识
  • CATransition转场动画
  • ViewController自定义转场
  • UIBesization贝塞尔曲线

一. CATransition转场动画

示例代码

//4. 转场动画let transition = CATransition()transition.type = transitionTypetransition.subtype = isNext ? kCATransitionFromRight : kCATransitionFromLefttransition.duration = 1downloadImage(url: imageURL)baseImage.layer.add(transition, forKey: "transition")复制代码

更多关于该动画的详细介绍, 可参考中第七种CA动画, 故这里不多做介绍

二. ViewController自定义转场

从iOS7开始，苹果更新了自定义ViewController转场的API,会用到的几个协议protocol:

• 描述ViewController转场的：
  • UIViewControllerTransitioningDelegate
  • UINavigationControllerDelegate
  • UITabBarControllerDelegate
• 定义动画内容的
  • UIViewControllerAnimatedTransitioning
  • UIViewControllerInteractiveTransitioning
• 表示动画上下文的
  • UIViewControllerContextTransitioning

1-1. 描述ViewController转场的

• 为什么苹果要引入这一套API？因为在iOS7之前，做转场动画很麻烦，要写一大堆代码在ViewController中。
• 引入这一套API之后，在丰富功能的同时极大程度地降低了代码耦合，实现方式就是将之前在ViewController里面的代码通过protocol分离了出来。
• 顺着这个思路往下想，实现自定义转场动画首先需要找到ViewController的delegate。
• 苹果告诉我们切换ViewController有三种形式：
  • UITabBarController内部切换
  • UINavigationController切换
  • present ViewController
  • 这三种方式是不是需要不同的protocol呢？

1-2. 详解Protocol

• UIViewControllerTransitioningDelegate 自定义模态转场动画时使用。

  • 设置UIViewController的属性transitioningDelegate

  weak open var transitioningDelegate: UIViewControllerTransitioningDelegate?复制代码

• UINavigationControllerDelegate 自定义navigation转场动画时使用

  • 设置UINavigationController的属性delegate

  weak open var delegate: UINavigationControllerDelegate?复制代码

• UITabBarControllerDelegate自定义tab转场动画时使用

  • 设置UITabBarController的属性delegate

  weak open var delegate: UITabBarControllerDelegate?复制代码

实际上这三个protocol干的事情是一样的只不过他们的应用场景不同罢了。我们下面以UINavigationControllerDelegate为例，其他的类似

• UINavigationControllerDelegate主要的方法

@available(iOS 7.0, *)    optional public func navigationController(_ navigationController: UINavigationController, interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?        @available(iOS 7.0, *)    optional public func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?复制代码

• 两个方法分别返回UIViewControllerInteractiveTransitioning和UIViewControllerAnimatedTransitioning，它们的任务是描述动画行为（转场动画如何执行，就看它俩的）。
• 从名字可以看出，这两个protocol的区别在于是否是interactive的。如何理解？
• interactive动画可以根据输入信息的变化改变动画的进程。例如iOS系统为UINavigationController提供的默认右滑退出手势就是一个interactive 动画，整个动画的进程由用户手指的移动距离控制

1-3. UIViewControllerInteractiveTransitioning协议

定义了两个属性可以做到平滑过渡

• completionCurve: 交互结束后剩余动画的速率曲线
• completionSpeed: 交互结束后动画的开始速率由该参数与原来的速率相乘得到，实际上是个缩放参数，这里应该使用单位变化速率(即你要的速率/距离)。
• 注意：
  • completionSpeed会影响剩余的动画时间，而不是之前设定的转场动画时间剩下的时间；
  • 当completionSpeed很小时剩余的动画时间可能会被拉伸得很长，所以过滤下较低的速率比较好。
  • 如果不设置两个参数，转场动画将以原来的速率曲线在当前进度的速率继续。
  • 不过从实际使用效果来看，往往不到0.5s的动画时间，基本上看不出什么效果来

1-4. 定义动画内容的UIViewControllerAnimatedTransitioning

• 必须实现的方法

//返回动画的执行时间public func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval//处理具体的动画  public func animateTransition(using transitionContext: UIViewControllerContextTransitioning)复制代码

1-5. 表示动画上下文UIViewControllerContextTransitioning

• UIViewControllerContextTransitioning提供了一系列方法
• 是唯一一个我们不需要实现的Protocol
• 下面是一些我们常用的属性和方法:

//转场动画发生在该View中    public var containerView: UIView { get }//上报动画执行完毕public func completeTransition(_ didComplete: Bool)//根据key返回一个ViewController。我们通过`FromViewControllerKey`找到将被替换掉的VC，通过`ToViewControllerKey`找到将要显示的VCpublic func viewController(forKey key: UITransitionContextViewControllerKey) -> UIViewController?//根据key返回一个view, 我们通过from找到将要消失的view, 根据to找到将要弹出的view@available(iOS 8.0, *)public func view(forKey key: UITransitionContextViewKey) -> UIView?复制代码

1-5. UIViewControllerTransitioningDelegate自定义模态转场时使用

// 该方法是告诉系统,弹出动画交给谁来处理func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {    isPresent = true    return self}// 该方法是告诉系统,消失动画交给谁来处理func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {    isPresent = false    return self}复制代码

三. 图片浏览器项目介绍

1. 项目结构Alamofire + MVVM

2. 自定义ViewController的弹出和消失动画

2-1. 自定义ViewController弹出和消失的Protocol

//MARK: 自定义协议protocol JunBrowsePresentDelefate: NSObjectProtocol {    /// 1. 提供弹出的imageView    func imageForPresent(indexPath: IndexPath) -> UIImageView        /// 2. 提供弹出的imageView的frame    func startImageRectForpresent(indexPath: IndexPath) -> CGRect        /// 3.提供弹出后imageView的frame    func endImageRectForpresent(indexPath: IndexPath) -> CGRect}protocol JunBrowserDismissDelegate {    /// 1.提供推出的imageView    func imageViewForDismiss() -> UIImageView        /// 2. 提供推出的indexPath    func indexPathForDismiss() -> IndexPath}复制代码

2-2. 遵循协议

• UIViewControllerTransitioningDelegate告诉系统弹出/消失动画的处理页面
• UIViewControllerAnimatedTransitioning
  • 需要返回动画的执行时间
  • 需要在弹出和消失页面的时候分别执行不同的动画

//MARK: UIViewControllerTransitioningDelegateextension PhotoBrowseAnimation: UIViewControllerTransitioningDelegate {    // 该方法是告诉系统,弹出动画交给谁来处理    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {        isPresent = true        return self    }    // 该方法是告诉系统,消失动画交给谁来处理    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {        isPresent = false        return self    }}//MARK: 继承AnimatedTransitioning协议extension PhotoBrowseAnimation: UIViewControllerAnimatedTransitioning {    //返回动画的执行时间    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {        return 0.6    }        //处理具体的动画    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {        isPresent ? presentAnimation(transitionContext) : dismissAnimation(transitionContext)    }}复制代码

2-3. 图片列表界面

1. 在点击需要展示的imageView的时候,调用下面的方法

// MARK:- 弹出照片浏览器extension JunScrollViewController {    fileprivate func presentPhotoBrowse(indexPath: IndexPath) {        //1. 创建图片浏览器        let photoBrowseVC = BrowseViewController(images: imageVM.imageArray, currentIndexP: indexPath)        //2. 设置弹出样式为自定义        photoBrowseVC.modalPresentationStyle = .custom        //3. 设置转场动画代理        photoBrowseVC.transitioningDelegate = photoAnimation        //4. 设置broseAnimation的属性        photoAnimation.setProperty(indexPath: indexPath, self, photoBrowseVC)        //5. 弹出图片浏览器        present(photoBrowseVC, animated: true, completion: nil)    }}复制代码

2. 遵循并实现自定义的协议方法

//MARK: JunBrowsePresentDelefateextension JunScrollViewController: JunBrowsePresentDelefate {    func imageForPresent(indexPath: IndexPath) -> UIImageView {        let imageV = UIImageView()        imageV.contentMode = .scaleAspectFill        imageV.clipsToBounds = true        //设置图片        imageV.kf.setImage(with: URL(string: imageVM.imageArray[indexPath.item].pic74), placeholder: UIImage(named: "coderJun"))        return imageV    }        func startImageRectForpresent(indexPath: IndexPath) -> CGRect {        // 1.取出cell        guard let cell = imageCollection.cellForItem(at: indexPath) else {            return CGRect(x: imageCollection.bounds.width * 0.5, y: kScreenHeight + 50, width: 0, height: 0)        }                // 2.计算转化为UIWindow上时的frame        return imageCollection.convert( cell.frame, to: UIApplication.shared.keyWindow)    }        func endImageRectForpresent(indexPath: IndexPath) -> CGRect {        //1. 取出对应的image的url        let imageUrl = URL(string: imageVM.imageArray[indexPath.item].pic74)!                //2.从缓存中取出image        var image = KingfisherManager.shared.cache.retrieveImageInDiskCache(forKey: imageUrl.absoluteString)        if image == nil {            image = UIImage(named: "coderJun")        }                // 3.根据image计算位置        let imageH = kScreenWidth / image!.size.width * image!.size.height        let y: CGFloat = imageH < kScreenHeight ? (kScreenHeight - imageH) / 2 : 0                return CGRect(x: 0, y: y, width: kScreenWidth, height: imageH)    }}复制代码

2-4. 在图片展示界面

• 遵循并实现相关dismiss协议方法
• 该协议主要实现viewController返回到该图片对应的IndexPath所在的位置

//MARK: JunBrowserDismissDelegateextension JunTranstionPhotoController: JunBrowserDismissDelegate{    func imageViewForDismiss() -> UIImageView {        let imageV = UIImageView()        imageV.contentMode = .scaleAspectFill        imageV.clipsToBounds = true                //设置图片        imageV.image = baseImage.image        imageV.frame = baseImage.convert(baseImage.frame, to: UIApplication.shared.keyWindow)                return imageV    }        func indexPathForDismiss() -> IndexPath {        return IndexPath(item: currentIndex, section: 0)    }}复制代码

---

GitHub

• 注意:
• 这里只是列出了主要的核心代码,具体的代码逻辑请参考demo
• 文中相关介绍有的地方如果有不是很详细或者有更好建议的,欢迎联系小编