【JavaScript】requestAnimationFrame

功能

楨率高的動畫函數。
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停止動畫
     }
     
    }

範例

Leave a Reply

Your email address will not be published. Required fields are marked *