我怎样才能实现这个 UICollectionView 单元格动画？

Question

我一直想在 Dribble 上实现这个漂亮的小 UICollectionViewCell 动画。

你觉得可能吗？

我四处寻找任何指南来抢先一步，但没有发现任何相似之处。

我认为自定义流布局是解决此问题的方法。是不是我必须为每个可见单元格制作快照，向每个单元格添加平移手势，并根据通过手势识别器检测到的移动，捕获可见单元格并为快照图像设置动画？如果能帮助我理解如何实现这一点，我将不胜感激。

谢谢。

Answer 1

这是一个非常有趣的挑战。

我不会进行自定义布局，而是覆盖 scrollViewDidScroll，每次调用时都存储偏移量，将其与上次存储的偏移量进行比较以获得速度，并基于此应用对集合视图中所有 visibleCells 的转换。

var lastOffsetX: CGFloat?
func scrollViewDidScroll(_ scrollView: UIScrollView) {
  defer { lastOffsetX = scrollView.contentOffset.x }
  guard let lastOffsetX = lastOffsetX else { return }
  // You'll have to evaluate how large velocity gets to avoid the cells
  // from stretching too much
  let maxVelocity: CGFloat = 60
  let maxStretch: CGFloat = 10
  let velocity = min(scrollView.contentOffset.x - lastOffsetX, maxVelocity)
  let stretch = velocity / maxVelocity * maxStretch
  var cumulativeStretch: CGFloat = 0
  collectionView.visibleCells.forEach { cell in 
    cumulativeStretch += stretch
    cell.transform = CGAffineTransform(translateX: cumulativeStretch, y: 0)
  }
}

我会从这样的事情开始，并在滚动视图停止滚动时制作 lastOffsetX = nil（这个练习留给 reader）。

它可能需要一些调整。

我怎样才能实现这个 UICollectionView 单元格动画？

How can I implement this UICollectionView cell animation?

uicollectionview

swift

ios-animations

uicollectionviewflowlayout