요구사항
APNG로 버튼 클릭 효과 구현해 주세요!
예를 들면 이런 거
위 영상과 같이 바텀 내비게이션 버튼의 클릭 효과로 애니메이션이 들어가기 원했고 애니메이션은 앱에서 처리하지 않고 디자이너로부터 APNG를 받아 사용하기로 했다.
먼저 받은 APNG파일을 프로젝트의 Drawable에 넣고 이미지 뷰에 때려 넣은 뒤 빌드해 보았다.
역시나 안된다.
바로 깃허브로 달려가서 검색
"android apng"
https://github.com/penfeizhou/APNG4Android
최상단에 별 제일 많은 걸로 눌러보았다.
별 423개, 아파치 라이선스, 최근 6개월 안으로 릴리즈 있음, 컨트리뷰터도 있고 이슈도 종종 해결해서 업데이트해주고 있다.
펀페이조우... 이거다!
적용하기
WebP, APNG, Gif 등 어려 포맷을 지원한다.
난 APNG니까 요걸로 추가.
dependencies {
implementation 'com.github.penfeizhou.android.animation:apng:2.24.0'
}
Read me 중간에 보니 이런 게 적혀있다.
Notice Before Use!
Don't put APNG resources in your drawable or mipmap directory! During the process of release building of an Android app, the aapt tool will zip & modify the frame info of the APNG file, which will lead to an abnormal behavior when playing it. Thus, please put the APNG resources in raw or assets folder instead.
APNG 파일을 drawable이나 mipmap에 넣지 말고 raw나 assets 폴더에 넣으란다.
AAPT가 APNG파일을 자동으로 수정해서 오동작을 일으킨 수 있다고 한다!!
필자의 경우 assets에 json파일이 있는데 이거랑 분리하려고 assets 안에 apngs폴더를 하나 더 만들고 거기에 넣어줬다.
이제 이 파일을 가져오기 위해 AssetStreamLoader 객체를 생성한다.
두 번째 매개변수가 파일의 경로이다. apngs 폴더를 만들고 거기에 넣었기 때문에
"apngs/wheel.png"를 넣어줬다.
AssetStreamLoader assetLoader = new AssetStreamLoader(context, "apngs/sample.png");
이제 위의 로더 객체로 드로우어블 객체 생성
APNGDrawable apngDrawable = new APNGDrawable(assetLoader);
그런 다음 이미지뷰에 set 해준다.
imageView.setImageDrawable(apngDrawable);여기서 유의할 점은 setImageDrawable을 호출하면 애니메이션이 자동으로 동작한다.
필자의 경우 애니메이션이 너무 짧아 안 보이기 때문에 그냥 무시했다.
마지막으로 ImageView에 클릭 리스너를 등록하고 APNGDrawable의 start 함수를 호출해 주면 된다.
끝.