requestAnimationFrame （待整理）

 1 /**
 2  *  scrollHeight: 目标高度
 3  *  duration:      持续时间 ms
 4  **/
 5 
 6 function scrollTo(scrollHeight, duration) {
 7     let from = window.scrollY;
 8     let to = scrollHeight - window.scrollY;
 9     lastTimestamp = performance.now(); //上一次动画的时间
10     let fps = 0; //总帧数
11     let currentFPS = 0; //当前帧数
12 
13     const step = function (newTimestamp) {
14         //计算出总帧数，由于每次调用的时间不确定，也就是每次调用时距离上一次用用的时间差不确定，
15         //为了确保动画执行的时间和连续性，所以总帧数每次都需要重新计算
16         fps = Math.round(duration/Math.abs(newTimestamp - lastTimestamp ));
17         
18         //如果当前帧数等于总帧数,则直接滚动到目标高度，跳出函数，动画结束
19         if(currentFPS >= fps){
20             window.scrollTo(0, scrollHeight);
21             return;
22         }
23         // 计算出当前这一帧动画的位移（或者是角度等等..）
24         // 执行动画
25         let displacement = Tween.Quad.easeInOut(currentFPS, from, to, fps);
26         window.scroll(0, displacement);
27         // 当前帧数自加，更新本次动画的时间，用作下一次计算
28         currentFPS++;
29         lastTimestamp = newTimestamp;
30         //进行下一帧动画
31         window.requestAnimationFrame(step);
32     }
33     window.requestAnimationFrame(step);
34 }

1 <button id="stopBtn">stop<button>
2 <button id="startBtn">start<button>

1 div {
2   width:  10px;
3   height: 10px;
4   background: #ffd213;
5 }

 1 var animationId;
 2 var stop = document.getElementById(‘stopBtn‘);
 3 var start = document.getElementById(‘startBtn‘);
 4 
 5 function createBar() {
 6     document.body.append(document.createElement(‘div‘));
 7     animationId = requestAnimationFrame(createBar);
 8 }
 9 animationId = requestAnimationFrame(createBar);
10 
11 stop.addEventListener(‘click‘, function() {
12     cancelAnimationFrame(animationId);
13 });
14 
15 start.addEventListener(‘click‘, function() {
16     animationId = requestAnimationFrame(createBar);
17 });