본문 바로가기
프로그래밍 놀이터/안드로이드, Java

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

by 돼지왕 왕돼지 2018. 3. 12.
반응형

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


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

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 만들기


-

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 파일을 넣고 로드해주면 끝!!




반응형

댓글