在 CollectionViewCell 中上移标签动画

Question

我用未知数量的单元格水平滚动CollectionView，它占据了除导航栏以外的整个屏幕。还有CollectionViewCell，它占用了整个CollectionView。此外，在这个单元格中，我将UIView 居中，其中包含一些标签和一个按钮。这就是我的 UI 的样子：click。

每当用户单击此 UIView 内的按钮时，标签会向上移动一点，并且所有其他标签也会变得可见。如果该模式已经被激活，按钮的工作方式相反：

class WordCell: UICollectionViewCell {

    var isActive = false
@IBOutlet weak var word: UILabel!
    @IBOutlet weak var translation: UILabel!
    @IBOutlet weak var exOne: UILabel!
    @IBOutlet weak var exTwo: UILabel!

// ...

@IBAction func move(_ sender: UIButton) {
        if !isActive {
        UIView.animate(withDuration: 0.25, animations: {
            self.word.frame.origin.y -= self.bounds.height / 7
        }, completion: nil)
            UIView.animate(withDuration: 0.3, animations: {
                self.translation.alpha = 1
                self.exOne.alpha = 1
                self.exTwo.alpha = 1
            })
            isActive = true
        } else {
            UIView.animate(withDuration: 0.25, animations: {
                self.word.frame.origin.y += self.bounds.height / 7
            }, completion: nil)
            UIView.animate(withDuration: 0.3, animations: {
                self.translation.alpha = 0
                self.exOne.alpha = 0
                self.exTwo.alpha = 0
            })
        isActive = false
        }
    }
}

然后我的 UI 看起来像：click

我的收藏查看代码：

    // CollectiomView Delegate stuff, in the code above I just retrieve data from FireBase
extension RepeatController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return words.count
        }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "wordCell", for: indexPath) as! WordCell
        if words[0].lPairs == "re" {
            cell.word.text = words[indexPath.row].translation
            cell.translation.text = words[indexPath.row].word

        } else {
            cell.word.text = words[indexPath.row].word
            cell.translation.text = words[indexPath.row].translation
        }
        cell.exOne.text = words[indexPath.row].exOne
        cell.exTwo.text = words[indexPath.row].exTwo
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let bounds = collectionView.bounds
        return CGSize(width: bounds.width, height: bounds.height)
    }

}

问题：

此系统仅在我单击按钮两次时才有效（向上移动标签，然后将其返回到相同位置并隐藏所有其他标签）。否则，在 2-3 个单元格之后，所有其他标签都变得可见，主标签位于顶部，就像我在每个单元格的按钮上键入的一样（但我没有）。问题是什么？

Answer 1

由于更改是在 UI 中，所以首先我认为您应该首先将动画代码放入 DispatchQueue.main.async 块中

然后，由于您使用的是可重用的集合视图单元格，因此您在动画代码中更改的值对于被重用的单元格保持不变，因此为了在集合视图重用它们之前为这些值提供一些初始值，我们覆盖 prepareForReuse()方法并在其中给出初始值。

使用文档here中的想法

当一个视图被出列使用时，这个方法在 相应的 dequeue 方法将视图返回给您的代码。子类 可以覆盖此方法并使用它将属性重置为其 默认值，通常使视图准备好再次使用

在代码中你可以这样做：

 @IBAction func move(_ sender: UIButton) {
            if !isActive {
                 DispatchQueue.main.async {
                          UIView.animate(withDuration: 0.25, animations: {
                          self.word.frame.origin.y -= self.bounds.height / 7
                          }, completion: nil)
                               UIView.animate(withDuration: 0.3, animations: {
                               self.translation.alpha = 1
                               self.exOne.alpha = 1
                               self.exTwo.alpha = 1
                          })

                  }
                          isActive = true
            } else {
                 DispatchQueue.main.async {
                         UIView.animate(withDuration: 0.25, animations: {
                         self.word.frame.origin.y += self.bounds.height / 7
                         }, completion: nil)
                         UIView.animate(withDuration: 0.3, animations: {
                               self.translation.alpha = 0
                               self.exOne.alpha = 0
                               self.exTwo.alpha = 0
                         })

                }
                isActive = false
            }
        }
    }

override func prepareForReuse() {

     super.prepareForReuse()

     self.word.frame.origin.y = self.wordTop.constant, //where wordTop is a top constraint for the word 
     isActive = false
     self.translation.alpha = 0
     self.exOne.alpha = 0
     self.exTwo.alpha = 0



}