[Javascript]requestAnimationFrame를 사용한 프로그래스 기능

btn.addEventListener('click', () => {

  anime(box, {

    prop: 'margin-left',

    value: 500,

    duration: 1000,

  });

});

function anime(selector, option) {

  let startTime = performance.now();

  requestAnimationFrame(move);

  function move(time) {

    //각 사이클 마다 걸리는 누적 시간

    let timelast = time - startTime;

    //매 반복횟수마다 현재 걸리는 누적시간값을 전체시간으로 나누면 0~1사이의 실수로 반환 가능

    //progress : 설정한 시간 대비 현재 반복되는 모션 진행상황을 0~1사이의 소수점으로 나타내주는 진행률 (x100 -백분율)

    let progress = timelast / option.duration;

    console.log('진행률', progress);

    if (progress < 1) {

      requestAnimationFrame(move);

    }

    //고정된 반복횟수 안에서 제어할 수 있는건 각 반복 사이클 마다의 변화량이기 때문에

    //변경하려고 하는 targetValue값에 진행률을 곱해서 변화량을 제어

    box.style[option.prop] = option.value * progress + 'px';

  }

}