前言
微信的浮窗转场动画看着一闪而过,但是背后需要对转场动画的运行原理,相关类有哪些,他们都是如何作用的,又如何相互配合等了解比较透彻。
转场动画会涉及比较广泛,相关类也不是那么容易理解清楚。但厘清后,使用转场动画会很省事并简化很多代码,而且复用和扩展也比较方便。最重要的是,转场动画的对象是控制器。这样我们可以把一些配合动画的逻辑都放在控制器中,还可以利用控制器的自带的viewdidLoad,viewwillAppeard等方法, 做更多的扩展。
微信效果展示
展示一下微信转场动画的效果,
微信转场动画
功能分析
-
从侧滑方式看, 确实和系统默认相似,但从预览的效果看,不用自定义的转场动画以及侧滑,无法做到一致。所以这第一步,就是需要自定义的转场动画以及侧滑,还要做成和UINavigationController 默认的一样。
-
总整体分析一下, 除了UINavigationController 默认的效果外。自定义的侧滑动画过程中,有右下角按钮跟随策划进度的抽屉效果,有对手势点是否在按钮范围的监控以及手势进出按钮范围的动画。如果松手时,手势在按钮范围内,则会将控制器收藏到浮窗,而且会有一个控制器慢慢缩小并移动并生成浮窗的动画。
慢速看这个关键部分动画
转场动画关键
-
我们着重分析一下,最关键部分到底做了什么。从慢速效果可以看到,表面上控制器View可是部分缩小, 但内容并没缩小,显然是用的mask,准确的说是遮挡四周留中间的mask。并且遮挡的范围一边移动一边变小,然后还有灰色背景慢慢显示,遮盖控制器显示的内容。另外浮窗上的图片也在mask留出空间慢慢显示。注意mask留出的区域是边移动边变小的,所以图片的位置也是随之移动的。
我们总结一下:
1) 可视部分缩小的效果, 这需要用到mask 实现。而且需要自定义maskview,再用cgpath去画图形,使中间显示,四周遮挡。再利用displayLink 不断的重绘,以实现可视部分移动并缩小的效果。
2) 灰色背景,这个比较简单就不必多说。
3) 图片的动画。据我测试,如果用imageview,在displaylink 中修改frame,总是无法做到和mask动画同步。那就只好用coregraphic去画图片了,顺道直接裁剪成圆角。
这段算是分析完了。虽然只有短短的瞬间,但要做这么多事。关键是不细看,根本都感觉不到,心中顿时一万只草泥马飞过。 -
刚才这段动画是在触发显示浮窗之后发生的。如何处理原本的转场动画是我们接下来要分析的问题。我们可以拆分成两部分来分析。
首先,如何判断是否要取消正常的转场动画?
从微信效果看,是在拖动手势结束时,如果手势在右下角按钮的范围内就会执行3中的动画。那我们需要在自定义的侧滑动画(一般是继承UIPercentDrivenInteractiveTransition) 来实现该效果。接下来就是通知UIViewControllerInteractiveTransitioning 对象了, 这块实现方式有很多,就不多说。
然后,最重要的第二个问题,UIViewControllerInteractiveTransitioning如何取消正常的转场动画,然后去执行3?
这就需要说到UIViewControllerAnimatedTransitioning与UIViewControllerInteractiveTransitioning这两个类的相互关系了。UIViewControllerAnimatedTransitioning负责转场动画, 一般是用UIView.animate(withDuration:animations:completion:)
, 其animations Block会先执行。然后负责动画进度调度的类UIViewControllerInteractiveTransitioning ,开始不断调用update(_:)来更新动画进度。 手势结束时候,会调用finish或者cancel, 来结束或者还原动画。动画执行结束到completion block才会被调用。总之在finish, cancel调用后,只有completion block会执行,并且不是立即被调用,所以这俩都不可用。
这时就需要利用另一个在转场动画中十分重要的类UIViewControllerTransitionCoordinator。利用notifyWhenInteractionEnds(_ handler: @escaping (UIViewControllerTransitionCoordinatorContext) -> Void)
方法, 绑定一个侧滑动画结束时立即执行的block, 来判断和执行3 的动画。这其中还需要注意UIViewControllerContextTransitioning.completeTransition(_:)
,就不能在原本的completion block 执行了,而是放在3执行完毕之后。
后记
这就是整个转场动画的实现分析了,算是整个浮窗功能的最重要的一块。
下面是我自己做的仿微信浮窗功能的源码,如果觉得还不错就给颗星吧。
仿微信浮窗源码
Tips: 用CADisplayLink做的动画,由于帧长基本相同,所以做的动画效果基本是线形变化的。如何转化非线形变换呢?最简单的方式就是将已执行的时间除以总动画时间,得到动画进度percent,然后对其做平方或者开方,这样就能得到非线形变化的percent, 当然三角函数也是不错的选择。
网友评论