概述

微信朋友圈發(fā)布一條有9張圖片的朋友圈癞揉，點(diǎn)擊圖片，小圖 轉(zhuǎn)換為大圖有個(gè)動(dòng)畫喊熟，本文主要講解此需求

一柏肪、效果一

1逊移、實(shí)現(xiàn)效果描述

小圖展示的是大圖的中間部分，隨著小圖向大圖動(dòng)畫的展開胳泉，被隱藏的兩頭的部分逐漸展示，可借助視頻錄制扇商，拖動(dòng)查看慢動(dòng)作

2、實(shí)現(xiàn)代碼

    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、實(shí)現(xiàn)效果描述

長(zhǎng)圖 顯示圖片的上半部分榨婆，逐漸顯示整張圖片

2、實(shí)現(xiàn)方案

contentsRect
值為 CGRectMake(0, 0, 1, 0.5) : 表示顯示圖片上半部分
值為 CGRectMake(0, 0.5, 1, 0.5) : 表示顯示圖片下半部分
默認(rèn)值為 CGRectMake(0, 0, 1, 1)： 顯示圖片全部

image.png

三良风、效果三

1、實(shí)現(xiàn)效果描述

微信朋友圈 大圖轉(zhuǎn)小圖有個(gè) 平移手勢(shì)璃搜，隨著手指移動(dòng)，圖片逐漸變小这吻，背景逐漸變淡， 平移變小

2唾糯、實(shí)現(xiàn)方案

a、添加移動(dòng)手勢(shì)實(shí)現(xiàn)圖片逐漸變小的過程
b移怯、背景變淡通過繼承 UIPercentDrivenInteractiveTransition 實(shí)現(xiàn)
c、小圖轉(zhuǎn)大圖舟误、大圖轉(zhuǎn)小圖動(dòng)畫通過實(shí)現(xiàn)UIViewControllerTransitioningDelegate協(xié)議實(shí)現(xiàn)
參考鏈接：http://www.reibang.com/p/ec08f43808aa