功能

楨率高的動畫函數。
setInterval最小時間單位是1毫秒，如果需要短時間大幅度的動態效果，則setInterval會顯得吃力。
這時就可以使用requestAnimationFrame

解説

requestAnimationFrame的callback函數的【第一個參數】會變成時間戳（＝記錄當下的時間）

requestAnimationFrame(step);

function step(ggg){
 console.log(ggg); //會回傳當下的時間，但只會回傳一次
}

如果想要讓時間戳一直回傳過來，就要在callback函式裡面呼叫requestAnimationFrame

requestAnimationFrame(step);

function step(ggg){
 console.log(ggg);
 
 requestAnimationFrame(step); //會一直回傳時間戳過來
}

動畫的概念：

1. 定義初始時間値，與變動時間値
2. 紀錄毎次變動時間 減去 初始時間的相差値
3. 相差値會越來越大

   requestAnimationFrame(step);
   
   //定義初始時間値
   let start=null;
   
   function step(ggg){
    if(start==null){
     start=ggg; //在一開始的時候帶入時間初始値
    }
    let passed=ggg-start; //算出現在時間與初始時間的相差値
    console.log(start); //會回傳初始時間値
    console.log(passed); //會回傳經過的時間
    requestAnimationFrame(step);
   }

4. 用這個相差値帶入style的參數，就可以做出動態效果

   button(onclick="requestAnimationFrame(step)") click me
   #animatebox

   #animatebox
    width: 300px
    height: 200px
    background-color: teal
    opacity: 0

   let start=null;
   
   function step(ggg){
    if(start==null){
     start=ggg;
    }
    let passed=(ggg-start)/1000; //透明的値是0~1，用除數把數値縮小
    console.log(passed);
    
    animatebox.style.opacity=passed;
    
    if(passed<1){
     requestAnimationFrame(step); //如果透明値大於1停止動畫
    }
    
   }

範例

click me