如何在UIView中动画化UICollectionViewCell？

Question

我已经创建了一个自定义UICollectionViewCell，它包含一个名为animView的subView，我打算将其动画化。animView的形状是一个规则的垂直矩形。

在configureCell()方法中，我使用下面的代码配置单元格并创建动画，但我没有看到动画。

animView.transform = CGAffineTransform(scaleX: 1.0, y: 0.5)
self.layoutIfNeeded()

UIView.animate(withDuration: 0.7, delay: 0, options: [.curveEaseOut], animations: {
    self.animView.transform = CGAffineTransform.identity
    self.layoutIfNeeded()
}, completion: nil)

然而，当我试图动画整个细胞，我看到细胞成功地动画。

self.transform = CGAffineTransform(scaleX: 1.0, y: 0.5)
self.layoutIfNeeded()

UIView.animate(withDuration: 0.7, delay: 0, options: [.curveEaseOut], animations: {
    self.transform = CGAffineTransform.identity
    self.layoutIfNeeded()
}, completion: nil)

我很感激你的时间和回答。

编辑：

根据建议，我更改了我称之为动画的位置，如下所示。现在，当我试图使整个细胞充满活力时，它就起作用了。但是，我想动画animView，它是自定义UICollectionViewCell (BarCell)的一个子视图。但它不是有生命的。有什么想法吗？

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {

    let cells = collectionView.visibleCells
    for cell in cells {
        let current = cell as! BarCell
        let curAnimView = current.animView

        curAnimView?.transform = CGAffineTransform(translationX: 0, y: current.animFillHeightCons.constant)
        UIView.animate(withDuration: 0.7) {
            curAnimView?.transform = CGAffineTransform.identity
        }

    }
}

Answer 1

您只需要为可见的单元格启动动画。这是你怎么做到的。

加上这个

UIScrollViewDelegate

它将提供该方法。

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
            let cells = colAnim.visibleCells
            for cell in cells
            {
                let current = cell as! testCollectionViewCell
                UIView.animate(withDuration: 2.0, animations: {
                    current.animView.transform = CGAffineTransform(translationX: -400, y: 0)
                //Change this animation
                })
            }
        }

同时也要确保这样做。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testCollectionViewCell", for: indexPath) as! testCollectionViewCell
        cell.animView.transform = CGAffineTransform(translationX: 0, y: 0)// This one
        return cell
    }

通过这样做，只有当单元格可见时，才能实现动画。谢谢。

Answer 2

要做到这一点，有两个条件：

1. 您需要重置每个单元格绑定的动画属性。
2. 只有在单元格即将可见时，才能启动动画。

此外，也有异常(如我所做的)，有时单元格绑定或集合的布局是复杂的或自定义的，因此，在这些情况下，我们将不得不延迟动画，这样它才能实际工作。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
 // your dequeue code...
 // ...

 // Reseting your properties as described in 1
 cell.myImageView.alpha = 1
}

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
 let myCell = cell as! MyCell
 // As described in 2
 myCell.animate()
}


class MyCell: UICollectionViewCell {
 func animate() {
  // Optional: As described above, if your scene is custom/complex delaying the animation solves it though it depends on your code
  DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
        // Animation code
        UIView.animate(withDuration: 1,
                       delay: 0,
                       options: [.autoreverse, .repeat]) {
            self.seenNotSeenImageView.alpha = 0.5
        }
  }
 }
}

还有第三个条件:如果您的单元将被另一个VC覆盖，您将希望在保存animated()的VC的viewWillAppear中启动相同的collectionView方法，如下所示：

 collectionView.visibleCells.forEach{($0 as? MyCell)?.animate()}