JavaScript로 웹 애니메이션 효과 주기

1. 애니메이션

 

애니메이션은 반복적인 움직임의 처리입니다.

웹UI 애니메이션은 자바스크립트로도 가능하지만,

규칙적이고 비교적 단순한 방식으로 동작되는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현가능합니다.

 

뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다고 합니다.

특히 모바일웹에서는 CSS를 사용한 방법이 훨씬 더 빠릅니다.

 

2.FPS 

 

FPS(frame per second)는 1초에 화면에 표현할 수 있는 정지화면(frame)수 입니다.

매그러운 애니메이션은 보통 60fps입니다.

따라서 16.666초 간격으로 frame 생성이 필요한 셈이죠. (1000ms / 60fps = 16.6666ms)

 

앞서 말한 것처럼, 애니메이션은 CSS의 transition 속성으로 CSS속성을 변경하거나, 자바스크립트로 CSS속성을 변경할 수 있습니다.

 

결국

간단하고 규칙적인거는 -> CSS로 변경

세밀한 조작이 필요한 거 -> JavaScript로 변경

 

성능만 봐서는 대체로 CSS로 변경하는 것이 빠릅니다. 하지만 성능비교를 통해서 가능 빠른 방법을 찾는 과정이 필요하다

 

3. JavaScript 애니메이션

자바스크립트로 애니메이션을 구현하려면, 규칙적인 처리를 하도록 구현하면 됩니다.

다음과 같은 방법이 있습니다.

• setInterval
• setTimeout
• requestAnimationframe
• Animations API

 

3.1 setInterval()

<script>

        function fnc(){
            const interval = window.setInterval(() => {
            console.log('현재시각은', new Date());
        }
        ,1000);
        }
        
    </script>

 

문제점 : interval로 딱딱 정해놓았지만 그 사이에 다른 일이 들어오면(Mouse Click, Timer 등등) interval로 작업한게 비동기 작업이라 밀려서 나중에 실행된다. 그러면 딜레이가 되서 일정하지 않게 되 애니메이션이 끊기게 된다.

 

3.2 setTimeout : 지정된 시간에 한번만 호출한다.

재귀호출로 애니메이션 효과

 <script>
        let count = 0;
        function animate(){
            
            window.setTimeout (()=>{
                console.log('현재시각', new Date());
                count++;
                animate();
            },500);
        }
    </script>

장점: 먹히는게 없다. 중간에 있던 콜백함수가 누적이 되어 있던게 쌓여있다가 마지막에 실행 될 수 있다는 단점이 없다,

하지만 최적화 되어 있지 않다

 

3.3 requestAnimationFrame

 

setTimeout은 animation을 위한 최적화된 기능이라 보기는 어렵습니다.

animation주기를 16.6 미만으로 하는 경우 불필요한 frame 생성이 되는 등의 문제가 생깁니다.

그 대안으로 생긴 것이 바로 requestAnimationFrame입니다.

<script>
        var count = 0;
        var el = document.querySelector(".outside");
        el.style.left = "0px";

        function run(){
            if(count > 60){
                return;
               //el.style.left = "0px";
               //count = 0;
            }
                count = count + 1;
            el.style.left = parseInt(el.style.left) + count + "px";        
            requestAnimationFrame(run);
        }

        requestAnimationFrame(run);
    </script>