码迷，mamicode.com
首页 > 编程语言 > 详细

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

时间：2017-09-16 20:44:32      阅读：264      评论：0      收藏：0      [点我收藏+]

标签：als   pop   remove   cli   font   技术分享   print   链接   ini   

一. 内容说明

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

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

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

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

技术分享

技术分享

二.源码展示

0. 图片测试demo源码

 

[html] view plain copy
 
  1. import Foundation  
  2. import UIKit  
  3.   
  4. class LJPhotoGroupViewController : TFBaseViewController{  
  5.   
  6.     lazy var ljArray : [LJPhotoInfo] = [LJPhotoInfo]()  
  7.     let ljUrlArray = ["http://pica.nipic.com/2007-12-12/20071212235955316_2.jpg",  
  8.                       "http://d.lanrentuku.com/down/png/1706/10avatars-material-pngs/avatars-material-man-4.png",  
  9.                       "http://image.nationalgeographic.com.cn/2017/0703/20170703042329843.jpg",  
  10.                       "http://image.nationalgeographic.com.cn/2015/0121/20150121033625957.jpg",  
  11.                       "http://image.nationalgeographic.com.cn/2017/0702/20170702124619643.jpg"]  
  12.       
  13.     override func viewDidLoad() {  
  14.         super.viewDidLoad()  
  15.           
  16.         self.setTopNavBarTitle("图片浏览测试Demo")  
  17.         self.setTopNavBackButton()  
  18.         self.setUI()  
  19.     }  
  20. }  
  21.   
  22. extension LJPhotoGroupViewController{  
  23.     func setUI(){  
  24.          
  25.         for index in 0...4{  
  26.               
  27.             //1.加载本地图片  
  28.             //let image = UIImage.init(named: "\(index + 1).jpg")  
  29.             let showImageView = UIImageView.init()  
  30.             //showImageView.image = image  
  31.             showImageView.tag = index  
  32.             showImageView.frame = CGRect(x: Int((AppWidth - 200)/2.0), y: 80 + Int(90 * index), width: 200, height: 80)  
  33.             showImageView.isUserInteractionEnabled = true  
  34.             view.addSubview(showImageView)  
  35.               
  36.             //2.加载本地图片  
  37.             let url = URL(string:ljUrlArray[index])  
  38.             showImageView.kf.setImage(with: url)  
  39.               
  40.             let gestrue = UITapGestureRecognizer.init(target: self, action: #selector(LJPhotoGroupViewController.showClicked(_:)))  
  41.             showImageView.addGestureRecognizer(gestrue)  
  42.               
  43.             //需要浏览的图片添加到数组  
  44.             let info = LJPhotoInfo.init()  
  45.             info.largeImageURLStr = ljUrlArray[index]  
  46.             info.thumbImageview = showImageView  
  47.             info.currentSelectIndex = index  
  48.             self.ljArray.append(info)  
  49.         }  
  50.     }  
  51. }  
  52.   
  53. extension LJPhotoGroupViewController{  
  54.       
  55.     func showClicked(_ sender : UITapGestureRecognizer){  
  56.         if self.ljArray.count > 0 {  
  57.             let index = sender.view?.tag  
  58.             let photoGroupView = LJPhotoGroupView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))  
  59.             photoGroupView.setData(self.ljArray, selectedIndex: index!)  
  60.             photoGroupView.showPhotoView()  
  61.               
  62.             CHDebugLog("-------\(String(describing: index))")  
  63.         }  
  64.     }  
  65. }  



 

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

 

