[CookBook] Tweening Animation 소스 분석하기 -1-

지금 참여하고 있는 프로젝트에서 TDD 관련 Role 을 맡고 있는데요.

안드로이드 Tablet 용 Native 애플리케이션 개발쪽 Role 을 맡을 수도 있을 것 같아서 얼마전 책 두권을 샀습니다.

그 중 하나가 B.M. Harwani 가 지은 The Android Tablet Developer's Cookbook 입니다.

기왕 샀으니 열심히 공부해야겠죠.

오늘은 책장을 넘기다가 눈에 띄는 부분을 공부하려구요.

Chapter 8에 있는 Tweening Animation 인데요.

이 앱을 공부해 보겠습니다.

이 앱에는 4가지 타입의 애니메이션이 있습니다.

Alpha animation - view 의 투명도를 바꿈

Rotate animation - 주어진 pivot point 나 axis 를 중심으로 특정 각도로 view를 rotate 시킴

Scale animation - X나 Y 축을 중심으로 view 를 축소하거나 확대 함.

Translate animation - X나 Y 축을 따라서 view를 움직임

원래 view 를 flipping 시키는 효과를 어디서 찾아보던 중이었거든요.

Rotate animation 이 바로 제가 원하는 효과인지 한번 봐야겠습니다.

그럼 일단 layout xml인 activity_tweening_anim_app.xml을 보겠습니다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView android:id="@+id/imgview"
        android:layout_width="@dimen/image_width"
        android:layout_height="@dimen/image_height"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true" />
    <Button
        android:id="@+id/alpha_button"
        android:text="Alpha"
        android:textSize="@dimen/text_size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"  />
    <Button
        android:id="@+id/rotate_button"
        android:text="Rotate"
        android:textSize="@dimen/text_size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/alpha_button" />
    <Button
        android:id="@+id/scale_button"
        android:text="Scale"
        android:textSize="@dimen/text_size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:layout_toRightOf="@id/rotate_button" />
    <Button
        android:id="@+id/translate_button"
        android:text="Translate"
        android:textSize="@dimen/text_size"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/scale_button"  />
</RelativeLayout>

전체 Layout 은 RelativeLayout 으로 감쌌습니다.

그리고 그 안에 1개의 ImageView와 4개의 Button들이 있습니다.

각 버튼마다 위에 소개한 4개의 효과 중 하나를 동작하도록 할 거 같습니다.

각 view 마다 모두 id 가 있죠? 나중에 java에서 갖다가 사용할 겁니다.

각 뷰마다 size는  @dimen/ 으로 시작하는데 이것은 res-values 폴더 아래에 있는 dimens.xml 안에 설정한 값을 사용하겠다는 겁니다.

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="text_size">14sp</dimen>
        <dimen name="image_width">100dp</dimen>
    <dimen name="image_height">120dp</dimen>
</resources>

이 크기들은 일반 phone 크기에 맞춘 것입니다. 

이 소스를 보면 values-sw600dp 라는 폴더가 있는데요. 이 안에 있는 dimens.xml을 보면 아래와 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="text_size">24sp</dimen>
        <dimen name="image_width">140dp</dimen>
    <dimen name="image_height">160dp</dimen>
</resources>

이것은 7인치 타블렛 용입니다.

그리고 values-sw720dp 는 10 인치 이상의 tablet 을 위한 겁니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="text_size">32sp</dimen>
        <dimen name="image_width">180dp</dimen>
    <dimen name="image_height">200dp</dimen>
</resources>

크기의 비율을 잘 봐 두면 나중에 실무에 도움을 받을 수 있겠네요.

이렇게 설정을 해 놓으면 각 device 마다 해당 해상도에 맞는 dimens.xml 을 갖다가 쓰게 됩니다. 다양한 크기의 해상도를 가진 안드로이드 앱을 개발할 때는 이런 구성을 미리 생각하고 프로그래밍에 들어가야 겠습니다.

아까 소개했던 4개의 애니메이션 효과들은 각각 해당 class 를 가지고 있습니다.

* AlphaAnimation

먼저 AlphaAnimation 을 보겠습니다.

이 클래스는 view의 투명도를 조절하기 위해 만든 건데요. 그 구성은 아래와 같습니다.

public AlphaAnimation(float from_alpha, float to_alpha)

여기서 첫번째 파라미터인 from_alpha 는 이 애니메이션이 시작할 때의 alpha 값입니다. 값은 0.0에서 1.0까지 설정할 수 있습니다.  1.0은 제일 선명한 거고 0.0은 완전 투명한 겁니다.

두번째 파라미터인 to_alpha 는 이 애니메이션이 끝날 때의 alpha 값입니다.

예를 들어 Animation animation = new AlphaAnimation(1.0f,0.1f) 라고 선언하면 아주 뚜렷한 이미지에서 거의 투명한 이미지로 바뀌게 되겠죠.

* TranslateAnimation

이 클래스는 view를 움직이도록 합니다. syntax는 아래와 같습니다.

public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

fromXDelta	Change in X coordinate to apply at the start of the animation
toXDelta	Change in X coordinate to apply at the end of the animation
fromYDelta	Change in Y coordinate to apply at the start of the animation
toYDelta	Change in Y coordinate to apply at the end of the animation

* RotateAnimation

public RotateAnimation (float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

Parameters

fromDegrees	Rotation offset to apply at the start of the animation.
toDegrees	Rotation offset to apply at the end of the animation.
pivotXType	Specifies how pivotXValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
pivotXValue	The X coordinate of the point about which the object is being rotated, specified as an absolute number where 0 is the left edge. This value can either be an absolute number if pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise.
pivotYType	Specifies how pivotYValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
pivotYValue	The Y coordinate of the point about which the object is being rotated, specified as an absolute number where 0 is the top edge. This value can either be an absolute number if pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise.

* ScaleAnimation

public ScaleAnimation (float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

Parameters

fromX	Horizontal scaling factor to apply at the start of the animation
toX	Horizontal scaling factor to apply at the end of the animation
fromY	Vertical scaling factor to apply at the start of the animation
toY	Vertical scaling factor to apply at the end of the animation
pivotXType	Specifies how pivotXValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
pivotXValue	The X coordinate of the point about which the object is being scaled, specified as an absolute number where 0 is the left edge. (This point remains fixed while the object changes size.) This value can either be an absolute number if pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise.
pivotYType	Specifies how pivotYValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.
pivotYValue	The Y coordinate of the point about which the object is being scaled, specified as an absolute number where 0 is the top edge. (This point remains fixed while the object changes size.) This value can either be an absolute number if pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise.

4개의 애니메이션을 구현하기 위해 따로 코딩을 하지 않고 그냥 안드로이드 API 에서 해당 클래스를 불러다 쓰는 군요.

제가 원하는 flipping 효과를 낼 수 있을 지 어떨지 잘 모르겠네요.

다음 글에서 실제 자바 코드를 분석해 보고 어떻게 실행되는지도 살펴 보겠습니다.

그리고 실제 코드를 이것 저것 수정해서 어떤 효과들을 낼 수 있는지도 추가적으로 알아보겠습니다.