如何写一个滚动的缓动函数？

Question

由于某些原因，自己目前在写一个react的滚动组件，用的控制translateY来模拟滚动的，但是现在问题在于自己的滚动和一些做的比较好的滚动相比(比如微信的滚动)总是感觉不那么流畅。

具体代码就不贴了。

也查过一两个开源的，但是由于这方面数学计算较多，没有注释的话看起来有点吃力。

想知道该怎么去写这个运动函数，比如说如何写touchend触发后接下来的缓动函数等？因为微信等这方面做的非常逼真，比如手滑动的快些速度就会大些(可能降低速度的过程也比较慢)

还有特别是，比如滑动出界了，这个时候有一种越来越难滑动的那种效果，想知道这个是如何实现的？？

谢谢

Answer 1

你好，你所描述的问题涉及三个方面。
1，手指不离开屏幕，滚动，当前你的页面活动的距离应该和你手指移动的距离一致。也就是说你需要在touchstart，touchmove里面写处理处理函数。
2，手指离开屏幕，利用惯性滚动。要实现你说提及的平滑活动，第一需要计算手指在离开屏幕的时候当前的速度，速度可以通过你之前缓存的特征值算出来。第二你需要按照特定频率(50ms)手动发一个事件，例如叫做inertiamove，在事件处理函数里面，移动当前的页面。这里就需要你所说的速度递减函数，具体可以去stackoverflow上查查。
3，手指没离开屏幕活动，当前页面已经到顶或者到底，这个时候需要做反馈效果，我们俗话叫做橡皮筋效果。需要找到一个递减公式，来处理手指移动距离和当前页面‘裂开’的距离。
因为手机回答，具体的公式暂时找不到，大概的思路就是我描述的上面三点

Answer 2

有个插件叫isscroll