本文主要給大家介紹了關(guān)于利用swift/205134.html">swift實(shí)現(xiàn)卡片橫向滑動(dòng)動(dòng)畫效果的相關(guān)資料，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹吧。
根據(jù)慣例，首先上效果圖：
那天去面試，面試官突然拿出手機(jī)點(diǎn)開了一個(gè)app,自個(gè)在那點(diǎn)了一會(huì)，然后問我 這個(gè)效果怎么實(shí)現(xiàn)，當(dāng)時(shí)一看可以滑動(dòng)，肯定用scrollView 或者 collectionView實(shí)現(xiàn)，就大概的說了下。今天剛好閑下來，就敲一敲這個(gè)效果。
先來分析下這個(gè)效果：
卡片是橫向滾動(dòng)，并且每個(gè)卡片的位置都是保持在屏幕中間的，而且 左右相鄰的卡片都露出來一點(diǎn)邊
collectionView 和scrollView都可以實(shí)現(xiàn)，在這里，我們用collectionView實(shí)現(xiàn)，但是我們平常普通用的collectionView都是正屏滑動(dòng)的！！而且是平滑，所有我們只能自定義UICollectionViewFlowLayout 流式布局，才可以達(dá)到上圖效果.
廢話不多說，直接上代碼：
創(chuàng)建collectionView布局
//創(chuàng)建collectionView布局func setepUI() {//CustomLayout是自定義的UICollectionViewFlowLayout layout = CustomLayout() layout?.itemSize = CGSize(width: SCREEN_WIDTH-80, height: SCREEN_HEIGHT-64-120) let rect = CGRect(x: 0, y: 64, width:SCREEN_WIDTH , height: SCREEN_HEIGHT-64) collectionView = UICollectionView(frame: rect, collectionViewLayout: layout!) collectionView?.delegate = self collectionView?.dataSource = self view.addSubview(collectionView!) collectionView?.register(CustomViewCell.self, forCellWithReuseIdentifier: "identifier") collectionView?.backgroundColor = UIColor.red }實(shí)現(xiàn)代理方法：
我們在extension中實(shí)現(xiàn)：
// MARK: -- delegate and datasourceextension ViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{ func numberOfSections(in collectionView: UICollectionView) -> Int { return 1 } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 10 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {//CustomViewCell是自定義的cell let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifier", for: indexPath) as! CustomViewCell cell.backgroundColor = UIColor.orange cell.lable?.text = "/(indexPath.row)//(10)" return cell }}至此，我們可以得到普通的效果，左右滑動(dòng)，但中間cell不會(huì)居中，兩側(cè)cell也不會(huì)縮放，如下圖：
這個(gè)時(shí)候就需要在自定義的流式布局 CustomLayout里做點(diǎn)什么了：
初始化方法 prepare , 初始化一些內(nèi)容：
//重寫prepare方法 //布局之前的準(zhǔn)備工作 初始化 這個(gè)方法每次layout發(fā)生改變就調(diào)用一次override func prepare() { scrollDirection = UICollectionViewScrollDirection.horizontal minimumLineSpacing = 20.0 sectionInset = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40) super.prepare() }（該方法默認(rèn)返回false） 返回true frame發(fā)生改變就允許重新布局 內(nèi)部會(huì)重新調(diào)用prepare 和
layoutAttributesForElementsInRect override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { return true }MARK:---用來計(jì)算出rect這個(gè)范圍內(nèi)所有cell的UICollectionViewLayoutAttributes 對象，循環(huán)遍歷每個(gè)attribute對象，修改frame,再將這數(shù)組返回給系統(tǒng)
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { //根據(jù)當(dāng)前滾動(dòng)進(jìn)行對每個(gè)cell進(jìn)行縮放 //首先獲取 當(dāng)前rect范圍內(nèi)的 attributes對象 let array = super.layoutAttributesForElements(in: rect) private let ScaleFactor:CGFloat = 0.001//縮放因子 //計(jì)算縮放比 首先計(jì)算出整體中心點(diǎn)的X值 和每個(gè)cell的中心點(diǎn)X的值 //用著兩個(gè)x值的差值 ，計(jì)算出絕對值 //colleciotnView中心點(diǎn)的值 let centerX = (collectionView?.contentOffset.x)! + (collectionView?.bounds.size.width)!/2 //循環(huán)遍歷每個(gè)attributes對象 對每個(gè)對象進(jìn)行縮放 for attr in array! { //計(jì)算每個(gè)對象cell中心點(diǎn)的X值 let cell_centerX = attr.center.x //計(jì)算兩個(gè)中心點(diǎn)的便宜（距離） //距離越大縮放比越小，距離小 縮放比越大，縮放比最大為1，即重合 let distance = abs(cell_centerX-centerX) let scale:CGFloat = 1/(1+distance*ScaleFactor) attr.transform3D = CATransform3DMakeScale(1.0, scale, 1.0) } return array }到目前為止，我們可以得到一個(gè)縮放的效果，但是仍然沒有達(dá)到我們要的效果，可視區(qū)域的cell并沒有居中顯示，而是滑到哪里就到哪里：
如下圖：
所以我們還得重寫一個(gè)方法：
func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint
需要注意的兩個(gè)參數(shù)：
實(shí)現(xiàn)該方法：
/// <#Description#> /// /// - Parameter proposedContentOffset: 當(dāng)手指滑動(dòng)的時(shí)候 最終的停止的偏移量 /// - Returns: 返回最后停止后的點(diǎn) override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { let visibleX = proposedContentOffset.x let visibleY = proposedContentOffset.y let visibleW = collectionView?.bounds.size.width let visibleH = collectionView?.bounds.size.height //獲取可視區(qū)域 let targetRect = CGRect(x: visibleX, y: visibleY, width: visibleW!, height: visibleH!) //中心點(diǎn)的值 let centerX = proposedContentOffset.x + (collectionView?.bounds.size.width)!/2 //獲取可視區(qū)域內(nèi)的attributes對象 let attrArr = super.layoutAttributesForElements(in: targetRect)! //如果第0個(gè)屬性距離最小 var min_attr = attrArr[0] for attributes in attrArr { if (abs(attributes.center.x-centerX) < abs(min_attr.center.x-centerX)) { min_attr = attributes } } //計(jì)算出距離中心點(diǎn) 最小的那個(gè)cell 和整體中心點(diǎn)的偏移 let ofsetX = min_attr.center.x - centerX return CGPoint(x: proposedContentOffset.x+ofsetX, y: proposedContentOffset.y) }至此，整個(gè)過程結(jié)束，其實(shí)很簡單，主要是對這幾個(gè)方法理解！
最后代碼下載：
github下載地址：點(diǎn)這里
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
