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

2017-10-28  本文已影响359人  TitanCoder

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

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

这里先附上Demo地址

一. CATransition转场动画

示例代码

//4. 转场动画
let transition = CATransition()
transition.type = transitionType
transition.subtype = isNext ? kCATransitionFromRight : kCATransitionFromLeft
transition.duration = 1
downloadImage(url: imageURL)
baseImage.layer.add(transition, forKey: "transition")

更多关于该动画的详细介绍, 可参考iOS出门必备之CoreAnimation(核心动画)中第七种CA动画, 故这里不多做介绍

二. ViewController自定义转场

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

1-1. 描述ViewController转场的

1-2. 详解Protocol

实际上这三个protocol干的事情是一样的只不过他们的应用场景不同罢了。我们下面以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?

1-3. UIViewControllerInteractiveTransitioning协议

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

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

//返回动画的执行时间
public func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval

//处理具体的动画  
public func animateTransition(using transitionContext: UIViewControllerContextTransitioning)

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

//转场动画发生在该View中    
public var containerView: UIView { get }

//上报动画执行完毕
public func completeTransition(_ didComplete: Bool)

//根据key返回一个ViewController。我们通过`FromViewControllerKey`找到将被替换掉的VC，通过`ToViewControllerKey`找到将要显示的VC
public 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

框架结构 图片浏览器.gif

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. 遵循协议

//MARK: UIViewControllerTransitioningDelegate
extension 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: JunBrowsePresentDelefate
extension 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. 在图片展示界面

//MARK: JunBrowserDismissDelegate
extension 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)
    }
}

GitHubDemo地址

上一篇下一篇

猜你喜欢

热点阅读