[안드로이드] 안드로이드 애니메이션 효과 및 기능

* 안드로이드 애니메이션 효과 및 기능

 

안녕하세요 송군함대입니다~!^-^/

이번 포스팅은 안드로이드에서 사용되는 애니매이션 효과를 사용하는 방법을 알아볼까 합니다~!

어려울 거라 생각했지만, 막상 구현해보니 그리 어렵지는 않더라구요~!

다같이 어떤 기능들이 있으며, 간단한 예제를 통해 구현해보도록 해보아요~!

 

 

* 애니메이션 효과

: 안드로이드는 뷰의 간단한 변형을 줄 수 있는 애니메이션 처리를 지원한다. 이는 레이아웃 애니메이션과 각 구성요소의 애니메이션으로 나눌 수 있다.

 

 

* 애니메이션 종류

: 종류는 아래와 같으며, () 는 클래스명으로 android.view.animation.Animation 의 하위 클래스이다. Animation 객체를 상속받아 애니메이션 효과를 구현할 수 있다.

 

- 투명도 변환(AlphaAnimation)

- 회전(RatateAnimation)

- 크기 변환(ScaleAnimation)

- 위치 이동(TranslateAnimate)

 

 

* 애니메이션 정의(xml)

: 애니메이션 기능을 xml로 정의하여, 해당 xml 을 호출하여 애니메이션 기능을 구현할 수 있다.

 xml 파일은 프로젝트 내의 res/anim/ 폴더 내에 정의되어야 한다.

 

 

* 애니메이션 종류별 속성

종류	속성값	내용
alpha(투명도)	fromAlpha toAlpha ...	fromAlpha -> toAlpha 투명도를 변경 ex) fromAlpha="1.0" / toAlpha="0.0" (점점 투명해짐) fromAlpha="0.0" / fromAlpha="1.0" (점점 나타남)
scale(크기)	fromXScale toXScale fromYScale toYScale pivotX pivotY fillAfter fillBefore ...	fromXScale -> toXScale 좌우 크기 변경 fromYScale -> toYScale 상하 크기 변경 ex) fromXScale="1.0" / toXScale="1.4" / fromYScale="1.0" / toYScale="1.4" (1.0 -> 1.4 상하좌우 크기 변경)
rotate(회전)	fromDegrees toDegrees toYScale pivotX pivotY startOffset ...	fromDegrees -> toDegrees 각도 회전 ex) fromDegrees="90" / toDegrees="0" (90도 -> 0도 회전) fromDegrees="0" / toDegrees="90" (0도 -> 90도 회전)
translate(이동)	toXDelta toYDelta ...	fromXDelta -> toXDelta 좌우로 이동 fromYDelta -> toYDelta 상하로 이동 ex) fromXDelta="100%p" / toXDelta="0" (좌->우 이동) fromYDelta="100%p" / toYDelta="0" (상->하 이동)

 

 

* 애니메이션 구현 방법

1. xml 파일을 이용한 구현(/res/anim/)

1) 먼저 애니메이션을 구현할 xml 파일을 생성한다.

예문) /res/anim/alpha_ani.xml 파일 생성 => 투명도 효과를 사용하는 alpha 를 선언 <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_interpolator"     android:fromAlpha="0.0"     android:toAlpha="1.0"     android:duration="5000"/>

 

2) Animation 객체를 선언하고 AnimationUtils.loadAnimation() 함수를 통해 위의 xml 파일을 할당해준다.

예문) Animation alphaAni 선언 및 위의 xml 파일을 할당 => 투명도 효과를 사용하는 alpha Animation 선언 private Animation alphaAni; alphaAni = AnimationUtils.loadAnimation(this, R.anim.alpha_ani);

 

3) Animation 효과를 적용할 객체에 startAnimaion() 함수를 통해 기능을 부여한다.

예문) 이미지뷰를 선언하고 해당 이미지뷰에 Animation 효과를 할당 private ImageView imgLava; imgLava.startAnimation(alphaAni);

 

 

2. 소스 코드를 이용한 구현

1) 사용할 애니메이션 객체를 선언한다.

예문) 투명도 효과인 AlphaAnimation 객체 선언 Animation ani01 = new AlphaAnimation(0.0f, 1.0f); ani01.setDuration(5000);

 

2) 애니메이션 효과를 적용할 객체에 setAnimation() 함수를 통해 기능을 부여한다.

예문) 이미지뷰를 선언하고 이미지 효과 부여 ImageView imgLava = (ImageView) findViewById(R.id.imgLava); imgLava.setAnimation(ani01);

 

 

3. 여러 개의 애니메이션 효과 구현

: 애니메이션 효과를 구현할 때 한가지만이 아닌 여러 개의 애니메이션 효과를 주고 싶을 경우가 있을 것이다. 이때 사용하는 방법으로 set 을 이용한 방법이 있다. 해당 방법도 xml 파일과 소스 코드에서 모두 구현이 가능하다.

1) xml 파일 이용

: xml파일을 이용할 경우 <set></set> 태그를 통해 공통의 설정값은 set 태그 내에 넣고 애니메이션 테그를 세부 탭으로 넣어 사용할 수 있다. 아래 예문을 통해 확인해보면 그리 어렵지 않게 구현이 가능한 것을 확인할 수 있다.

예문) 회전과 크기 변경의 애니메이션 효과를 동시에 사용 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_interpolator"     android:duration="5000">        <rotate         android:fromDegrees="0"         android:toDegrees="90"         android:fillAfter="true"         android:startOffset="800"/>           <scale      android:fromXScale="1.0"      android:toXScale="1.4"      android:fromYScale="1.0"      android:toYScale="1.4"      android:pivotX="50%"      android:pivotY="50%"      android:fillAfter="false"      />     </set>

 

2) 소스 코드를 이용

: 소스의 경우에도 마찬가지로 AnimationSet 객체를 선언하고 사용할 애니메이션을 선언하여 addAnimation() 함수를 통해 여러 애니메이션을 적용할 수 있다. 말로 설명하는 것은 어려워 보이니 아래 예문을 통해 쉽게 알아보도록 하자~!

예문) AlphaAnimation 과 RotateAnimation 효과를 일괄 적용 ImageView imgLava = (ImageView) findViewById(R.id.imgLava);   AnimationSet set = new AnimationSet(true); set.setInterpolator(new AccelerateInterpolator());   Animation ani01 = new AlphaAnimation(0.0f, 1.0f); ani01.setDuration(5000);   Animation ani02 = new RotateAnimation(0, 90); ani02.setDuration(5000);   set.addAnimation(ani01); set.addAnimation(ani02); imgLava.setAnimation(set);