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

一. 内容说明

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

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

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

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

二.源码展示

0. 图片测试demo源码

[html] view plain copy

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

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

[html] view plain copy

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

2. LJPhotoInfo：图片信息的model

[html] view plain copy

1. import Foundation
2. import UIKit
3. class LJPhotoInfo: NSObject {
4. var currentSelectIndex : Int?
5. var largeImageURLStr : String?
6. var thumbImageview : UIImageView?
7. override init() {
8. super.init()
9. }
10. }

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

[html] view plain copy

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