제대로 ‘잘’ 만들기

사용자 삽입 이미지

기본적으로는 매우 당연한 사실인데.. 오랜 기다림과 과정 속에서 이러한 기본적인 것이 왜곡되어 잊어지는 경우가 있는 것 같다. 다른 새로운 도전과 기회의 탐닉도 필요할테지만(과연, 그럴까?).. 최소한 이러한 기본적인 생각을 기반으로 무엇이든 해야 하지 않겠는가. 다 필요없다. 오직 ‘제대로’ 만들어 보자. 사실 ‘제대로’ 만들기 보다 더 어려운 것이 있을까? ‘제대로’ 만들지 못하다보니.. 이런 저런 잡념과 샛길이 생기지 않나 싶다. 그래, 제대로 ‘잘’ 만들어 보자 ㅡ !

웹 애니메이션 3/3 ㅡ requestAnimationFrame 활용 방식

웹에서 애니메이션을 구현하는 세번째 방식은 javascript 코드를 사용해 애니메이션될 객체의 속성의 변경하는 것으로써 requestAnimationFrame API를 이용해 속도를 향상시키는 방식입니다. requestAnimationFrame API가 제공되기 이전에는 타이머를 사용하였으나, 이 타이머는 불확실하고 느리다는 단점이 있어 현재는 사용하지 않습니다. (아.. 한게임 하고 왔더니 머리가 띵… 하네.. @_@;) 아래는 이 requestAnimationFrame 함수를 이용한 애니메이션에 대한 예입니다.

[xyz-ihs snippet=”requestAnimation”]

SVG를 사용했고 path를 이용해 도형을 구성하였습니다. 도형의 선형 대쉬 스타일인 strokeDashOffset 속성을 주기적으로 변경함으로써 매치 행군하는 벌레 애니메이션을 구현할 수 있습니다. 이 예에 대한 코드를 살펴 보겠습니다.

먼저 svg와 도형에 대한 path 정의입니다.


    

path에 chain_st라는 클래스가 지정되어 있습니다. chain_st 클래스는 다음과 같습니다.

.chain_st {
    stroke-width: 1;
    stroke: #f00;
fill: transparent;
}     

svg {
    width:100%;
} 

단순히 path의 선굵기과 색상, 그리고 채움색은 투명으로 지정하고 있습니다. 덧붙여 svg의 폭을 현제 부모 너비를 꽉 채우도록 7~9번 코드에서 지정하고 있습니다.

이제 애니메이션 코드인데, 아래와 같습니다.

var p = document.querySelector('.chain_st'),
offset = 5;

var offsetMe = function () {
    if (offset < 0) offset = 5;
    p.style.strokeDashoffset = offset;
    offset--;

    requestAnimationFrame(offsetMe);
}

offsetMe();

offsetMe 함수를 호출할때마다 strokeDashOffset의 값을 변경하고 있는 6번 코드를 주목하기 바랍니다. 이 offsetMe 함수는 requestAnimationFrame API를 통해 주기적으로 호출됩니다.