[심리테스트] progessbar, fade-in 애니메이션

애니메이션 적용하기

본 프로젝트는 2021.7.19부터 2021.8.28까지 진행한 토이프로젝트에 관한 기록이며, 해당 글은 프로젝트 진행 당시에 티스토리에 게재한 글을 그대로 옮겨온 것입니다.

심리테스트의 필수 요소 중 하나인 진행상황 UI와 페이지를 넘길 때마다 등장하는 페이드인 애니메이션을 구현해보고자 했다. 애니메이션은 css의 keyframes를 이용하는 방법만 알았기 때문에 html 파일이 바뀌지 않을 경우 js로 애니메이션을 어떻게 구현해야할지 많이 고민했던 것 같다.

1. 진행바 애니메이션

progress 애니메이션 참고: https://www.w3schools.com/howto/howto_js_progressbar.asp

우선 html에서 progress 요소를 선언해야 한다. 이 요소는 로딩이나 동영상 진행도를 나타낼 때 사용하는데, js의 setInterval 함수를 사용하면 이를 움직이게 만들 수 있다. setInterval은 몇초마다 한번씩 함수를 실행시키고 싶을 때 쓴다. 예를 들어, 3초에 한번씩 콘솔 창에 Hello world를 출력하고 싶다면 다음과 같이 작성하면 된다.

function sayHello() {
	console.log("Hello world");
}

setInterval(sayHello, 3000);

이때 시간 단위는 항상 밀리세컨드이기 때문에 1초이면 1000을 입력해야 한다. 따라서 이를 응용하면 사용자가 버튼을 클릭할 때마다 진행상황을 업데이트하는 애니메이션을 만들 수 있다.

function pgbarAnimation(){
    const preval = pgbar.value;
    let id = setInterval(frame, 10);

    function frame(){
        if(pgbar.value >= preval + 10){
            clearInterval(id);
        }else{
            pgbar.value++;
        }
    }
}

여기서 clearInterval은 해당 setInterval 함수를 중지하는 기능을 한다. 즉, 위 코드는 10ms마다 pgbar의 value를 1씩 증가시키고 만약 10이상 증가되었다면 함수를 중단한다.

2. fade in 애니메이션

페이드인도 마찬가지로 setInterval 함수를 사용해서 투명도 값을 바꿔주면 된다. 단, 여기서 주의할 점은 element.style.opacity 값을 직접적으로 가감해서는 바꿀수가 없기 때문에 변수를 하나 선언한 뒤 변경한 변수를 opacity에 할당하도록 하자.

function fadeIn(){
    let op = 0;
    body.style.opacity = op;
    let id = setInterval(frame, 10);
    
    function frame(){
        if(body.style.opacity == 1){
            clearInterval(id);
        } else{
            op += 0.01;
            body.style.opacity = op;
        }
    }
}

이 역시 마찬가지로 투명도가 default값에 해당하는 1이 될때까지 0에서부터 서서히 증가하며 밝아진다.

github: https://github.com/ilmerry/ilmerry.github.io