使用 UICollectionView 的 iOS Android Material Design 分层计时

Question

我想做Android Material Design引入的动画Hierarchical Timing在 iOS 中使用 UICollectionView

假设它是一个 collectionView，调整 View 大小不是问题，及时制作此动画的最佳做法是什么。如何执行延迟

Answer 1

子类化您的 Collection View 单元格并添加此方法:

class YourCollectionViewCell: UICollectionViewCell {  
   //Some IBOutlets if needed

   func popAfter(delay: NSTimeInterval){
      transform = CGAffineTransformMakeScale(0, 0)
      UIView.animateWithDuration(0.7, delay: delay, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
         self.transform = CGAffineTransformMakeScale(1, 1)
      }, completion: nil)      
   }
}

将 Collection View 的 delegate 和 dataSource 设置为 View Controller (这可以在 Interface Builder 中完成)。将常量添加到您的 View Controller 并在 viewDidAppear 中重新加载 Collection View 以设置单元格动画:

class YourViewController{
   private let numberOfCellsInLine = 3
   private let numberOfVisibleCellsOnTheScreen = 12
   private let baseDelay = 0.15

   override func viewDidAppear(animated: Bool) {
      super.viewDidAppear(animated)
      collectionView.reloadData()
   }
}

为 UICollectionView 数据源和委托(delegate)向 View Controller 添加扩展:

extension YourViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{
   func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
      return numberOfCells
   }

   // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
   func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
      let cell = collectionView.dequeueReusableCellWithReuseIdentifier("YourCellID", forIndexPath: indexPath) as YourCollectionViewCell
      //set cell's content
      let index = indexPath.row
      let yIndex = index / numberOfCellsInLine
      let delay = Double(index % numberOfCellsInLine + (index >= numberOfVisibleCellsOnTheScreen ? 0 : yIndex)) * baseDelay
      cell.popAfter(delay)
      return cell
   }
}

您可以调整 Cell 的 popAfter 值中的 baseDelay 和动画持续时间以获得所需的时间。希望这对您的应用程序有所帮​​助并祝您好运!请随时提出任何问题。