[html] view plain copy
 
  1. import Foundation  
  2. import UIKit  
  3.   
  4. class LJPhotoGroupView: UIView {  
  5.       
  6.     let baseIndex = 1000  
  7.       
  8.     var originFrame : CGRect? // 图片的源尺寸  
  9.     var currentIndex : NSInteger = 0 //当前选中的图片index  
  10.     var ljPhotoArray : [Any] = [Any]()//存储多组需要加载的图片原始信息  
  11.       
  12.     lazy var ljScrollView : UIScrollView = {  
  13.         let view  = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: AppWidth, height: AppHeight))  
  14.         view.delegate = self  
  15.         view.isPagingEnabled = true  
  16.         view.backgroundColor = UIColor.yellow  
  17.         return view  
  18.     }()  
  19.       
  20.     override init(frame: CGRect) {  
  21.         super.init(frame: frame)  
  22.         self.addSubview(self.ljScrollView)  
  23.     }  
  24.   
  25.     func setData(_ photoArray : Array<Any>, selectedIndex : NSInteger) {  
  26.         self.ljScrollView.contentSize = CGSize(width: floor(AppWidth) * CGFloat(photoArray.count), height: AppHeight)  
  27.         self.currentIndex = selectedIndex  
  28.         self.ljPhotoArray = photoArray  
  29.     }  
  30.       
  31.     required init?(coder aDecoder: NSCoder) {  
  32.         fatalError("init(coder:) has not been implemented")  
  33.     }  
  34. }  
  35.   
  36. extension LJPhotoGroupView {  
  37.   
  38. // MARK: -- 图片cell复用  
  39.     func dequeueReusableCell() -> LJPhotoView {  
  40.           
  41.         var cell = self.viewWithTag(baseIndex + self.currentIndex) as? LJPhotoView  
  42.           
  43.         if ljPhotoArray.count > currentIndex {  
  44.             let info = ljPhotoArray[currentIndex] as? LJPhotoInfo  
  45.             let tempImageView = info?.thumbImageview  
  46.   
  47.             if cell != nil{  
  48.                 self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)  
  49.                 return cell!  
  50.             }  
  51.               
  52.             cell = LJPhotoView.init(frame: CGRect(x: floor(AppWidth)*CGFloat(currentIndex), y: 0, width: AppWidth, height: AppHeight))  
  53.             self.originFrame = tempImageView?.convert((tempImageView?.bounds)!, to: self)  
  54.         }  
  55.         return cell!  
  56.     }  
  57.     
  58. // MARK: -- 展示图片  
  59.     func showPhotoView(){  
  60.           
  61.         UIApplication.shared.keyWindow?.rootViewController?.view.addSubview(self)  
  62.         self.backgroundColor = UIColor.black  
  63.       
  64.         let cell1 = self.dequeueReusableCell()  
  65.         cell1.tag = self.baseIndex + self.currentIndex  
  66.           
  67.         var ljTempImage : UIImage?  
  68.         if ljPhotoArray.count > currentIndex {  
  69.             let info = ljPhotoArray[currentIndex] as? LJPhotoInfo  
  70.             ljTempImage = info?.thumbImageview?.image  
  71.         }  
  72.           
  73.         ljTempImage = (ljTempImage != nil) ? ljTempImage : UIImage.init(named: "pic_broadcast_gray_square")  
  74.           
  75.         let tfImageView  = UIImageView.init(image: ljTempImage)  
  76.         tfImageView.frame = self.originFrame ?? CGRect.zero  
  77.         tfImageView.clipsToBounds = true  
  78.         tfImageView.backgroundColor = UIColor.red  
  79.         tfImageView.contentMode = .scaleAspectFit  
  80.         self.addSubview(tfImageView)  
  81.           
  82.         //添加页面消失的手势  
  83.         let tap = UITapGestureRecognizer.init(target: self, action: #selector(hideImageView))  
  84.         self.addGestureRecognizer(tap)  
  85.           
  86.         UIView.animate(withDuration: 0.25, animations: {  
  87.             let y : CGFloat? = (AppHeight - (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!)/2.0  
  88.             let height : CGFloat? = (ljTempImage?.size.height)! * AppWidth / (ljTempImage?.size.width)!  
  89.             tfImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: height!)  
  90.         }) { (finish) in  
  91.             //根据选中第几张图片直接展示出来  
  92.             let cell = self.dequeueReusableCell()  
  93.             cell.tag = self.baseIndex + self.currentIndex  
  94.             cell.backgroundColor = UIColor.gray  
  95.               
  96.             if self.ljPhotoArray.count > self.currentIndex{  
  97.                 cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)  
  98.             }  
  99.             let x : CGFloat = CGFloat(self.currentIndex) * floor(AppWidth);  
  100.             self.ljScrollView.setContentOffset(CGPoint.init(x: x, y: 0), animated: false)  
  101.             self.ljScrollView.addSubview(cell)  
  102.               
  103.               
  104.             tfImageView.removeFromSuperview()  
  105.         }  
  106.     }  
  107.       
  108. // MARK: -- 移除图片  
  109.     func hideImageView(){  
  110.         let cell = self.viewWithTag(baseIndex + currentIndex) as? LJPhotoView  
  111.         UIView.animate(withDuration: 0.25, animations: {  
  112.             cell?.ljImageView.frame = self.originFrame!  
  113.         }) { (finish) in  
  114.             self.backgroundColor = UIColor.white  
  115.             self.removeFromSuperview()  
  116.         }  
  117.     }  
  118. }  
  119.   
  120. extension LJPhotoGroupView : UIScrollViewDelegate{  
  121.      
  122.     func scrollViewDidScroll(_ scrollView: UIScrollView) {  
  123.         //滑动时，会调用多次  
  124.     }  
  125.       
  126.     func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {  
  127.      //滑动完毕时，只会调用一次  
  128.         let page = self.ljScrollView.contentOffset.x / self.frame.size.width;  
  129.         self.currentIndex = NSInteger(page);  
  130.         print("scrollViewDidEndDecelerating当前页数----\(page)")  
  131.           
  132.         let cell = self.dequeueReusableCell()  
  133.         cell.tag = self.baseIndex + Int(page)  
  134.         if self.ljPhotoArray.count > self.currentIndex{  
  135.             cell.setCurrentImageview(self.ljPhotoArray[self.currentIndex] as! LJPhotoInfo)  
  136.         }  
  137.         self.ljScrollView.addSubview(cell)  
  138.     }  
  139. }  



