本文實例為大家分享了Swift實現(xiàn)3D輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
整天逛淘寶，偶爾有一天看到其中的展示頁有個看起來很炫的效果，閑來無事就試著寫一個出來，先來看效果：
簡單記一下思路，這里我選擇使用UICollectionView控件，先根據(jù)其復(fù)用和滾動的特性做出無限輪播的效果，關(guān)鍵代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//數(shù)據(jù)源數(shù)組 let totalCount = 100 var models: [String] = [String]() { didSet { //判斷元素個數(shù) if models.count < 2 { collectionView.isScrollEnabled = false } //網(wǎng)上的找來的一個辦法添加100組數(shù)據(jù)源對應(yīng)的索引數(shù)組indexArr for _ in 0..<totalCount { for j in 0..<models.count { indexArr.append(j) } } //開始就滾動到第50組數(shù)據(jù)源 collectionView.scrollToItem(at: IndexPath(item: totalCount/2 * models.count, section: 0), at: .centeredHorizontally, animated: false) } } |
滾動停止時走的方法里做處理：
|
1
2
3
4
5
6
7
8
|
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { //找到滾動停止的點對應(yīng)的collectionView的indexPath let point = self.convert(collectionView.center, to: collectionView) let index = collectionView.indexPathForItem(at: point) let indexpath = (index?.row ?? 0) % models.count collectionView.scrollToItem(at: IndexPath(item: totalCount/2 * models.count + indexpath, section: 0), at: .centeredHorizontally, animated: false) } |
以上是滾動的處理，接下來就是item的漸變效果處理，看到這種情況就想到要寫一個UICollectionViewFlowLayout
類供collectionView使用，UICollectionViewFlowLayout是管理item怎么展示用的，首先重寫展示視圖內(nèi)的layoutAttributes方法，在此方法中找到attribute對應(yīng)的item及其屬性，和collectionView的偏移量和中心點，進行一系列的計算：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { //集合視圖的寬高（這里默認寬高相等） let itemHeight = self.collectionView?.frame.height ?? 0 //可是視圖內(nèi)的attributes數(shù)組 let array = super.layoutAttributesForElements(in: rect) //item透明度開始變化時的item的中心點x let centerX = self.collectionView!.contentOffset.x + itemHeight/2 print(self.collectionView?.contentOffset.x ?? 0) for attributes in array! { //開始變化時的item的中心點x 與 實際中心點相比較 let value = attributes.center.x - centerX let delta = abs(value) //設(shè)置縮放比例，此處4*itemHeight可根據(jù)縮放效果進行修改 let scale = 1 - delta/(4*itemHeight) //設(shè)置縮放比例 attributes.transform = CGAffineTransform.init(scaleX: scale, y: scale) //層次關(guān)系，設(shè)置此屬性使item依次上下排列 attributes.zIndex = Int(1 - abs(delta)) //value<=0表示向左移動，最前面的item停止一段距離 if value <= 0{ //實際中心點與開始變化時的item的中心點小于等于設(shè)定的邊界值 if delta >= 0 && delta <= itemHeight { //item的中心點固定不變 attributes.center.x = centerX //根據(jù)推進值，改變item的透明度，此處的delta>10是想讓item有一個達到目標區(qū)域時有一個停頓效果而不是直接進入改變透明度的階段 attributes.alpha = (delta > 10) ? (1 - delta/(itemHeight/4)) : 1 //設(shè)置縮放比例，停頓階段不進行縮放 attributes.transform = CGAffineTransform.init(scaleX: 1, y: 1) } else { //移動大于邊界值，就是從停頓階段到透明度改變，此處是下一個item上來,當(dāng)前item透明度變?yōu)? attributes.alpha = 0 } } } return array } |
解決最后一個小問題，拖動iitem開始滾動，滾動結(jié)束時讓它自動滾動到網(wǎng)格區(qū)域，而不是停在當(dāng)前或許不適當(dāng)?shù)牡胤剑貙慤ICollectionViewFlowLayout另一個方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { let targetRect = CGRect(x: proposedContentOffset.x, y: 0.0, width: self.collectionView!.bounds.size.width, height: self.collectionView!.bounds.size.height) //目標區(qū)域中包含的cell let attrArray = super.layoutAttributesForElements(in: targetRect) as! [UICollectionViewLayoutAttributes] //collectionView落在屏幕重點的x坐標 let horizontalCenterX = proposedContentOffset.x + (self.collectionView?.frame.height ?? 0)/2 var offsetAdjustment = CGFloat(MAXFLOAT) for layoutAttributes in attrArray { let itemHorizontalCenterX = layoutAttributes.center.x //找出離中心店最近的 if (abs(itemHorizontalCenterX-horizontalCenterX) < abs(offsetAdjustment)) { offsetAdjustment = itemHorizontalCenterX - horizontalCenterX } } //返回collectionView最終停留的位置 return CGPoint(x: proposedContentOffset.x + offsetAdjustment, y: proposedContentOffset.y) }//當(dāng)collectionView的顯示范圍發(fā)生改變的時候，是否重新布局 override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { return true } |
最后一個方法不寫看不到漸變的效果。
源碼地址：點擊打開鏈接
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_30932479/article/details/80064713
