안드로이드(Android) 다양한 애니메이션 이동(translate) 을 구현하는 여러가지 방법

안드로이드(Android) 다양한 애니메이션 이동(translate) 을 구현하는 여러가지 방법

 

환경: Eclipse Mars, Android 4.2.2

 

안드로이드에서 화면이나 컨트롤, 위젯 등을 이동할 때 애니메이션 효과를 얻고 싶다면 translate 를 사용해 보세요. translate 를 이용하면 아주 간단하게 다양한 효과를 만들수 있습니다. 예제는 이미지를 오른쪽으로 사라지게 하거나 회전하면서 사라지도록 구현했습니다. 개발하는데 참고가 되었으면 합니다. 

 

 

▼ 안드로이드에서 제공하는 translate 는 다양한 속성값을 가지고 있습니다 아래는 그 속성값들에 대한 설명입니다. 왼쪽이나 오른쪽으로 움직일려면 fromXScale 을 이용하고 위 아래로 움직일려면 fromYScale 를 이용해야 합니다. 그리고 repeatMode 는 이미지가 사라졌다가 다시 돌아오는 방식입니다. 속성값으로 reverse 를 사용합니다. 사라진 반대 방향에서 나타나므로 자연스럽습니다. 

 

◎ fromXScale : X 의 시작위치

◎ toXScale : X 의 종료 위치

◎ fromYScale : Y의 시작 크기

◎ toYScale : Y의 끝 크기

◎ pivotX : X 좌표의 중심점

◎ pivotY : Y 좌표의 중심점   

◎ repeatCount : 반복횟수

◎ repeatMode : 다시 시작할 때 reverse 는 사라진 방향, restart 는 반대방향 나타남

 

▼ 아래에 셋팅해 놓은 속성값들은 이미지가 오른쪽으로 사라지게 합니다. toXDelta = “100%p” 로 설정하면 이미지가 없어질 때까지 이동합니다. fromXDelta = 0 이므로 제자리에서 시작하겠죠. 그리고 반복은 repeatCount = 1 로 한번 입니다.

 

anim_translate_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator">
     <translate
         android:fromXDelta="0"
         android:toXDelta="100%p"
         android:duration="500"
         android:repeatCount="1"
         android:repeatMode="reverse"/>
 </set>

 

▼ 다음은 오른쪽이 아닌 왼쪽으로 사라지게 하는 방법입니다. 오른쪽으로 사라지게 하는 속성값과 다른 점은 toXDelta 의 값이 -100%p 입니다. 값이 마이너스라서 반대로 움직입니다. 

 

anim_translate_left.xml

 

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" 
        android:repeatCount="1"
        android:repeatMode="reverse"/>
</set>

 

▼ 세 번째는 translate 와 alpha 요소를 같이 적용했습니다. alpha 는 투명도를 조절하는 XML 요소 입니다. fromAlpha=1 에서 toAlpah=0 이므로 이미지가 흐려지면서 서서히 사라지게 합니다.

 

anim_translate_alpha.xml

 

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" 
        android:repeatCount="1"
        android:repeatMode="reverse"/>
    
	<alpha
	        android:duration="500"
	        android:fromAlpha="1.0"
	        android:toAlpha="0.0" />
</set>

 

▼ 마지막으로 이미지를 짧게 흔들면서 이동하는 방법입니다. 주로 진동을 주고 싶을 때 많이 이용합니다. 진동 횟수는 cycleInterpolator 요소에서 관리합니다. cycles 속성값에 입력한 숫자 만큼 흔들리게 되는데, 진동할 때 흔들리는 거리는 toXDelta 에 입력한 값으로 합니다. 

 

anim_translate_twits.xml

 

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:interpolator="@anim/cycle_5"
        android:toXDelta="10" />
</set>

 

cycle_5.xml

<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:cycles="10" />

 

▼ 아래는 다양한 애니메이션 효과를 구현한 메인 Activity 전체 소스 입니다. 애니메이션 기능을 소스에서 구현하기 위해 XML 값을 읽어와야 겠죠. 그 역할을 AnimationUtils.loadAnimation() 함수가 합니다. 로딩한 XML 값을 ImageView 의 startAnimation() 함수의 인수로 넘기세요.

final Animation animTransRight = AnimationUtils.loadAnimation(
		this,R.anim.anim_translate_right);
mImgView.startAnimation(animTransRight);


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

import com.example.sampleandroidinfo.R;

public class ImageTranslateActivity extends Activity {

	ImageView mImgView; 
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_image_translate);

		mImgView = (ImageView) findViewById(R.id.imgTranslate);
		final Animation animTransRight = AnimationUtils.loadAnimation(
				this,R.anim.anim_translate_right);
		final Animation animTransLeft = AnimationUtils.loadAnimation(
				this,R.anim.anim_translate_left);
		final Animation animTransAlpha = AnimationUtils.loadAnimation(
				this,R.anim.anim_translate_alpha);
		final Animation animTransTwits = AnimationUtils.loadAnimation(
				this,R.anim.anim_translate_twits);
		
		
		Button btnRight = (Button) findViewById(R.id.btn_right);
		Button btnLeft = (Button) findViewById(R.id.btn_left);
		Button btnAlpha = (Button) findViewById(R.id.btn_alpha);
		Button btnCycle = (Button) findViewById(R.id.btn_twit);
		
		btnRight.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mImgView.startAnimation(animTransRight);
			}
		});
		
		btnLeft.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mImgView.startAnimation(animTransLeft);
			}
		});
		
		btnAlpha.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mImgView.startAnimation(animTransAlpha);
			}
		});
		
		btnCycle.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				mImgView.startAnimation(animTransTwits);
			}
		});
	}
}

 

▼ 아래는 메인 Activity 를 구현한 화면 레이아웃 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"
    tools:context="com.example.imageview.ImageTranslateActivity" >

    <LinearLayout
        android:id="@+id/linView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#3F0099"
            android:gravity="center"
            android:paddingBottom="@dimen/abc_action_bar_icon_vertical_padding"
            android:paddingTop="@dimen/abc_action_bar_icon_vertical_padding"
            android:text="Translate 구현하는 여러가지 방법"
            android:textColor="#FFFFFF" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="오른쪽" />
            
            <Button
                android:id="@+id/btn_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="왼쪽" />
            
            <Button
                android:id="@+id/btn_alpha"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="투명" />
            
            <Button
                android:id="@+id/btn_twit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="흔들기" />
            
        </LinearLayout>
        
    </LinearLayout>

    <ImageView
        android:id="@+id/imgTranslate"
        android:layout_width="500px"
        android:layout_height="500px"
        android:layout_centerInParent="true"
        android:src="@drawable/diablo" />

</RelativeLayout>