swift3.0 图片放大缩小动画效果

一. 内容说明

      跟我之前这篇类似，只不过那篇是OC版本，这篇是Swift版本 OC版本链接地址

目的：通过kingfisher请求5张图片，展示出来。然后利用图片放大缩小管理类展示图片，多张图片可以滑动浏览

效果图如下，想看动态的效果图，请看上面链接中的OC版本效果图，跟这篇是一样的。

本demo，只加载本地图片的demo本demo下载链接，需要加载网络图片的，需要下载Kingfisher





二.源码展示

0. 图片测试demo源码

import Foundation
import UIKit

class LJPhotoGroupViewController : TFBaseViewController{

lazy var ljArray : [LJPhotoInfo] = [LJPhotoInfo]()
let ljUrlArray = ["http://pica.nipic.com/2007-12-12/20071212235955316_2.jpg",
"http://d.lanrentuku.com/down/png/1706/10avatars-material-pngs/avatars-material-man-4.png",
"http://image.nationalgeographic.com.cn/2017/0703/20170703042329843.jpg",
"http://image.nationalgeographic.com.cn/2015/0121/20150121033625957.jpg",
"http://image.nationalgeographic.com.cn/2017/0702/20170702124619643.jpg"]

override func viewDidLoad() {
super.viewDidLoad()

self.setTopNavBarTitle("图片浏览测试Demo")
self.setTopNavBackButton()
self.setUI()
}
}

extension LJPhotoGroupViewController{
func setUI(){

for index in 0...4{

//1.加载本地图片
//let image = UIImage.init(named: "\(index + 1).jpg")
let showImageView = UIImageView.init()
//showImageView.image = image
showImageView.tag = index
showImageView.frame = CGRect(x: Int((AppWidth - 200)/2.0), y: 80 + Int(90 * index), width: 200, height: 80)
showImageView.isUserInteractionEnabled = true
view.addSubview(showImageView)

//2.加载本地图片
let url = URL(string:ljUrlArray[index])
showImageView.kf.setImage(with: url)

let gestrue = UITapGestureRecognizer.init(target: self, action: #selector(LJPhotoGroupViewController.showClicked(_:)))
showImageView.addGestureRecognizer(gestrue)

//需要浏览的图片添加到数组
let info = LJPhotoInfo.init()
info.largeImageURLStr = ljUrlArray[index]
info.thumbImageview = showImageView
info.currentSelectIndex = index
self.ljArray.append(info)
}
}
}

extension LJPhotoGroupViewController{

func showClicked(_ sender : UITapGestureRecognizer){
if self.ljArray.count > 0 {
let index = sender.view?.tag
let photoGroupView = LJPhotoGroupView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))
photoGroupView.setData(self.ljArray, selectedIndex: index!)
photoGroupView.showPhotoView()

CHDebugLog("-------\(String(describing: index))")
}
}
}

1. LJPhotoGroupView：图片浏览管理类，用于展示图片

import Foundation
import UIKit

class LJPhotoGroupView: UIView {

let baseIndex = 1000

var originFrame : CGRect? // 图片的源尺寸
var currentIndex : NSInteger = 0 //当前选中的图片index
var ljPhotoArray : [Any] = [Any]()//存储多组需要加载的图片原始信息

lazy var ljScrollView : UIScrollView = {
let view  = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))
view.delegate = self
view.isPagingEnabled = true
view.backgroundColor = UIColor.yellow
return view
}()

override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(self.ljScrollView)
}

func setData(_ photoArray : Array<Any>, selectedIndex : NSInteger) {
self.ljScrollView.contentSize = CGSize(width: floor(AppWidth) * CGFloat(photoArray.count), height: AppHeight)
self.currentIndex = selectedIndex
self.ljPhotoArray = photoArray
}

required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

extension LJPhotoGroupView {

// MARK: -- 图片cell复用
func dequeueReusableCell() -> LJPhotoView {

var cell = self.viewWithTag(baseIndex + self.currentIndex) as? LJPhotoView

if ljPhotoArray.count > currentIndex {
let info = ljPhotoArray[currentIndex] as? LJPhotoInfo
let tempImageView = info?.thumbImageview

if cell != nil{
self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)
return cell!
}

cell = LJPhotoView.init(frame: CGRect(x: floor(AppWidth)*CGFloat(currentIndex), y: 0, width: AppWidth, height: AppHeight))
self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)
}
return cell!
}

