仿微信朋友圈小图转大图

概述

微信朋友圈发布一条有9张图片的朋友圈，点击图片，小图 转换为大图有个动画，本文主要讲解此需求

一、效果一

1、实现效果描述

小图展示的是大图的中间部分，随着小图向大图动画的展开，被隐藏的两头的部分逐渐展示，可借助视频录制，拖动查看慢动作

2、实现代码

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let imageView = UIImageView()
        imageView.frame = CGRect(x: 100, y: 100, width: 100, height: 100);
        self.view.addSubview(imageView)
        
        imageView.image = UIImage(named: "IMG_0461.jpg")
        imageView.clipsToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.backgroundColor = UIColor.red
        imgView = imageView
        
        let btn = UIButton(type:.custom)
        btn.frame = CGRect(x: 20, y: 20, width: 44, height: 44)
        self.view.addSubview(btn)
        btn.backgroundColor = UIColor.red
        btn.addTarget(self, action:  #selector(btnAction), for: UIControlEvents.touchUpInside)
    }
    
    @objc func btnAction() {
        print("btnAction")
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut, animations: { 
            self.imgView?.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
        }) { (finish:Bool) in
            
        }
    }

原理解析：

public enum UIViewContentMode : Int {

    
    case scaleToFill  // 拉伸 到填充满imageView.Frame

    case scaleAspectFit // contents scaled to fit with fixed aspect. remainder is transparent   宽高 中较大的部分全部显示，imageView 可能留白

    case scaleAspectFill // contents scaled to fill with fixed aspect. some portion of content may be clipped.   宽高 中较小的部分顶住imageView两边，较大的部分被裁掉

    case redraw // redraw on bounds change (calls -setNeedsDisplay)

    case center // contents remain same size. positioned adjusted.

    case top

    case bottom

    case left

    case right

    case topLeft

    case topRight

    case bottomLeft

    case bottomRight
}

借助UIView.contentMode属性 scaleAspectFill，在imageViewFrame变大的过程中,imageViewFrame的宽高比逐渐 与图片本身的宽高比相等，图片比例较高的部分，逐渐显示全面

3、demo https://github.com/denghuihua/smallPicToBigTransition

二、效果二

1、实现效果描述

长图 显示图片的上半部分，逐渐显示整张图片

2、实现方案

contentsRect
值为 CGRectMake(0, 0, 1, 0.5) : 表示显示图片上半部分
值为 CGRectMake(0, 0.5, 1, 0.5) : 表示显示图片下半部分
默认值为 CGRectMake(0, 0, 1, 1)： 显示图片全部

image.png

三、效果三

1、实现效果描述

微信朋友圈 大图转小图有个 平移手势，随着手指移动，图片逐渐变小，背景逐渐变淡， 平移变小

2、实现方案

a、添加移动手势实现图片逐渐变小的过程
b、背景变淡通过继承 UIPercentDrivenInteractiveTransition 实现
c、小图转大图、大图转小图动画通过实现UIViewControllerTransitioningDelegate协议实现
参考链接：https://www.jianshu.com/p/ec08f43808aa