iOS-仿写京东"加入购物车"转场动画

一. 转场效果演示:

"加入购物车"转场动画

二. 实现原理

      上图显示的动画分为Presentation animations 和Dismissal animations. 

      点击右下角紫色按钮(即"加入购物车"按钮), 即触发Presentation: 先设置toView(橙色视图)的frame, 并将toView平移到屏幕下方, 然后使用块动画让fromView(展示手表信息的视图)X方向上旋转 π / 16 度, Z方向上移动-100, 并恢复toView的transform为默认值. 在当前块动画完成的回调中嵌套一个块动画, 以实现fromView在X. Y方向上缩放为原先的0.9. 嵌套块动画的完成回调中, 调用UIView的扩展方法toRetinaImage() -> (UIImage)来绘制fromView, 将其添加到transitionContext的containerView第0层.并调用 transitionContext.completeTransition(true)告知转场结束.还有一个蒙版的细节,这个实现比较简单,直接添加在fromView和toView之间. 

        在蒙版上添加一个tap手势, 触发Dismissal. 此时的fromView是指橙色视图. 而toView是指展示手表信息的控制器视图,由于它在Presentation完成时即已从屏幕上移除(并未释放). toView默认是显示在fromView之上的, 所以通过insert在fromView之下改变两者的层级关系, 然后在Dismissal animations的块动画中使fromView平移到屏幕下方, toView的transform恢复成默认值, 动画完成的回调中调用 transitionContext.completeTransition(true).

源码地址:https://github.com/moonCai/AddShoppingCartTransitionAnimation

三. 思考讨论

    苹果官方文档对于自定义转场动画的介绍中:

" Swapping the values makes it easier to write a single animator that handles both presentations and dismissals. When you design your animator, all you have to do is include a property to know whether it is animating a presentation or dismissal. The only required difference between the two is the following:

For a presentation, add the “to” view to the container view hierarchy.

For a dismissal, remove the “from” view from the container view hierarchy."

     在Dismissal animations执行完之后, 我的代码中没有移除“from” view, 但是通过视图断点, 却看不到“from” view. 之前添加到转场环境容器视图上的截图和蒙版貌似也未显示. 通过认真研读文档和测试, 本人得出以下两个观点(如有不同见解, 欢迎交流指正):

1. Presentation animations转场执行完后, 通过控制台打印发现"from"View的frame 是frame = (20.7 36.8; 372.6 662.4), 但视图层级上并未显示.基于此, 我认为此时fromView和转场环境的容器视图的父子视图关系解除.

2. Dismissal animations执行完以后, 打印转场环境的容器视图, 显示此时容器视图已被释放. 那么添加在它上面的子视图也对应会执行一次release. 但我在自定义push和pop的转场时发现此时容器视图并未销毁, 那么添加在其上的子视图(fromView dimmingView 和imageView)都应该removeFromSuperView, 及时释放内存. 所以,在这里还是建议按照苹果文档中所说的:  For a dismissal, remove the “from” view from the container view hierarchy.