반응형
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';
}
}
'IT > JS + Jquery' 카테고리의 다른 글
| [JavaScript] input file 태그에 파일명만 넣기 (0) | 2024.01.15 |
|---|---|
| [JavaScript] 16진수 color 코드를 RGB코드로 변경 함수 (0) | 2023.09.05 |
| [JavaScript] EmailJs를 이용한 Email 전송 (0) | 2023.06.19 |
| [카카오맵API] 정확한 위치 (위도, 경도) 찾기 (0) | 2023.06.16 |
| [JavaScript] 각 나라의 표기 방식에 맞는 날짜를 표기하는 방법 (GMT) (0) | 2023.02.07 |