用JS模拟transition-timing-function：ease-out

背景： 前几天在做项目的过程中需要更改div的scrollTop,要求运动过程类似IOS Webview可视区吸顶动画，先快后慢

分析：

1. css不能设置offsetTop，需要JS动态更改offsetTop。
2. 动画先快后慢意味着，scrollTop更改的速度越来越慢
3. 移动总体的距离是scrollTop。
4. 事件控制在两秒之类，小于一屏幕1s，大于一屏幕2s
5. 速度？？距离？？ 速度在时间上的积分等于距离？？？？ 定积分！！！！

猜想函数：

什么函数是递减的？？

什么函数做定积分好做。换句话说，原函数好找？？

什么函数作用域包涵0（因为需要从0时刻开始）

什么函数在0-2S的积分为scrollTop

盲猜 y = 1 / x;

绘图地址

作用域不包含0 ？？？ 向右平移一个单位 ？？？ 左加右减，上加下减！！！哈哈哈哈 高数老师的敦敦教导= =

y = 1 / (x + 1);

y = 1 / (x + 1); 在0-2s的积分一定是scrollTop吗 ？？？？

需要一个系数？？？？

y = K / (x + 1) ;

怎么求出这个系数呢？？

y = K / (x + 1);

y 在 0 - 2上的积分 = scrollTop；

y = 1 / x的原函数 f(x) = Math.log(x) + c， c为常数；

类推求出 y = K / (x + 1)的原函数 f(x) = Math.log(x + 1) + c, c为常数；

最终实现代码如下：

优化性能
setInterval实现这种效果只是使用20ms作为offset更改的时间点
更高的优化 ？？？？ requestAnimFrame！！！MDN requestAnimationFrame

核心思路： 获取两次递归的事件间隔？？？ new Date().getTime() - startTime

最终实现如下：

完整代码 

    


    
    
    
    

    

    



    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd
    
asdasd



    开始123123123运动

这是先快后慢的动画， 其他动画的解决思路同理
核心：

 找函数 ，做积分！！！
 找函数 ，做积分！！！
 找函数 ，做积分！！！

最后说句：如果能用css实现，少用JS