Анимированная коллекция Просмотр ячейки по клику в Swift

Question

Я пытаюсь анимировать ячейку коллекции при клике вот так,

Я попробовал некоторый код, но он не дает идеальной анимации, это мой код

 func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    UIView.animate(withDuration: 0.8) {
        if let cell = self.subCategoryCollectionView.cellForItem(at: indexPath) as? LawyerSubCategoryCVC {
            cell.transform = .init(scaleX: 1.5, y: 1.5)
        }
    }
}

Это дает мне этот результат,

Как я могу получить эту идеальную анимацию при клике в ячейке представления коллекции?

Answer 1

import UIKit
extension UIColor {
    static var random: UIColor {
        return UIColor(red: .random(in: 0...1),
                       green: .random(in: 0...1),
                       blue: .random(in: 0...1),
                       alpha: 1.0)
    }
}
class ViewController: UIViewController ,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{

@IBOutlet weak var collectionView: UICollectionView!
var selectedIndex = 2
override func viewDidLoad() {
    super.viewDidLoad()
 }


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath)
    cell.contentView.backgroundColor = UIColor.random
    return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    self.selectedIndex =  indexPath.row
    collectionView.reloadData()
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 4

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))
    if selectedIndex == indexPath.row {
        return CGSize(width: size, height: size + 40)
     }
    return CGSize(width: size, height: size)
}

}

Answer 2

Для поднятия ячейки вы должны изменить ячейку zPosition.Например:

class MyCell: UICollectionViewCell {
    override var isSelected: Bool {
        didSet {
            UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseOut, animations: {
                self.layer.zPosition = self.isSelected ? 1 : -1
                self.transform = self.isSelected ? CGAffineTransform(scaleX: 1.2, y: 1.2) : CGAffineTransform.identity
            }, completion: nil)
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        layer.borderWidth = 1
        layer.cornerRadius = 4
        layer.borderColor = UIColor.clear.cgColor

        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowRadius = 4
        layer.shadowColor = UIColor.black.cgColor
        layer.masksToBounds = false
    }
}

Пожалуйста, перейдите по ссылке, чтобы увидеть результат

Answer 3

Я думаю, что вы можете установить высоту ячейки для выбранного элемента, это поможет вам.