Animation - frame by frame

개요. 

frame by frame 애니메이션을 css를 통해서 구현해보자. 

 

frame by frame 애니메이션이란 장면별로 하나하나 움직임을 그려서 표현하는 쉘 애니메이션을 이야기한다. 

css 애니메이션으로 구현하기 위해서는 이미지 스프라이트를 사용해서 구현해야한다. 

 

긴~ 이미지

각 단락별로 연속되는 이미지를 가지고 만들 수 있는 애니메이션이다. 

 

구현하기

<div class="spaceship">
  <img src="./sprite_spaceship.png" />
</div>

 

애니메이션이 그려질 박스를 먼저 선언해준다. 해당 div 태그에 이미지를 넣어서 화면에 렌더링 시켜줄 계획이다. 

div 태그가 애니메이션 틀이라고 생각하면 되고 img 태그가 실제 이미지이다. 

 

.spaceship {
    width: 150px;
    height: 150px;

    overflow: hidden;
}

 

애니메이션의 틀이기 때문에 정사각형 형식으로 만들고 넘어가는 부분은 hidden으로 노출되지 않게 작업하였다. 

 

.spaceship {
    width: 150px;
    height: 150px;

    overflow: hidden;

    img {
      width: auto;
      height: 150px;
    }
}

 

이미지 역시 height를 꽉 채우고 해당 비율에 맞게 width를 설정하였다. 

 

@keyframes spaceship-ani {
    100% {
      transform: translateX(-2550px);
    }
}

.spaceship {
    width: 150px;
    height: 150px;

    overflow: hidden;

    img {
      width: auto;
      height: 150px;
      animation: spaceship-ani 1s infinite steps(17);
    }
}

 

마지막으로 애니메이션을 넣어주면 끝이다! 

 

이때 steps(17)이라는 특별해보이는 부분이 있는데, 앞서 이미지 단락의 수가 17개이고 애니메이션의 100%로 

진행시키기 위해서 17개의 단락으로 나눠서 애니메이션을 이동시킨다. 

 

steps라는 함수는 animation-timing-function에 있는 속성이다. 

 

속성이 없었다면 우리가 흔하게 알고 있는 전개 방식으로 애니메이션이 실행된다. 

하지만 이런 방식은 우리가 원하는 애니메이션이 아니고 steps 속성을 넣어주면 우리가 원하는 애니메이션이 된다.

 

 

이렇게 만든 애니메이션이 gif와는 어떤 차이가 있을까? 

 

먼저 gif는 완벽하게 배경을 투명하게 할 수 없다.

배경색을 마음대로 바꾸고 싶다면 설정하려는 모든 배경색에 해당하는 gif가 필요하고 투명 gif를 

사용하더라도 테두리에 일그러짐이 발생한다. 

 

또한 css로 컨트롤하기 때문에 필요하다면 반대로 애니메이션을 재생을 시킬 수 있다.