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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swift3.0 图片放大缩小动画效果相关的知识，希望对你有一定的参考价值。

一. 内容说明

      跟我之前这篇类似，只不过那篇是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 图片放大缩小动画效果的主要内容，如果未能解决你的问题，请参考以下文章

添加地图滚轮放大缩小的动画效果

Android 实现布局的缩小和再放大动画(使用scale动画效果进行实现)

Android 实现布局的缩小和再放大动画(使用scale动画效果进行实现)

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例