트위터의 fave 애니메이션 - 즐겨찾기 버튼

평소 SNS을 하지 않다보니 눈치채지 못했는데 트위터의 fave 버튼의 애니메이션 효과가 특이하여 이를 검색하여 알아 보았습니다. 잘 정리된 곳을 발견하여 이를 번역하였습니다.

steps timing function을 steps 타이밍 기능으로 번역하고 있으나 문맥상 steps 타이밍 함수가 더 맞을지도 모르겠습니다.

트위터 fave 소개

트위터는 fave(즐겨찾기로 알려진)의 디자인을 새로운 애니메이션 효과를 적용하여 업데이트하였다. CSS 트랜지션(transition: 전환) 효과보다는 이미지의 모음을 이용한 애니메이션 효과가 중점이다. CSS 애니메이션 steps 타이밍 기능을 이용하여 애니메이션을 어떻게 재생성하는지에 대하여 아래에서 알아보자.

움직임의 착시

삽화가 마치 살아 움직이는 Zoetrope 효과와 유사하다. 요소 내부의 평면에 이미지들을 나열하여 비슷한 효과를 내게 된다.

데모

별 모양에 마우스를 올리면 애니메이션이 시작된다.

See the Pen twitter fave by Douglas Ham (@uzugoer) on CodePen.

이 예제에서는 이미지 모음을 만드는 것을 시작으로 애니메이션을 만들게 된다. 이 경우에 트위터의 fave 아이콘 애니메이션을 위한 이미지 세트를 사용한다.

이러한 프레임 애니메이션을 구현하기 위해서는, 한 줄에 이미지들을 배치해야한다.

twitter_fave.zip

위 파일을 다운로드하면 한 줄로 나열된 이미지를 얻을 수 있다. 이 이미지를 요소의 배경으로 배치하여 첫번째 프레임에서 마지막 프레임까지 트랜지션 효과를 얻을 수 있다.

steps() 타이밍 기능

대부분의 타이밍 기능은 시작점과 끝점사이를 부드럽게 만드는 트랜지션 애니메이션인 ease 또는 cubic-bezier 와 같다. steps 타이밍 기능은 이와는 다르다. 부드러운 트랜지션 효과대신에 트랜지션을 다수의 단계(steps)로 나누고, 각 단계 사이를 급격하게 이동한다.

HTML 설정은 아래와 같다(원하는 어떠한 요소를 사용해도 문제 될 것은 없다).

<section class="fave"></section>

배경 이미지

약간의 스타일을 추가하여 배경 이미지를 배치해 보자.

.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

배경의 위치를 이미지 모음의 끝으로 이동시킬 hover 상태를 추가한다.

.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

transition 선언에 유의해야 한다. 이 경우, 배경 속성을 steps 타이밍 기능을 이용해 2초 동안 트랜지션하도록 설정했다. steps 부분은 애니메이션이 55 프레임이기에 55 값을 부여했다.

이 효과는 요소 위로 마우스를 올릴때 55 단계에 걸쳐 트랜지션되어 이동된다는 것을 의미한다.

왜 gif를 사용하지 않았는가?

애니메이션 GIF는 잠재적으로 사용될 수 있지만, 이 경우에는 적합하지 않다. 애니메이션 GIF를 사용하게 되면 파일의 크기가 일반적으로 커지게 되고 프레임 속도를 제어하기 어렵다. CSS를 이용한 애니메이션은 일시 정지, 되감기, 또는 애니메이션의 다른 설정을 모든 부분에서 설정할 수 있다.

원문 : Twitter's "fave" animation