[android] png 기반 GIF 를 바탕으로 VectorDrawable 로 치환해 animation 만들기

[android] png 기반 GIF 를 바탕으로 VectorDrawable 로 치환해 animation 만들기

https://medium.com/google-developers/animation-jump-through-861f4f5b3de4#.tcugnrmsy

-

GIF 를 Photoshop 으로 열면 timeline view 에 animation frame 들이 나온다.

-

Sketch 라는 vector drawing tool 을 이용해서 path 를 잡고 SGV 로 export 를 한다.

몇몇 tool 은 자동으로 vector path 를 만들어 준다.

-

Mobile 단말에서는 SGV 를 fully 지원하지 못할 수 있기 때문에 simplified 된 버전이 안정적이다.

아래 사이트를 통해서 simplify 를 할 수 있다.

https://jakearchibald.github.io/svgomg/

-

AnimatedVectorDrawable ( 이하 AVD ) 을 아래 사이트를 통해 만들 수 있다.

https://romannurik.github.io/AndroidIconAnimator/

Timeline 을 이용하여, 첫번째 SGV 로부터 toValue 를 다음 SGV 의 fromValue 로 교체해주면,

쉽게 AVD 를 만들 수 있다.

아래는 사용방법에 대한 유튜브 비디오.

-

AVD 가 완성이 되었다면 Export 를 해주고, android 에 이 xml 파일을 넣고 로드해주면 끝!!

Android, AnimatedVectorDrawable, animation, animation frame, AVD, export, fromvalue, Gif, Mobile, Path, photoshop, png gif, sgv, sgv export, simplified sgv, sketch, timeline view, Tool, tovalue, vector drawing tool, vector path, vectordrawable, xml, [android] png 기반 GIF 를 바탕으로 VectorDrawable 로 치환해 animation 만들기