CADisplayLink 的时间动画和空间动画

本文的标题，全文:

CADisplayLink 基于时间的动画效果，和

CADisplayLink 基于位置的动画效果

引子：

小灰面试小白，

问: “以前美团的 tabbar , 有一个点击选项卡，选项卡拱起”

“就是矩形局部拱起的效果，怎么实现”

小白：“Open GL, 研究没这么深，再见”

小灰: "使用 CADisplayLink + 子定制绘图，也可以做 "

小灰: “面试的开发者，把没思路的技术，归结于他没学过的。杯具”

基于时间的 CADisplayLink 动画效果, 局部拱起

例子： 矩形框，分左右。点击哪一边，那边拱起来

如下图： 左边拱起来，效果

辅助方法: 识别点击的哪一边

设置背景色为透明

因为动画是基于绘图 drawRect

@objc func tap(with gesture: UITapGestureRecognizer){guard !jelly.animating else{ return }let point = gesture.location(in: partial)let width = partial.frame.widthlet isRight = point.x > width / 2let idx = isRight ? 1 : 0partial.backgroundColor = UIColor.clearpartial.startAnimation(idx)}

主要逻辑

两个辅助状态保存类，省略了，

具体见 github repo

• drawRect 绘图，只可在 bounds 里面，

所以 view 要预先留一个空档

可通过上文的边框线，理解

• CADisplaylink 使用的间隔时间，是屏幕的帧率

不可手动设置

就要把基于时间的动画，其持续时间，转化为一定的次数

（ 从 from 的状态， 到 to 的状态 ）

设置精确的 duration ，还要保证动画平顺，有难度

这里 total = time * 20 , 给予了一定的次数，消费完，就结束

具体见 github repo

• 局部拱起，是基于时间的

（ 切题 &#