在上一篇中,我们了解了如何使用 Linear
由于 Recycler
不过首先,我们先来看一下我们常用的滚动动画曲线⸺贝塞尔曲线。
1. 贝塞尔曲线简介
在 PathPath 中的四个参数。
我们也知道,贝塞尔曲线的方程为:
那么,在上述的情况下,贝塞尔曲线可以被简化为:
譬如,在 Accord 中,歌词滚动使用的曲线是 Path,那么其方程为:
其在 t ∈ [0
2. 差值计算
由于原函数图像只在 x ∈ [0
在页面滚动中,式 (3) 中的 x 为时间,y 为位移。延迟滚动即是在 x 上偏移,让时间错开。在 Accord 中,偏移的时间是总位移时长的 0
用式 (3) 减去式 (5),即可得到我们所需的移动范围随时间变化的方程。其图像如下:
但是仅仅得出方程我们是无法加以利用的。
3. 贝塞尔曲线拟合
要利用上得出的差值方程,我们需要将函数图像在其导数 f ′(x)
由于只有两个控制点并且无法控制权重,我们使用了比较简单的方法进行了大致的拟合。
其中,在向下移动时,其函数对应的是 Path,图像如下:
向上移动时则为 Path,如下图所示:
接着,按照单调递增区间和单调递减区间在总时长中所占的比例来定义向下、向上时所需要的时间,选取一个合适的最大距离,就可以近似地模拟出延迟滚动的效果了。
结尾
如果你想要一个现有的示例代码,可以到这里看看,喜欢的话可以点个 Star。
如果你对如何使用 Linear