// MARK: -- 展示图片
func showPhotoView(){

UIApplication.shared.keyWindow?.rootViewController?.view.addSubview(self)
self.backgroundColor = UIColor.black

let cell1 = self.dequeueReusableCell()
cell1.tag = self.baseIndex + self.currentIndex

var ljTempImage : UIImage?
if ljPhotoArray.count > currentIndex {
let info = ljPhotoArray[currentIndex] as? LJPhotoInfo
ljTempImage = info?.thumbImageview?.image
}

ljTempImage = (ljTempImage != nil) ? ljTempImage : UIImage.init(named: "pic_broadcast_gray_square")

let tfImageView  = UIImageView.init(image: ljTempImage)
tfImageView.frame = self.originFrame ?? CGRect.zero
tfImageView.clipsToBounds = true
tfImageView.backgroundColor = UIColor.red
tfImageView.contentMode = .scaleAspectFit
self.addSubview(tfImageView)

//添加页面消失的手势
let tap = UITapGestureRecognizer.init(target: self, action: #selector(hideImageView))
self.addGestureRecognizer(tap)

UIView.animate(withDuration: 0.25, animations: {
let y : CGFloat? = (AppHeight - (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!)/2.0
let height : CGFloat? = (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!
tfImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: height!)
}) { (finish) in
//根据选中第几张图片直接展示出来
let cell = self.dequeueReusableCell()
cell.tag = self.baseIndex + self.currentIndex
cell.backgroundColor = UIColor.gray

if self.ljPhotoArray.count > self.currentIndex{
cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)
}
let x : CGFloat = CGFloat(self.currentIndex) * floor(AppWidth);
self.ljScrollView.setContentOffset(CGPoint.init(x: x, y: 0), animated: false)
self.ljScrollView.addSubview(cell)

tfImageView.removeFromSuperview()
}
}

// MARK: -- 移除图片
func hideImageView(){
let cell = self.viewWithTag(baseIndex + currentIndex) as? LJPhotoView
UIView.animate(withDuration: 0.25, animations: {
cell?.ljImageView.frame = self.originFrame!
}) { (finish) in
self.backgroundColor = UIColor.white
self.removeFromSuperview()
}
}
}

extension LJPhotoGroupView : UIScrollViewDelegate{

func scrollViewDidScroll(_ scrollView: UIScrollView) {
//滑动时，会调用多次
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
//滑动完毕时，只会调用一次
let page = self.ljScrollView.contentOffset.x / self.frame.size.width;
self.currentIndex = NSInteger(page);
print("scrollViewDidEndDecelerating当前页数----\(page)")

let cell = self.dequeueReusableCell()
cell.tag = self.baseIndex + Int(page)
if self.ljPhotoArray.count > self.currentIndex{
cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)
}
self.ljScrollView.addSubview(cell)
}
}

2. LJPhotoInfo：图片信息的model

import Foundation
import UIKit

class LJPhotoInfo: NSObject {

var currentSelectIndex : Int?
var largeImageURLStr : String?
var thumbImageview : UIImageView?

override init() {
super.init()
}
}

3.LJPhotoView：图片浏览管理类用到的cell（图片显示）

import Foundation
import UIKit

class LJPhotoView: UIScrollView {

var ljInfo : LJPhotoInfo?

lazy var ljImageView : UIImageView = {
let view = UIImageView()
view.clipsToBounds = true
view.contentMode = .scaleAspectFit
return view
}()

override init(frame: CGRect) {
super.init(frame: frame)
self.zoomScale = 1.0
self.addSubview(self.ljImageView)
}

required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

extension LJPhotoView{
func setCurrentImageview(_ info : LJPhotoInfo){
self.ljInfo = info
if self.ljInfo?.thumbImageview?.image == nil{
self.ljInfo?.thumbImageview?.image = UIImage.init(named: "pic_broadcast_gray_square")
}

//无url，则通过thumbImageview获取Image展示
//self.ljImageview.image = info.thumbImageview.image;
let y : CGFloat? = (AppHeight - (info.thumbImageview?.image?.size.height)! * AppWidth / (info.thumbImageview?.image?.size.width)!) * 0.5;
self.ljImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: AppWidth*(info.thumbImageview?.image?.size.height)!/(info.thumbImageview?.image?.size.width)!)
self.ljImageView.image = self.ljInfo?.thumbImageview?.image

if info.largeImageURLStr != "" {
let url = URL(string:info.largeImageURLStr!)
self.ljImageView.kf.setImage(with: url)
}
}
}