概述
微信朋友圈发布一条有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
