Building Card-Highlighting-Animation as in the App-Store

Question

In the AppStore (iOS 11) on the left "today"-tab, there are several card views. If you highlight one, it shrinks a little bit. How can I rebuild this animation?

I guess changing the constraints of the card view during an animation will not be what we need, since you would also have to adapt all the other constraints (e.g. of the labels) to match the new size.

Is there an easier way to shrink a view with all its subviews?

Also, when you click the card, it increases to fullscreen with an animation. Do you have any ideas how to achieve this effect?

Answer 1

For tapping and shrinking card, I also wrote about this in detail. Here's the idea:

• Use a scaling transform to animate shrinking (like in accepted answer)
• Disable delaysContentTouch to make it shrink faster upon touch (scrollView.delaysContentTouch = false)
• Always allow users to scroll using .allowUserInteraction animation option:

UIView.animate(withDuration: 1.0,
               delay: 0.0,
               options: [.allowUserInteraction],
               animations: ...,
               completion: ...)

(By default when you use transform, it disables the interaction a bit. User can't scroll successively without doing that)

---

About the expanding to full screen with animation, I have tried to replicate it with the native's transition APIs which you can check out here: https://github.com/aunnnn/AppStoreiOS11InteractiveTransition

In short, I use UIViewControllerAnimatedTransitioning to do custom animation. Hide the original card and create a new dummy card view just for animation. Then setup AutoLayout constraints of that card, including 4 to each of the screen edges. Then animate those constraints to make it fill the screen.

After everything is done, hide that dummy view and show the destination detail page.

Note: The exact implementation detail is a bit different and involved.