在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 
     } 
    } 
} 

在那之后我的UI看起来像：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) 
    } 

} 

问题：

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

Answer 1

因为变化是在UI，所以首先我觉得你应该首先把你的动画里面的代码DispatchQueue.main.async块

然后因为你使用的是可重复使用的集合视图细胞，您在动画代码更改值在保持相同单元格被重用，因此为了在集合视图重用它们之前给这些值一些初始值，我们覆盖prepareForReuse()方法并在那里给出初始值。

从文档here

当视图离队使用使用的想法，这种方法被称为相应离队方法 返回，以便您的代码之前。子类 可以覆盖此方法，并使用它的属性重置为其 默认值，通常使视图准备再次

使用在代码中，你可以这样做：

@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 



}