swift3.0實(shí)現(xiàn)圖片放大縮小動(dòng)畫效果
一. 內(nèi)容說明
跟我之前這篇類似,只不過那篇是OC版本,這篇是Swift版本 OC版本鏈接地址
目的:通過kingfisher請(qǐng)求5張圖片,展示出來。然后利用圖片放大縮小管理類展示圖片,多張圖片可以滑動(dòng)瀏覽
效果圖如下,想看動(dòng)態(tài)的效果圖,請(qǐng)看上面鏈接中的OC版本效果圖,跟這篇是一樣的。
本demo,只加載本地圖片的demo下載鏈接 ,需要加載網(wǎng)絡(luò)圖片的,需要下載Kingfisher
二.源碼展示
0. 圖片測(cè)試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("圖片瀏覽測(cè)試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) //需要瀏覽的圖片添加到數(shù)組 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 //當(dāng)前選中的圖片index var ljPhotoArray : [Any] = [Any]()//存儲(chǔ)多組需要加載的圖片原始信息 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復(fù)用 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) //添加頁面消失的手勢(shì) 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 //根據(jù)選中第幾張圖片直接展示出來 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) { //滑動(dòng)時(shí),會(huì)調(diào)用多次 } func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { //滑動(dòng)完畢時(shí),只會(huì)調(diào)用一次 let page = self.ljScrollView.contentOffset.x / self.frame.size.width; self.currentIndex = NSInteger(page); print("scrollViewDidEndDecelerating當(dāng)前頁數(shù)----\(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) } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS10最新實(shí)現(xiàn)遠(yuǎn)程通知的開發(fā)教程詳解
這篇文章主要介紹了iOS10最新遠(yuǎn)程通知開發(fā)的實(shí)現(xiàn)過程,文章先對(duì)推送通知以及遠(yuǎn)程推送通知等進(jìn)行了基本介紹,然后通過示例代碼詳細(xì)介紹了iOS10 全新遠(yuǎn)程通知的教程,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-09-09NSURLSession跨域重定向透?jìng)鱄TTP Header問題解決
這篇文章主要為大家介紹了NSURLSession跨域重定向透?jìng)鱄TTP Header問題解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11iOS DispatchSourceTimer 定時(shí)器的具體使用
定時(shí)器在很多地方都可以用到,本文主要介紹了iOS DispatchSourceTimer 定時(shí)器的具體使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05IOS中UIImageView方法實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫
這篇文章主要介紹了IOS中UIImageView方法實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2017-05-05IOS百度地圖導(dǎo)航開發(fā)功能實(shí)現(xiàn)簡(jiǎn)述
百度地圖導(dǎo)航非常實(shí)用,那么基于代碼是如何實(shí)現(xiàn)的呢,下面通過本文給大家介紹IOS百度地圖導(dǎo)航開發(fā)功能實(shí)現(xiàn)簡(jiǎn)述,需要的朋友可以參考下本文2016-03-03iOS swift 總結(jié)NavigationController出現(xiàn)問題及解決方法
這篇文章主要介紹了iOS swift 總結(jié)NavigationController出現(xiàn)問題及解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12