안드로이드와 벡터, 벡터 애니메이션

안드로이드 SDK21(롤리팝) 부터는 벡터 이미지를 지원한다.

기존에는 손실이 적은 PNG나 BMP형태로 해상도마다 다른 사이즈로 저장해 사용했지만, 벡터를 사용하면 해상도에 따른 리소스 파편화가 없어지고, 용량또한 작아진다.

거기에 path방식이다보니, path 변환 애니메이션도 가능해져, 아이콘같은 애니메이션을 만들기도 쉬워졌다.

그러나, 안드로이드가 벡터 SVG파일을 그대로 사용가능하지는 않다.
XML파일인 VectorDrawable을 지원하는데,

http://inloop.github.io/svg2android/
이 사이트가 SVG에서 VectorDrawable로 변환하는것을 지원해준다.
직접 써보니 패스, 스트로크, 색상 등 모든 속성이 손상없이 그대로 되는듯 하다.

사이트 메인화면

SVG파일을 끌어넣으면 된다.

파일여러개를 넣으면 일괄변환해 압축파일로 저장한다.

파일 하나만 넣었을때

아래에 몇가지 설정을 반영할수 있다.

xml코드를 그대로 복사해서 drawable에 추가하면 된다.

애니메이션은 이 벡터를 기반으로 path변환(흔히 morph, shape tween), 투명도, 크기, 회전, 이동을 지원한다.

애니메이션 관련으로는 ObjectAnimator, AnimatedVector(Drawable), Animatable등을 안드로이드에서 제공하는데 같은 애니메이션도 각 객체에따라 사용방법이나 특징이 조금씩 달라진다.

ObjectAnimator은 벡터에서 단일 애니메이션을 적용시키는 객체이고, AnimatedVector(Drawble)은 벡터 이미지와 이 ObjectAnimator을 모아 만드는 애니메이션이 가능한 벡터 객체가 된다.

java나 xml상에서는 텍스트로 애니메이션을 가늠하기 어렵기 때문에, 별도의 애니메이션 제작 툴이 필요하기 마련인데,
https://shapeshifter.design/

여기서 안드로이드 벡터 애니메이션 편집을 지원한다.

알파값 변화를 부여하는 장면

path모핑을 위해 꼭짓점을 맵핑하는 화면. 자동맵핑이 있지만 버그가 있어 수동으로 꼭 해줘야한다.

프로젝트 저장기능도 있고, svg, vector drawable을 불러올 수 있다.
타임라인 기반으로 시간과 변화값을 조절 할 수 있고
path 모핑을 위한 고정점 연결 도구도 있다.
(직접 써보니, 그룹을 만들어 애니메이션을 넣으려하면 멈주고, 가끔 그냥 멈추기도 한다. 장시간 작업한다면 프로젝트 저장을 주기적으로 하자)

하지만, 레이어나 키프레임같은 기능이 없어 나중에 보일 객체는 투명도를 0으로 만들었다가 보여주어야 하고, 객체의 위치를 직접 옮기지 못하므로 일러스트레이터 같은 벡터 편집프로그램을 이용해 알맞게 조절한뒤 불러와야한다.

그래도 복잡한 애니메이션을 이 툴을 이용해 만들 수 있고, inner xml인 aapt형태로 저장을 해주어 vector, objectanimator, animated-vector로 파일을 쪼개지않고 하나의 파일로 깔끔하게 추가 할 수 있다.

aapt는 현재 안드로이드스튜디오에서는 인식을 못해 빨간줄이 나오지만, 빌드하는데는 문제가 없다.