首页 > 系统 > iOS > 正文

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

2020-07-26 02:41:11
字体:
来源:转载
供稿:网友

一. 内容说明

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

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

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

本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)     }   } } 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表