[안드로이드 어플 개발] 이동 애니메이션 (Translate Animation)
▣ 안드로이드 애니메이션 2 (이동) |
■ 지난번에는 투명애니메이션에 대해서 알아봤었는데요. [투명애니메이션] ◀
이번에는 두번째로 객체의 위치를 평면상에서 움직이는 "translate Animation" 대해서 알아보도록 하겠습니다.
■ 이번에 만들어볼 프로젝트에서는 중앙에 있던 로고가 오른쪽 아래쪽으로 일정한 시간동안 이동하도록 구현해 보도록 하겠습니다.
■ 먼저 이번 예제에서 사용할 'mark'라는 이름의 이미지를 준비해서 drawable 폴더에 넣고, res 폴더에 anim 폴더를 만들겠습니다. 이 anim폴더에는 애니메이션 xml 파일을 작성해서 넣을건데요.
안드로이드에서는 "anim" 폴더에 애니메이션에 관한 파일이 있어야 자동으로 인식을 하게 됩니다.
■ anim 폴더에 넣을 애니메이션 파일인 ani.xml 파일을 만들어 보도록 하겠습니다.
■ 그림처럼 anim폴더를 선택한 상태에서 [New ▶ AndroXML File]을 선택하면 다음과 같은 창이 나타나게 되는데요. 이동 애니메이션을 작성하기 위해서 "translate"를 선택하고, 파일 이름을 입력하고 Finish를 선택합니다.
■ Finish버튼을 클릭하면 다음과 같이 태그가 자동으로 완성되서 파일이 생성이 됩니다.
■ translate Animation 효과를 줄 수 있는 내용을 작성하도록 하겠습니다.
파일 내용을 살펴보면 "fromXDelta"는 X축의 시작점이고 " toXDelta"는 X축의 끝점입니다. 즉, 파일 내용은 x축으로 이미지 객체 크기의 "100%"만큼 , Y축으로는 "50%" 만큼 이동한다는 의미입니다. 오른쪽(X) 아래쪽(Y)으로 대각선 방향으로 움직이게 될것입니다. "startOffset"은 프로젝트가 시작되고 나서 Animation 이 실행되는 시간입니다. 프로젝트가 실행되면 2초후에 애니메이션이 시작을 할것입니다. duration은 4초동에 걸쳐서 실행이 된다는 의미인데요. 숫자를 바꿔가면서 실행을 해보면 이해가 더 빠를것입니다.
■ 다음은 activity_main.xml 파일을 먼저 살펴보겠습니다.
객체를 중앙에 위치하도록 gravity를 "center"로 하고, 배경을 하늘색 느낌이 나는 색으로 설정하고, 이미지뷰를 하나 배치해서 준비한 이미지를 넣어주고 있습니다.
■ 이제 액티비티 파일을 작성하겠습니다.
activity_main.xml에서 배치했던 이미지뷰를 찾아서 'image'라는 객체에 담고, 애니메이션 효과는 AnimationUtils() 메서드를 이용해서 위에서 작성했던 ani 파일을 이 클래스(this)에 호출하고 'animation'이라는 객체에 담고, startAnimation()메서드를 이용해서 실행을 시키고 있는 내용입니다.
■ 이 프로젝트를 실행을 해보면 다음과 같이 2초 후에 4초 동안에 걸쳐서 이미지가 오른쪽 아래쪽 대각선 방향으로 이동을 하게 됩니다.
■ 위쪽에서 XML파일을 만들때 그림을 보면 안드로이드 애니메이션 유형은 alpha(투명), rotate(회전), scale(크기), 이동(translate), 혼합(set) 등 다섯가지기 있는것을 확인할 수 있습니다. 투명과 이동에 대해서는 알아봤으니 나머지는 다음 포스팅에 이어서 계속 하도록 하겠습니다.