[Android/java] Button Tween Animation(버튼 트윈) 만들기

안녕하세요 골드입니다.

오늘은 트윈 애니메이션에 대해서 작성하도록 하겠습니다.

 

트윈 애니메이션은 커졌다 작아졌다 하는 애니메이션을 말합니다.

상당히 많이 사용되는 기능입니다.

 

1. scale.xml 파일 생성

트윈 애니메이션을 위한 정보는 XML로 정의하거나 자바 코드에서 만들 수 있습니다.

XML 파일은 /res/anim 폴더 밑에 .xml 형식으로 작성해야 합니다.

anim 폴더 먼저 만들어보겠습니다.

res 폴더에서 New -> Android Resource Directory 를 클릭합니다.

드랍다운메뉴에서 anim을 선택하고 OK를 누릅니다.

(이름도 anim으로 자동 변경될 것입니다. 혹은 anim으로 변경합니다.)

 

여기서 이런 것들을 xml 파일로 만들어서 사용할 수 있습니다.

위치 이동 Translate

확대/축소 Scale

회전 Rotate

투명도 Alpha

 

xml의 장점은 한 번 작성하면 재사용이 가능하고 유지보수에 용이하다는 것입니다.

 

저는 scale을 조절하는 파일을 만들겠습니다.

anim 폴더 안에 scale.xml 파일을 생성합니다. 이름은 아무거나 상관없습니다.

다만, 확장자는 반드시 xml 이어야 합니다.

scale 조절을 위한 scale 태그를 작성합니다.

(태그 이름은 scale이어야 합니다. xml 파일이름과 상관 없습니다.)

 

duration은 ms(밀리 세컨드) 시간을 의미합니다. 1000 밀리 세컨드는 1초를 의미합니다.

pivotX, pivotY는 크기를 변경하기 위한 중심축의 정보입니다. 좌표값 또는 백분율로 표시할 수 있습니다.

 뷰의 기본 세팅 (0, 0)은 왼쪽 상단을 의미합니다. 50%, 50%은 정중앙을 의미합니다.

fromXScale, fromYScale은 시작 값입니다. 

1.0은 원래 Scale에 1배를 한 값으로 시작하겠다는 뜻입니다.

toXScale, toYScale은 끝 값입니다. 

2.0이기 때문에 Scale이 2배된 상태에서 끝나게 됩니다.

 

scale 태그를 글로 풀어서 쓰면 1초 동안 정중앙을 축으로 하여 두 배 커진다. 가 되겠습니다.

 

여기까지만 작성하면 1초 동안 뷰 객체가 두 배 커진 후에 부자연스럽게 원래 모습으로 돌아갑니다.

속성에서 원래 모습으로 돌아가지 않게 설정할 수도 있지만, 그렇게 되면 두 배 커진 버튼이 유지됩니다.

 

다른 해결 방법은 scale 애니메이션을 하나 더 만드는 것입니다.

set 태그 안에 두 개의 scale 태그를 작성합니다.

 

두 번째 scale 태그 안에 startOffset 속성은 1초 뒤에 시작한다는 뜻입니다.

나머지는 같습니다만,

toXScale, toYScale이 0.5인 이유는 1 -> 2 가 되었기 때문입니다.
다시 2 -> 1로 가기 위해 0.5로 설정합니다.

1버튼이 두 배 버튼이 되었으니 0.5배를 해줘야 1버튼으로 돌아갑니다.

 

2.MainActivity.class에 코드 작성하기

activity_main.xml 코드는 Empty Project로 만들 때 생성되는 TextView를

단순히 Button으로 바꿔주었습니다.

메인 액티비티 코드는 간단합니다.

버튼을 눌렀을때

우리가 만든 scale.xml 파일을 loadAnimation으로 참조하고

해당 뷰에 startAnimation으로 애니메이션을 시작하면 됩니다.

 

가상 디바이스로 실행해 보겠습니다.

 

여기까지 골드였습니다.

감사합니다.

 

참고자료 : Do it! 안드로이드 프로그래밍