SVG 애니매이션을 도와주는 도구 - Chrome Animation Tool

Chrome Animation Tool

Chorme의 개발자 도구에서 애니메이션을 상세하게 볼 수 있는 기능이 있습니다.

해당 기능을 통해 코드 편집기에서 코드를 수정하지 않고, Chorme에서 쉽게 애니메이션 타이밍을 조절할 수 있습니다.

 

우선 크롬 개발자도구에서 애니메이션 탭을 열어줍니다.

애니메이션 탭을 활용하기 위해서는 탭이 열린 채로 페이지가 로드되어야 합니다.

중간에 열게 되면 비어있는 탭이 나타나는 경우가 있는데 이때 새로고침하여 애니메이션 정보를 불러올 수 있습니다.

생성된 애니메이션 썸네일 바를 클릭하여 애니메이션 상세 정보를 볼 수 있습니다.

- 색상이 진한 부분 : 애니메이션

- 색상이 연한 부분 : 반복되는 애니메이션

- 색상이 채워진 원 : 애니메이션의 시작/끝

- 비어있는 원 : 애니메이션 중간의 키프레임

 

애니메이션 탭의 상단에서 재생 여부, 재생 속도(1배, 0.25배, 0.1배)를 조절할 수 있습니다.

애니메이션 영역을 마우스로 클릭하고 수평으로 끌어 애니메이션 위치를 변경할 수도 있습니다.

원을 클릭하고 좌우로 끌어 애니메이션 실행시간을 변경할 수도 있습니다.

 

예제 출처

https://codepen.io/fixcl/pen/eYpmYj

Sovog 404 page