ios - 如何使 UICollectionView 在 App Store 等集合视图单元格内设置动画？

我确实创建了带有欲望动画的简单项目，我没有实现与 AppStore 中完全相同的元素位置，但我只是向您展示了基本动画以及如何实现它。我也没有检查何时collectionView到达终点，我只是用 100 个元素填充它。

我确实补充GIF说它的帧速率很低，在模拟器上看起来很好，没有滞后。

AnimatedCollectionViewController.swift班级

class AnimatedCollectionViewController: UIViewController {

    @IBOutlet private weak var collectionView: UICollectionView!

    private let identifier = String(describing: AnimatedCollectionViewCell.self)
    private var timer: Timer?

    override func viewDidLoad() {
        super.viewDidLoad()

        /// Loading custom `nib`
        let nib = UINib(nibName: identifier, bundle: Bundle.main)
        collectionView.register(nib, forCellWithReuseIdentifier: identifier)
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        /// Starting animation
        startAutoScrollCardsCollectionView()
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        /// Remove timer from `RunLoop` object
        timer?.invalidate()
        timer = nil // just in case
    }

    private func startAutoScrollCardsCollectionView() {

        /// This method start timer and fire it immediately
        timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { [unowned self] _ in
            let currentOffset = self.collectionView.contentOffset
            self.collectionView.setContentOffset(CGPoint(x: currentOffset.x + 5, y: currentOffset.y), animated: true)
        }
    }
}

// MARK: - UICollectionViewDataSource extension

extension AnimatedCollectionViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 100
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath)
        return cell
    }
}

// MARK: - UICollectionViewDelegateFlowLayout extension

extension AnimatedCollectionViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 20, left: 0, bottom: 20, right: 0)
    }
}

虚拟AnimatedCollectionViewCell.swift类

class AnimatedCollectionViewCell: UICollectionViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()

        contentView.backgroundColor = UIColor.random
        contentView.layer.cornerRadius = 20
    }
}

extension CGFloat {
    static func random() -> CGFloat {
        return CGFloat(arc4random()) / CGFloat(UInt32.max)
    }
}

extension UIColor {
    static var random: UIColor {
        return UIColor(red:   .random(),
                       green: .random(),
                       blue:  .random(),
                       alpha: 1.0)
    }
}

所以基本上正在发生的事情是，我启动Timer并立即启动它。这个计时器调用completion0.1 秒，在这个完成内我改变setContentOffset.x了collectionView.

您可以从这里开始并将自定义布局添加到单元格的位置，并检查何时collectionView到达终点。

ios - 如何使 UICollectionView 在 App Store 等集合视图单元格内设置动画？

问题描述

解决方案

推荐阅读