如何在诸如App Store之类的集合视图单元中使UICollectionView动画化？

Question

如何实现以下目标：

即使在我滚动浏览时，收藏夹视图也会在收藏夹视图单元格内轻轻移动。

Answer 1

您可以使用CollectionKit框架来完成https://github.com/SoySauceLab/CollectionKit

// apply to the entire CollectionView
collectionView.animator = ScaleAnimator()

// apply to a single section, will override CollectionView's animator
provider.animator = FadeAnimator()

// apply to a single view, will take priority over all other animators
view.collectionAnimator = WobbleAnimator()

您还可以在收藏夹视图中应用其他一些最佳动画https://github.com/onmyway133/fantastic-ios-animation/blob/master/Animation/layout.md

Answer 2

这属于CollectionView中的单元格。您可以通过调用

在单元格中手动设置UIImageView的动画

class func animate(withDuration duration: TimeInterval, 
    animations: @escaping () -> Void)

您可以找到有关Apple文档或stackoverflow的更多信息。

Answer 3

我确实用欲望动画创建了一个简单的项目，我没有实现与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并立即启动它。此计时器调用completion 0.1秒，在此完成内，我更改了setContentOffset.x的collectionView位置。

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