[카테고리:] JavaScript

웹에서 애니메이션을 구현하는 세번째 방식은 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를 통해 주기적으로 호출됩니다.

웹에서 애니메이션을 제공하는 방식 중 두번째는 Keyframe 개념으로 접근하는 것입니다. 이는 전체 애니메이션을 100%라고 할때 각 단계마다 애니메이션될 속성값을 지정해 주는 방식으로써 그 중간 화면은 자동으로 계산해 줍니다. 아래의 화면은 Key frame Animation 방식을 사용한 애니메이션에 대한 화면입니다.

[xyz-ihs snippet=”keyframe-Animation”]

위의 화면에 대한 예를 통해 키프레임 애니메이션을 정리해 보겠습니다.

가장 먼저 움직이는 노란 사각형에 대한 div에 대한 코드입니다.

이 div의 클래스는 box인데, 아직 크기와 색상과 같은 스타일이 지정되지 않은 상태이므로 이 box 클래스에 해당 스타일을 아래처럼 지정합니다.

    .box {
        width: 100px;
        height: 100px;
        background: #ffd800;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);

        animation-name: movingBox;
        animation-duration: 2300ms;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

2~5번가지의 코드가 div의 크기와 색상 그리고 그림자에 대한 스타일 지정입니다. 7~10번 코드는 키프레임 애니메이션에 대한 스타일입니다. 7번 코드는 구체적인 키프레임에 대한 아이디값이고, 8번은 애니메이션이 진행되는 시간을 2.3초로 지정했으며, 9번은 무한반복, 10번은 무한반복시 반복방향을 지정하는 코드입니다. 이제 7번에서 지정한 키프레임에 대한 아이디인 movingBox에 대한 정의는 다음과 같습니다.

@keyframes movingBox {
    0% {
        transform: translate(0, 0);
        opacity: 0.3;
    }

    25% {
        opacity: 0.9;
    }

    50% {
        transform: translate(400px, 0);
        opacity: 0.2;
    }

    100% {
        transform: translate(100px, 0);
        opacity: 0.8;
    }
}

코드를 살펴보면, 초기단계(0%)와 1/4지점(25%) 그리고 중간지점(50%) 및 끝지점(100%)의 상태에서의 위치와 투명도를 지정함으로써, 각 단계의 중간결과를 자동으로 계산하여 애니메이션이 이루어지도록 하고 있습니다.