1. 0. 그래픽과 애니메이션 2 안드로이드 플랫폼은 다음 세 종류의 그래픽 애니메이션을 기본적으로 지원한다 . 1. 애니메이티드 GIF(Animated GIF) 이미지 애니메이티드 GIF 애니메이션의 여러 프레임 이미지들은 하나의 GIF 파일을 저장한 것임 . 애니메이티드 GIF 파일을 다른 비트맵 표시물 자원과 마찬가지 방식으로 화면에 표시하면 안드로이드 운영체제가 애니메이션을 수행시켜 줌 . 2. 프레임별 애니메이션 프레임별 애니메이션은 프레임별 이미지들을 개발자가 모두 제공해야 함 . 3. 트위닝 애니메이션 트위닝 애니메이션은 이미지의 위치와 형태를 코드에서 변환함으로써 애니메이션 효과를 냄 .

2. 1. 애니메이션 1-1. 프레임별 애니메이션 프레임별 애니메이션 (frame-by-animation) 은 조금씩 다른 이미지들을 차례로 빠르게 화면에 표시함으로써 사물이 움직이는 듯한 환상을 만들어 내는 것이다 . 페이지를 빠르게 넘기면 그림이 움직이는 효과의 디지털 버전이라고 생각하면 된다 . 애니메이티드 GIF 도 본질적으로는 프레임별 애니메이션에 해당한다 . 이런 프레임별 애니메이션은 코드로 정의하기에는 너무 복잡한 그래픽 변형들에 적합하다 . 애니메이션의 매끄러움은 프레임 이미지들의 수와 그 이미지들의 교체 빠르기에 의해 결정된다 . 지니는 프레임들에서 변하지 않지만 , 선물 상자들은 그 위치가 조금씩 다르다 . 이 지니 파일들을 이용해서 수행하는 코드를 작성해보자 . 애니메이션의 조작을 위해서 사용할 패키지 – android.graphics.drawable.AnimationDrawable;; 1. 애니메이션이 계속해서 반복되도록 해주는 객체명 .setOneShot() 메소드 (true – 한번만 / false – 반복 ) 2. 애니메이션을 시작하게 해주는 객체명 .start() 메소드 3. 애니메이션을 멈추게 하는 객체명 .stop() 메소드 프레임 애니메이션 구현방법 (1) AnimationDrawable 과 ImageView 위젯을 이용해서 애니메이션을 수행 (2) ImageSwitcher 위젯에 프레임 이미지들을 비트맵 자원으로서 추가하고 코드에서 타이머를 이용해 애니메이션 효과를 얻을 수 있음 .

3. 1. 애니메이션 1-1. 프레임별 애니메이션 ( 실습 1)

4. 1. 애니메이션 1-1. 프레임별 애니메이션 ( 실습 2) ImageSwitcher 위젯에 프레임 이미지들을 비트맵 자원으로서 추가하고 코드에서 타이머를 이용해 애니메이션 효과를 얻을 수 있음 . 참고코드를 타이핑 하기 보단 붙여넣기로 수행해 봅시다 .

6. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 개념 ) 자원 파일에 정의 된 애니메이션을 코드에서 불러올 때에는 보조 클래스 AnimationUtils 를 사용한다 . 다음은 animationResourceID 에서 불러온 애니메이션을 green_rect 을 표시하는 ImageViewForTweening 에 적용하는 예이다 . 응용 프로그램이 애니메이션의 시작이나 종료 , 반복 같은 애니메이션 사건들에 반응하도록 만들 수도 있다 . 그러기 위해선 s AnimationListener 인터페이스의 적절한 콜백 메서드들을 구현해야 한다 .

7. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 이론 ) - 1. AlphaAnimation( 투명도 변경 ) 알파 변환을 이용해서 애니메이션 투명도를 바꿀 수 있다 . 알파 변환은 대상을 서서히 보이게 보이지 않게 하거나 페이드인 / 페이드 아웃 여러 객체들을 화면에 겹치고자 할 때 유용하다 . 알파 값은 0.0( 완전 투명 – 안보임 ) ~ 1.0( 완전 불투명 – 보임 ) 지정 가능하다 . 알파 애니메이션의 주요 속성으로는 시작 투명도 fromAlpha 와 종료 투명도 toAlpha 가 있다 . 다음은 대상을 5 초간 “페이드 인” 하는 ( 완전 투명에서 완전 불투명으로 ) 투명도 변경 애니메이션을 정의하는 XML 자원 파일 . <alpha android:fromAlpha=“0.0” android:toAlpha=“1.0” android:duration=“5000”> </alpha> 코드에서는 android.view.animation 패키지의 AlphaAnimation 클래스를 이용해서 이와 동일한 애니메이션을 만들 수 있다 .

8. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 1) - 1. AlphaAnimation( 투명도 변경 -1) /drawable/green_rect.xml /anim/transparency.xml ① ② ③

9. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 1) - 1. AlphaAnimation( 투명도 변경 -2) ① ②

10. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 이론 ) - 2. Scale Animation( 비례 변경 ) 비례 변환은 대상을 수직이나 수평으로 늘리거나 줄이는 것 . 비례 변환의 정도는 대상의 원래 길이 ( 너비 혹은 높이 ) 에 대한 비율로 설정 1.0 은 100%, 0.5 는 50% 를 의미 수평과 수직 비율을 각각 다르게 설정하는 것이 가능하며 , 대상의 종횡 비를 유지하려면 같게 설정해줘야 한다 . 설정해줘야 할 속성은 총 4 가지이며 , 비례변환에서도 변환의 중심축 x, y 를 설정할 수 있다 . 애니메이션 시작 비율 (fromXScale, fromYScale) 애니메이션 종료 비율 (toXScale, toYScale) 다음은 대상의 중심을 축으로 해서 5 초간 대상의 크기를 두배로 늘리는 비례 변환 애니메이션을 정의하는 XML 부분이다 . <scale android:pivotX=“50%” android:pivotY=“50%” android:fromXScale=“1.0” android:fromYScale=“1.0” android:toXScale=“2.0” android:toYScale=“2.0” android:duration=“5000” /> 코드에서는 android.view.animation 패키지의 ScaleAnimation 클래스를 이용해서 이와 동일한 애니메이션을 만들 수 있음 .

11. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 1) - 2. Scale Animation( 비례 변경 ) ① ③ ② /anim/grow.xml ④

12. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 이론 ) - 3. Translate( 이동 ) 이동 변환은 말 그대로 대상을 이동하는 것임 . 이동 변환을 위해서는 대상의 위치 변화를 정의하여야 한다 . 구체적으로 대상의 현재 위치에 상대적인 시작 위치와 현재 위치 에서 상대적인 목표 위치를 지정해야 한다 . 상대적인 시작 위치 (fromXDelta, fromYDelta) 상대적인 목표 위치 (toXDelta, toYDelta) 다음은 5 초간 대상을 Y 축을 따라 위쪽으로 ( 음의 방향 ) 100 픽셀 이동하는 변환을 정의한 XML 부분임 . fillAfter 를 true 로 설정하면 대상이 다시 원래의 위치로 돌아오지 않는다 . <translate android:toYDelta=“-100” android:fillAfter=“true” android:duration=“2500” /> 코드에서는 android.view.animation 패키지의 TranslateAnimation 클래스를 이용해서 이와 동일한 애니메이션을 만들 수 있다 .

13. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 1) - Translate( 이동 ) ① ③ ② /anim/translate_position.xml ③ ④

14. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 이론 ) - 4. Rotate Animation( 회 전 ) 회전 변환은 한 점을 중심으로 대상을 시계 방향 또는 반 시계 방향으로 돌리는 것이다 . 회전의 주요 속성은 시작 각도 fromDegrees 와 종료 각도 toDegrees 이다 . 회전 방향은 이 각도에 의해 암묵적으로 결정된다 . 예를 들어 대상 객체를 한 바퀴 돌린다고 할 때 , fromDegrees 를 0 도로 , toDegrees 를 360 로 설정하면 시계 방향으로 회전 되고 toDegrees 를 -360 로 설정하면 반 시계 방향으로 회전 된다 . 회전 축 ( 회전의 중심 좌표는 기본적으로 (0, 0), 즉 객체의 왼쪽 상단 모서리이다 . 이는 시계 바늘 같은 경우에 적합하다 . 그러나 객체 자신의 중심을 회전축으로 두어야 하는 경우가 더 많으므로 회전 축은 pivotX, pivitY 특성들로 정의 할 수 있다 . 이 특성들은 좌표 값 뿐만 아니라 퍼센트 값 ( 객체의 중심을 지정할 때 편하다 ) 도 허용한다 . 다음은 대상의 중심을 회전 축으로 하여 5 초간 대상을 시게 방향으로 완전히 한 바퀴 돌리는 회전 애니메이션 XML 부분임 . <rotate android:fromDegees=“0” android:toDegrees=“360” android:pivotX=“50%” android:pivotY=“50%” android:duration=“5000” /> 코드에서는 android.view.animation 패키지의 RotateAnimation 클래스를 이용해서 이와 동일한 애니메이션 구현 가능 .

15. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 1) – 4. Rotate Animation( 회전 ) ① ③ ② /anim/sipn.xml ④

16. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 1) – 4. Rotate Animation( 회전 ) ① ③ ② /anim/sipn.xml ④

18. 2. 그래픽 – 비트맵 다루기 심화 기술 Resiezed 객체 크기를 150, 250 에서 500, 500 으로 바꿔봅시다 (1) Matrix ImageView 의 틀을 기준으로 해서 왼쪽 상단을 꼭지점으로 정렬 . 틀보다 작거나 커도 잘라져서 그대로 표현 .

19. 2. 그래픽 – 비트맵 다루기 심화 기술 (2) FIT_XY 원래 이미지 이미지가 ImageView 를 보다 작거나 크든지 간에 이미지를 틀에 맞추는 것

20. 2. 그래픽 – 비트맵 다루기 심화 기술 (3) FIT_START , FIT_CENTER, FIT_END 이미지크기를 틀에 맞게 비율을 줄이되 이미지 시작지점을 ImageView 왼쪽 상단에 맞추어 그림을 표현 Resiezed 객체 크기를 350, 200 으로 바꿔봅시다 (4) FIT_CENTER 이미지크기를 틀에 맞게 비율을 줄이되 ImageView 중앙에 맞추어 표현 (5) FIT_END 이미지크기를 틀에 맞게 비율을 줄이되 ImageView 의 오른쪽 아래에 맞추어 이미지를 표현한다 .

21. 2. 그래픽 – 비트맵 다루기 심화 기술 (6) CENTER 이미지크기 그대로 표현하되 이미지를 틀에 맞게 줄이지는 않는다 . 그리고 ImageView 틀의 중앙에 위치시킨다 . Padding 된 3px 크기의 여유 공간을 넘어가서 그대로 표현됨

22. 2. 그래픽 – 비트맵 다루기 심화 기술 (7) CENTER_CROP 6 번에서의 그림은 높이가 ImageView 의 틀과 맞지 않다 . 이것처럼 한쪽이 틀과 맞지 않다면 틀에 맞게 이미지를 늘이면서 다른 한쪽도 같이 비율에 맞게 증가시킨다 . 그러면 6 번 그림은 높이가 증가한 비율만큼 넓이가 증가하여 표현되기 된다 . 그리고 그림의 위치는 틀의 중앙에서 표현된다 . Top 과 Bottom 의 Padding 된 3px 크기의 여유 공간은 보존된다 .

23. 2. 그래픽 – 비트맵 다루기 심화 기술 (8) CENTER_INSIDE 7 번에서의 내용과 반대로 ImageView 의 틀에 벗어나는 쪽을 맞추어 비율을 줄여 표현한다 . 만약넓이가 틀에서 벗어난다면 넓이를 틀에 맞추고 그 비율만큼 높이를 줄이게 될 것이다 . CENTER_CROP, CENTER_INSIDE 는 ImageView 의 틀에 맞게 이미지를 조정하는 것이 공통적인 특징이다 . Padding 된 3px 크기의 여유 공간은 보존된다 .

24. 1. 애니메이션 1-2. 트위닝 애니메이션 ( 실습 ) – 모든 효과 적용하는 애니메이션 구현