Reproducing Popular iOS Controls - Part 15: | Ray Wenderlich Videos

🎓 Courses & Articles
1

In this challenge your task is to interactively animate the bottom cell that appears when the user swipes on the top one.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5298-reproducing-popular-ios-controls/lessons/15
2

For the challenge, I ended up writing code like this inside the bottomCard

let scale = abs(xOffset) / (xMaxOffset * 2)
if scale < 1.0 {
   bottomCard.cell.transform = CGAffineTransform(scaleX: scale, y: scale)
}

And I set up the initial 50% width and height for the bottomCard.cell in the .began switch case like this

case .began:
if let bottomCard = bottomCellWithIndexPath {
    bottomCard.cell.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)
    bottomCard.cell.alpha = 0.3
}
3

@grane Thank you for sharing the challenge solution - much appreciated!

1 Like
4

Awesome :D! There’s always more ways than one to address these problems!

1 Like
5

Had a similar solution to @grane, but I made the actual current scale proportional to how close you were getting to the end.

    case .began:
      if let bottomCard = bottomCellWithIndexPath {
        setBottomIntoPosition(cell: bottomCard.cell)
      }
    case .changed:
      if let topCard = topCellWithIndexPath {
        topCard.cell.transform = CGAffineTransform(translationX: xOffset, y: 0)
      }
      
      if let bottomCard = bottomCellWithIndexPath {
        let ratioCompleted = abs(xOffset) / (collectionView?.frame.width ?? 1)
        bottomCard.cell.alpha = ratioCompleted
        let transformRatioCompleted = ratioCompleted * 0.2 + 0.8
        bottomCard.cell.transform = .init(scaleX: transformRatioCompleted, y: transformRatioCompleted)
      }

  private func setBottomIntoPosition(cell: UICollectionViewCell) {
    cell.alpha = 0
    cell.transform = .init(scaleX: 0.8, y: 0.8)
  }

Also, the title says “Number Indicator”, but this challenge isn’t a number indicator FYI.