경로에 따라 움직이는 애니메이션 구현
Post

경로에 따라 움직이는 애니메이션 구현

들어가기

  • 주로 백오피스 개발을 담당하다가 팀에서 개발한 다른 제품의 랜딩페이지를 제작하게 되었다.
  • 디자이너님이 준비해 주신 예쁜 애니메이션들 중에 비행기가 날아가는 애니메이션이 있었다.
  • 정해진 경로대로 날아가는 애니메이션을 구현하기 위해 SVG 벡터 경로를 활용하기로 한다.
  • 선을 그려주는 SVG ARTISTA는 회사의 다른 동료 분께서 알려주셨다! 날아가는 비행기

선 라인대로 나타나는 애니메이션 그리기

  • 먼저 선을 svg 파일로 다운받는다.
  • SVG ARTISTA에서 svg 경로를 그린다. (혹은 벡터 그래픽 프로그램을 이용해서 선을 그린 후 SVG 포맷으로 익스포트 한다.)

비행기 선 따라 이동하기

  • svg파일의 path부분을 복사한다.
  • 처음 시작하는 좌표 부분을 M0,100 형태로 바꿔준다.
  • offset: path를 사용하여 이동시켜 준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
.object{
    offset: path('path 내용') auto;
    animation: moveto 5s ease;
}
@keyfreams moveto{
    0%{
        offset-distance: 0%
    }
    100%{
        offset-distance: 100%;
    }
}

Reference