안드로이드 스튜디오 애니메이션 적용 방법 kotlin

안녕하세요. 공돌이 입니다.

어플 (앱) 만들기를 진행하다 보면 간단한 애니메이션 효과를 추가하여 화면을 꾸미고 싶은 욕구가 마구 샘솟아 오릅니다. 단순히 이미지를 넣어서 숨겼다 보였다 하는 것은 지난 포스팅에서 visibility효과를 이용하면 간단히 처리할 수 있음을 보였습니다. 하지만 만약 빙글 빙글 돌리는 형태, 혹은 까딱 가딱 흔들리는 형태로 애니메이션 처리를 하고 싶을 때는 어떻게 해야 할까요? 아래 그림이 이번 포스팅의 결과입니다.

기존에는 이미지만 첨부해 왔습니다만, 이번에는 애니메이션을 보여야 하기에 gif로 파일을 작성하게 되었습니다. 보시는 것처럼 귀여운 캐릭터가 좌우로 흔들 거리는 모습을 보실 수 있습니다. 사실 이 애니메이션은 왼쪽 또는 우측으로 회전하는 애니메이션을 응용한 모습입니다. 즉 왼쪽으로 조금 회전시켰다가 다시 오른쪽으로 회전시켰습니다. 그리고 이 작업을 수초 동안 반복시키도록 명령을 입력하여 위와 같은 결과물을 얻을 수 있었습니다. 애니메이션의 동작을 특정 시간 동안 진행될 수 있도록 설정이 가능하기 때문에 유저에게 이 버튼을 눌러줘! 라고 표기하고 싶을 때도 동일한 방법을 응용하면 매우 좋습니다.

 

먼저 layout에 원하는 이미지, text, button을 준비합니다. 저는 imageView1이라는 id로 해당 캐릭터를 준비했습니다. 지금부터 진행할 두번째가 가장 핵심입니다. Animation의 명령어를 입력하는 부분입니다. 아래 그림처럼 res아래에 anim이라는 폴더를 만들어 주세요. 여기서 반드시 폴더명이 “anim” 이어야 합니다. 그리고, xml 파일을 새롭게 하나 생성해 주세요. 저는 rotation.xml이라는 명으로 만들었고, 이 부분은 원하시는 직관적인 이름으로 만드시면 됩니다.

rotation.xml로 제작한 파일안의 코드는 아래와 같습니다.

 

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.~~~~~~~~"

    android:interpolator = "@android:anim/linear_interpolator"

    >

    <rotate

        android:duration="1000"

        android:fromDegrees="-20" android:toDegrees="20"

        android:pivotX="50%"

        android:pivotY="50%"

        android:repeatMode="reverse"

        android:fillAfter="false"

        android:repeatCount="100"

        />

</set>

 

이렇게 입력해 주시면 모든 것의 준비가 완료된 것입니다. 위에 표기된 ~~은 기존에 쓰이던 주소 쓰시면 됩니다. 각각의 항목에 대해서 설명을 해 보겠습니다. 먼저 <rotate 라고 된 부분에 주목해 주세요. 이 부분이 바로 회전을 하겠다는 명령어입니다. 위에서부터 순차적으로 duration은 얼마나 긴 시간 동안 해당 animation을 수행할 것인가를 입력하는 곳입니다. 즉 매우 천천히 돌 것이냐, 아니면 매우 빠르게 돌 것이냐를 의미합니다. 시간을 짧게 하면 엄청난 속도로 돌아가고, 시간을 크게 주면 아주 천천히 캐릭터가 돌아가는 모습을 확인할 수 있습니다. 그 다음으로 fromDegress와 toDegrees가 있습니다. 단어 뜻 그대로 몇 도로 시작해서 몇 도로 끝낼 것인지를 표기하는 곳입니다. 저는 좌우로 까딱 까닥 하기를 원했기 때문에 -20에서 20으로 표기하였습니다. 만약 빙글빙글 돌리시기를 원한다면 0으로 시작해서 360도로 끝내면 되겠습니다. 그 다음은 pivotX와 pivotY 입니다. 50%로 설정하면 이미지를 기준으로 정 가운데가 중심이 됩니다. 즉 이미지 중심을 기준으로 이미지를 돌릴 것인지 아니면 X혹은 Y축 기준으로 중심을 옮겨서 돌릴 것인 것 설정이 가능합니다. gif 파일은 올리지 않았습니다. 직접 한번 바꿔 가시면서 해 보시면 이해가 확실히 되기 때문입니다.

 

마지막은 repeatMode입니다. 단어 뜻 그대로 해당 애니메이션을 반복할 것인가를 물어보는 부분입니다.저는 왼쪽으로 -20도 움직였다가 다시 0도 기준 20도 우측으로 움직이는 명령어를 위에서 작성했고, 다시 0도로 가서 -20도로 가야 합니다. 즉 반복을 하기 위해서는 -20 -> 0 -> 20 -> 0 -> -20 이렇게 다시 거꾸로 돌아가야 합니다. 따라서 repeatMode에 reverse라고 적용하여 진행하였습니다. 만약 360도 빙글 빙글 계속 돌려야 하는 경우는 0->360->0->360이기 때문에 restart라고 적어 주시면 계속 빙글빙글 돌게 됩니다. 마지막으로는 repeatCount입니다. 해당 애니메이션을 몇 번 반복하겠는가를 입력하는 부분입니다. 1번이면 1번 100번이면 100번. 숫자를 변경해 가면서 확인해 보시면 원하는 적절한 횟수를 확인하실 수 있습니다. 이제 모든 애니메이션 작업이 완료되었습니다. MainActivity.kt로 넘어가겠습니다. 아래가 실제 진행한 코드입니다.

 

override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val animation = AnimationUtils.loadAnimation(this, R.anim.rotation)

        imageView1.startAnimation(animation)

    }

 

먼저 animation 이라는 함수로 선언을 하면서 앞서 anim 폴더에 넣어둔 R.anim.rotation을 불러오는 작업을 진행합니다.즉 이후 코드에서는 animation이라는 단어만 사용하면 해당 animation을 몇 번이고 재사용이 가능합니다. 그리고, 애니메이션을 넣고 싶은 이미지, 텍스트, 버튼 등에 해당 animation을 입혀봅니다. imageView1.startAnimation(animation) startAnimation이라는 애니메이션을 시작하는 명령어를 쓰고 위에서 선언한 animation을 괄호 안에 써 주면 됩니다. 위에서 언급한 것처럼 animation을 선언했기 때문에 몇 번이고 재사용을 할 수 있습니다. 다만 해당 animation을 사용할 경우 모두 같은 타이밍에 움직이게 됩니다. 아래 그림처럼 말이죠. 코드는

 

imageView1.startAnimation(animation)

imageView2.startAnimation(animation)

 

이렇게 넣었고, 결과는 아래와 같습니다.

 

안드로이드 스튜디오에서 애니메이션을 간략하게 넣는 방법에 대해 공유했습니다. 해당 방법을 이용한다면 다양한 응용이 가능합니다. 예를 들어 터치를 하는 동안 움직이게 한다 거나 혹은 반대로 터치를 하면 멈추는 형태로 말이지요. 다음 포스팅에서는 X, Y 축으로 캐릭터가 이동하는 애니메이션에 대해서 포스팅해 보도록 하겠습니다.

도움이 되면 좋겠네요.

 

감사합니다.