ios - CollectionViewCell 内向上移动标签动画

Question

我水平滚动 CollectionView 单元格数量未知，它占据了除导航栏之外的整个屏幕。还有 CollectionViewCell，它占用整个 CollectionView。另外，在这个单元格内，我将 UIView 居中，其中包含一些标签和一个按钮。这就是我的用户界面的样子: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
        }
    }
}

之后我的用户界面如下所示:click

我的 CollectionView 代码:

    // 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 block

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

使用文档 here 中的想法

When a view is dequeued for use, this method is called before the corresponding dequeue method returns the view to your code. Subclasses can override this method and use it to reset properties to their default values and generally make the view ready to use again

在代码中你可以这样做:

 @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



}