0

I am looking for guidance with how to approach the following animation scenario.

I have UICollectionView with a custom circular UICollectionViewLayout subclassed layout. There are (circular) images around the perimeter of the circle and a 50% larger (circular) image in the center of the circle.

When the user taps one of the perimeter images, I want the tapped on image to move toward the center (becoming 50% bigger) and sort of "connect with" the center image. I then want the two images to float to the top of the view. (The bottom portion of the view will then be a context of things related to the two joined images).

If this makes sense to anyone, I'd really appreciate a starting point of some kind.

By the way, I'm an old developer but new to iOS and developing in Swift (but can read Objective-C).

Thanks!

psparago
  • 1,113
  • 11
  • 21

1 Answers1

0

I solved this using a visual trick. Of course, I'm sure there's a better way.

When one of the perimeter circles is tapped, I transition to a view controller that immediately creates a duplicate of the center circle and the tapped circle in their former locations, making it appear that the other elements disappeared.

I then simultaneously animate the tapped circle to the center and the center image to the top of the view. I enlarge the tapped circle briefly and then animate it to the top of the view next to the center circle restoring the tapped image's original size.

Not elegant but it works.

psparago
  • 1,113
  • 11
  • 21