2. LJPhotoInfo：图片信息的model

 

[html] view plain copy
 
  1. import Foundation  
  2. import UIKit  
  3.   
  4. class LJPhotoInfo: NSObject {  
  5.       
  6.     var currentSelectIndex : Int?  
  7.     var largeImageURLStr : String?  
  8.     var thumbImageview : UIImageView?  
  9.       
  10.     override init() {  
  11.         super.init()  
  12.     }  
  13. }  



 

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

 

[html] view plain copy
 
  1. import Foundation  
  2. import UIKit  
  3.   
  4. class LJPhotoView: UIScrollView {  
  5.       
  6.     var ljInfo : LJPhotoInfo?  
  7.       
  8.     lazy var ljImageView : UIImageView = {  
  9.             let view = UIImageView()  
  10.             view.clipsToBounds = true  
  11.             view.contentMode = .scaleAspectFit  
  12.             return view  
  13.         }()  
  14.       
  15.     override init(frame: CGRect) {  
  16.         super.init(frame: frame)  
  17.         self.zoomScale = 1.0  
  18.         self.addSubview(self.ljImageView)  
  19.     }  
  20.       
  21.     required init?(coder aDecoder: NSCoder) {  
  22.         fatalError("init(coder:) has not been implemented")  
  23.     }  
  24. }  
  25.   
  26. extension LJPhotoView{  
  27.     func setCurrentImageview(_ info : LJPhotoInfo){  
  28.         self.ljInfo = info  
  29.         if self.ljInfo?.thumbImageview?.image == nil{  
  30.            self.ljInfo?.thumbImageview?.image = UIImage.init(named: "pic_broadcast_gray_square")  
  31.         }  
  32.           
  33.         //无url，则通过thumbImageview获取Image展示  
  34.         //self.ljImageview.image = info.thumbImageview.image;  
  35.         let y : CGFloat? = (AppHeight - (info.thumbImageview?.image?.size.height)! * AppWidth / (info.thumbImageview?.image?.size.width)!) * 0.5;  
  36.         self.ljImageView.frame = CGRect(x: 0, y: y!, width: AppWidth, height: AppWidth*(info.thumbImageview?.image?.size.height)!/(info.thumbImageview?.image?.size.width)!)  
  37.         self.ljImageView.image = self.ljInfo?.thumbImageview?.image  
  38.           
  39.         if info.largeImageURLStr != "" {  
  40.             let url = URL(string:info.largeImageURLStr!)  
  41.             self.ljImageView.kf.setImage(with: url)  
  42.         }  
  43.     }  
  44. }  

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

标签：als   pop   remove   cli   font   技术分享   print   链接   ini   

原文地址：http://www.cnblogs.com/gongxiaojiu/p/7532129.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！