티스토리 뷰

study/Android

[Android] Animation 정리

koreaparks 2013. 12. 28. 02:09

애니메이션 추가설명 : http://www.tipssoft.com/bulletin/board.php?bo_table=FAQ&wr_id=1112


안드로이드 애니메이션에 관해 정리가 잘 된 블로그에서 퍼온 것 임을 밝힙니다.

출처 : http://blog.naver.com/PostView.nhn?blogId=space5084&logNo=60150456069


여러 애니메이션 효과들에 대해 정리를 해봤습니다.

주로 위아래로 이동하거나 좌우로 이동하는 정도의 애니메이션만 써왔는데

다른 효과들도 좋은 것들이 많은 것 같아 책을 참조하여 정리해봅니다.

 

 

1뷰가 기울어지는 효과를 주는 애니메이션.

기울어지는 효과는 처음봤는데 별로 쓸일이 없지 싶은 효과지만 일단 있다는 것 정도만 알고가자.

 

class SkewAnim extends Animation { public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); setDuration(3000); // 지속시간 setInterpolator(new LinearInterpolator()); // 일정하게 } protected void applyTransformation(float interpolatedTime, Transformation t) { Matrix matrix = t.getMatrix(); matrix.setSkew(2.0f * interpolatedTime, 0); // 기울기 * 시간 } }

 

 

사용법은 

1 view.startAnimation(new SkewAnim());

 

 

 

2뷰가 회전하는 효과를 주는 애니메이션

camera객체를 사용하여 뷰를 바라보는 시점을 변화시킴으로써 회전하는 효과를 줄수 있다.

여기서 camera객체는 android.graphics에 소속된 camera 객체이다

 

class CameraAnim extends Animation { float cx, cy; public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); cx = width/2; // 좌표를 뷰의 중앙으로 지정 cy = height/2; setDuration(3000); setInterpolator(new LinearInterpolator()); } protected void applyTransformation(float interpolatedTime, Transformation t) { Camera cam = new Camera(); /** * 360도 * 시간 - 시간이 0~1이므로 점진적으로 360도 회전 */ cam.rotateX(360 * interpolatedTime); cam.rotateY(360 * interpolatedTime); cam.rotateZ(360 * interpolatedTime); Matrix matrix = t.getMatrix(); cam.getMatrix(matrix); // 회전 중심을 이미지 중심으로 하기 위해 카메라를 회전하기 전 중심을 matrix.preTranslate(-cx, -cy); // 원점으로 옮기고 matrix.postTranslate(cx, cy); // 회전 후 다시 원래 위치 } }

 

 

xml 을 통해 애니메이션 정의

 

먼저 한가지 속성을 보고 가겠습니다.

android:interpolator

미리 정의된 안드로이드 애니메이션의 설정을 할수 있습니다.

속성값으로는


linear_interpolator : 일정하게

accelerate_interpolator : 점점 빠르게

decelerate_interpolator : 점점 느리게

accelerate_decelerate_interpolator : 위의 둘을 동시에

anticipate_interpolator : 시작위치에서 조금 뒤로 이동햇다가 이동

overshoot_interpolator : 도착위치를 조금 지나쳣다가 도착위치로 이동

anticipate_overshoot_interpolator : 위의 둘을 동시에

bounce_interpolator : 도착위치에서 튕김

cycle_interpolator : 반복

 

해당 속성값을 어떤식으로 주느냐에 따라서도 보기 좋은 애니메이션 효과를 적용할 수 있습니다.

 

3. translate - 이동 애니메이션 ( 시작, 끝, 지속시간 등을 지정 )

위치 좌표는 정수를 쓰면 절대좌표, %를 쓰면 자기기준, %p를 쓰면 부모기준

 

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/bounce_interpolator"> <translate android:fromXDelta="0" android:toYDelta="100%" android:duration="3000"/> </set>


4. rotate - 회전 애니메이션 camera를 사용한 회전과는 약간 다르다 ( 회전 각도, 기준점등을 지정 )

 

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/bounce_interpolator"> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="3000"/> </set>

 

5. scale - 확대/축소 애니메이션 ( 크기, 기준점 등을 지정 )

크기는 0.0~1.0까지 (0%~100%)

 

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/bounce_interpolator"> <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="3000"/> </set>

 

 

6. alpha - 투명도 애니메이션 ( 알파값 지정 0.0~1.0 )

 

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:repeatMode="reverse" android:repeatCount="1" android:duration="3000"/> </set>

 

 

참고로 여러개의 효과를 같이 쓰려면 하나의 set안에 중첩해서 쓰면 됩니다.

 

 

7. layoutAnimation 

- 앞의 애니메이션들은 트윈 애니메이션으로 적용되는 대상이 뷰였지만, 레이아웃 애니메이션은

ViewGroup으로부터 파생되는 레이아웃에 대해 적용되며 레이아웃내의 개별항목에 대해 적용됩니다.

 

<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="50%" android:animationOrder="reverse" android:animation="@anim/rotate" />

 

delay는 각각의 애니메이션에 대한 startOffset이라고 생각하면 될것 같습니다.

animationOrder는 애니메이션 적용 순서이다. random으로 하면 무작위로 수행

animation은 적용할 애니메이션

 

적용하는 방법은 테스트용으로 listView를 만들고 아래의 속성을 주면 된다.

 

1 android:layoutAnimation="@anim/layoutani"

 

간단히 테스트를 해본 결과는 애니메이션 도중에 listView를 스크롤하여 내리면 좀 엉망으로 나오는 듯 했다.

한화면만을 구성하는 리스트일때정도만 쓸만할듯. 아니면 해결방법이 있을려나...



아무튼 다른 애니메이션효과들이 더 있을지는 모르나 제가 알기로는 이정도의 효과라면

원하는 애니메이션 효과는 다 줄수 있을 것 같습니다.



댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday