본문 바로가기
Android 개발/android :: 공부

[Android Animation] 안드로이드 애니메이션 기본 사용법 (트윈 애니메이션)

by 독학하는 1인 개발자 2020. 5. 22.

안드로이드 개발 공부

 

Android Animation

 

안드로이드 애니메이션 기본 사용법

 

트윈 애니메이션 (Tween Animation)

 

 

 

 

 

 

1. 요약

1
2
3
4
5
6
7
8
9
10
11
// 1. 변수 선언
Animation anim_test; // 애니메이션 파일을 할당할 변수
Button btn_test; // 버튼을 할당할 변수
 
 
// 2. 변수 할당
anim_test = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.anim_test);
btn_test = findViewById(R.id.btn_test)
 
// 3. 애니메이션 실행
btn_test.startAnimation(anim_test);
cs

 

 

*애니메이션 실행 메소드

변수명.startAnimation(지정 애니메이션)

 

 

 

 

2. 정리

 

트윈 애니메이션이란?

XML로 정의되는 애니메이션으로,

간단히 회전, 페이딩, 이동, 확장과 같은 변환을 진행한다.

 

 

가장 쉽고 간단히 사용하는 애니메이션이다.

 

 

트윈 애니메이션을 구현하기 위해서는

크게 두 가지가 필요하다.

 

- 애니메이션 파일

- 애니메이션을 적용할 리소스

 

 

예를 들어,

버튼을 눌렀을 때

버튼이 확대되는 애니메이션을 구현하고자 한다면,

 

확대 애니메이션 파일이 필요하고,

버튼이 필요한 것이다.

 

 

 

1) 리소스 준비

 

(1) 애니메이션 리소스

 

① [res] 폴더 하에 [anim] 폴더를 만든다.

- 직접 폴더를 만들어도 되고,

- [res]폴더에서 우클릭하여

 [new] - [android resource directory]를 눌러서

 Resource type을 맨 위에 있는 anim으로 선택한 후 OK를 눌러도 된다.

 

 

② [anim] 폴더에서 우클릭하여

[new] - [animation resource file]을 눌러서

File name만 원하는 대로 쓰고 OK를 누르면 된다.

 

 

생성된 모습

 

파일 내부

 

이제 여기다가 원하는 애니메이션 코드를 넣어야 한다.

 

 

예를 들어 1초 동안 한 바퀴 도는 애니메이션을 구현해보자.

 

anim_test.xml

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="1000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360">
</rotate>
cs

 

rotate : 회전 애니메이션

duration : 실행 시간 (1000 = 1초)

pivotX : X축 중심점

pivotY : Y축 중심점

fromDegrees : 시작 각도 (0: 원본 모습에서 시작)

toDegrees : 끝나는 각도 (360: 360도까지 회전)

 

 

 

 

 

(2) 애니메이션을 적용할 위젯

예를 들어 Button에다가 적용한다고 치자.

그럼 해당 xml 파일에 버튼을 만들어 준다.

 

id는 임의로 btn_test로 정했다고 치자.

 

main.xml

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button android:id="@+id/btn_test"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</FrameLayout>
cs

 

이제 애니메이션을 실행해줄 일만 남았다.

 

 

 

 

2) 애니메이션 실행하기

 

생성한 animation 파일 이름이 "anim_test"라고 치자

 

그럼 다음과 같이 코드를 작성하면 된다.

 

 

(1) 리소스 할당

 

우선 애니메이션 리소스를 할당해주고,

Animation anim_test;

anim_test = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.anim_test);

 

 

애니메이션을 적용할 리소스를 할당해준다.

Button btn_test;

btn_test = findViewById(R.id.btn_test);

 

 

(2) 애니메이션 실행

원하는 위치에서 startAnimation() 메소드를 사용하면 된다.

 

btn_test.startAnimation(anim_test);

 

 

버튼을 클릭했을 때 애니메이션이 실행되게 하려면

1
2
3
4
5
6
7
// 버튼 누르면 애니메이션 실행
btn_test.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        btn_test.startAnimation(anim_test);
    }
});
cs

 

 

 

 

 

 

코드 전체 보기

 

MainActivity

 

 

 

댓글