안드로이드(Android) scale 이용해서 애니메이션(Animation) 구현하는 방법

이전 포스팅에서는 안드로이드에서 제공하는 translate 요소를 이용해 애니메이션 효과를 구현해 봤습니다. 이번에는 scale 요소를 사용해서 이미지를 확대/축소 시키거나 서서히 작아지면서 사라지게 하는 액션을 구현해 보겠습니다. 구현한 결과를 동영상으로 찍어서 올렸습니다. 참고하세요.

▼ scale 요소의 속성값들은 고정된 위치의 이미지를 조작합니다. 움직임을 표현하는 translate 와 달리 정해진 위치에서 동작을 표현합니다. 아래 속성값을 보시면 쉽게 이해가 갈겁니다.

◎ fromXScale : 시작하는 X 의 크기

◎ toXScale : 끝나는 시점의 X 크기.

◎ fromYScale : 시작하는 Y 의 크기.

◎ toYScale : 끝나는 시점의 Y 크기

◎ pivotX : X 좌표의 중심점

◎ pivotY : Y 좌표의 중심점

◎ duration : 애니메이션 적용 시간

◎ repeatCount : 반복 횟수

◎ repeatMode : 반복시 다시 생성될 때 방향

▼ XML 에 입력한 속성값은 이미지를 키웠다가 줄이는 동작을 합니다. toXScale = 3 과 toYScale = 3 이므로 가로 세로가 같이 증가했다가 줄어 들게 됩니다.

anim_scale.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator">
     <scale
         android:fromXScale="1.0"
         android:toXScale="3.0"
         android:fromYScale="1.0"
         android:toYScale="3.0"
         android:pivotX="50%"
         android:pivotY="50%"
         android:duration="500"
         android:repeatCount="1"
         android:repeatMode="reverse" />
 </set>

▼ 아래 XML 값은 서서히 작아지면서 사라지게 하는 효과를 얻을 수 있습니다. alpha 요소값과 같이 사용해서 이미지가 작아질 때 흐려집니다. 제대로 사라지는 효과를 표현하기 위해서는 투명도를 조절하는 alpha 와 함께 사용해야 합니다.

anim_scale_alpha.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top" >
    <scale
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale=".5"
        android:toYScale=".5" />
    
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

▼ 아래는 scale 요소를 두 개 사용했습니다. XML 은 순서대로 적용이 됩니다. 첫번째 scale 은 가로 부분을 줄입니다. 그렇게 줄어든 이미지를 다음 scale 요소 값으로 세로로 줄여서 사라지게 합니다.

anim_scale_point.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false"
    android:shareInterpolator="false" >
 
    <scale
        android:duration="500"
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.05"
        android:toYScale="1.0" />
    
    <scale
        android:duration="500"
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="500"
        android:toXScale="1.0"
        android:toYScale="0.05" />
 
</set>

▼ 다음은 rotate 요소와 alpha 요소를 함께 사용해서 이미지를 사라지게 하는 XML 입니다. 이미지를 회전시키면서 작아질 때 흐려집니다. 사라지게 하는 애니메이션을 좀더 그럴싸 하게 만든 XML 입니다.

anim_scale_rotate.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="false"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true" >
 
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
 
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
 
    <scale
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
 
</set>

▼ 애니메이션 XML 을 소스에서 적용하기 위해서는 로딩을 해야 합니다. XML 값을 로딩하기 위해 AnimationUtils.loadAnimation() 함수를 사용했으며 리턴받은 Animation 객체를 ImageView 의 startAnimation() 인수로 넘깁니다. 그럼 XML 에 설정한 값 대로 애니메이션이 구현됩니다.

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

▼ 아래는 애니메이션 효과를 구현하기 위해 scale 요소를 이용한 Activity 전체 소스 입니다. 각각의 기능들을 버튼 이벤트 함수에 구현했습니다.

ImageAnimScaleActivity.java

 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 ImageAnimScaleActivity extends Activity {
 
	ImageView mImgView;
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_image_anim_scale);
 
		mImgView = (ImageView) findViewById(R.id.imgTranslate);
		final Animation animTransRight = AnimationUtils
				.loadAnimation(this, R.anim.anim_scale);
		final Animation animTransLeft = AnimationUtils.loadAnimation(
				this, R.anim.anim_scale_alpha);
		final Animation animTransAlpha = AnimationUtils
				.loadAnimation(this, R.anim.anim_scale_point);
		final Animation animTransTwits = AnimationUtils
				.loadAnimation(this, R.anim.anim_scale_rotate);
 
		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 입니다. 각각의 기능들을 수행하기 위한 버튼과 ImageView 위젯이 추가 되어 있습니다.

activity_image_anim_scale.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="Scale 구현하는 방법"
            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>

안드로이드(Android) 애니메이션(Animation) scale 이용해서 구현하는 방법

저작자표시 비영리 변경금지

'안드로이드 개발' 카테고리의 다른 글

안드로이드(Android) Thread 대신해서 AsyncTask 클래스 구현하기 (0)	2024.11.09
안드로이드(Android) Activity 에서 이미지 리소스 drawable 다루는 방법 (4)	2024.04.28
안드로이드 콘솔에서 adb shell 패키지 접근 권한 Permission denied 에러 해결 (1)	2024.04.11
안드로이드 개발 Intent 이용한 전화 걸기 (5)	2024.03.23
안드로이드(Android) ProgressDialog(프로그레스 다이얼로그) 구현 방법 (9)	2024.03.06
안드로이드 개발 ContentProvider, ContentResolver 이용해서 연락처 가져오는 방법 (3)	2024.02.09
안드로이드 스튜디오 개발 APK 파일 찾는 방법 (0)	2023.07.10
안드로이드(Android) ImageView scale type 별로 이미지 배치 하는 방법 (0)	2023.01.24

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

안드로이드(Android) scale 이용해서 애니메이션(Animation) 구현하는 방법

'안드로이드 개발' 카테고리의 다른 글

카테고리

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/linear_interpolator">
	<scale
	android:fromXScale="1.0"
	android:toXScale="3.0"
	android:fromYScale="1.0"
	android:toYScale="3.0"
	android:pivotX="50%"
	android:pivotY="50%"
	android:duration="500"
	android:repeatCount="1"
	android:repeatMode="reverse" />
	</set>

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/decelerate_interpolator"
	android:zAdjustment="top" >
	<scale
	android:duration="@android:integer/config_mediumAnimTime"
	android:fromXScale="1.0"
	android:fromYScale="1.0"
	android:pivotX="50%p"
	android:pivotY="50%p"
	android:toXScale=".5"
	android:toYScale=".5" />

	<alpha
	android:duration="@android:integer/config_mediumAnimTime"
	android:fromAlpha="1.0"
	android:toAlpha="0" />
	</set>

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:fillAfter="false"
	android:shareInterpolator="false" >

	<scale
	android:duration="500"
	android:fillAfter="true"
	android:fromXScale="1.0"
	android:fromYScale="1.0"
	android:interpolator="@android:anim/accelerate_interpolator"
	android:pivotX="50%"
	android:pivotY="50%"
	android:toXScale="0.05"
	android:toYScale="1.0" />

	<scale
	android:duration="500"
	android:fillAfter="true"
	android:fromXScale="1.0"
	android:fromYScale="1.0"
	android:interpolator="@android:anim/accelerate_interpolator"
	android:pivotX="50%"
	android:pivotY="50%"
	android:startOffset="500"
	android:toXScale="1.0"
	android:toYScale="0.05" />

	</set>

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:duration="1000"
	android:fillAfter="false"
	android:interpolator="@android:anim/accelerate_interpolator"
	android:shareInterpolator="true" >

	<alpha
	android:fromAlpha="1.0"
	android:toAlpha="0.0" />

	<rotate
	android:fromDegrees="0"
	android:pivotX="50%"
	android:pivotY="50%"
	android:toDegrees="360" />

	<scale
	android:fillAfter="true"
	android:fromXScale="1.0"
	android:fromYScale="1.0"
	android:pivotX="50%"
	android:pivotY="50%"
	android:toXScale="0.0"
	android:toYScale="0.0" />

	</set>

	final Animation animTransRight = AnimationUtils
	.loadAnimation(this, R.anim.anim_scale);
	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 ImageAnimScaleActivity extends Activity {

	ImageView mImgView;

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

	mImgView = (ImageView) findViewById(R.id.imgTranslate);
	final Animation animTransRight = AnimationUtils
	.loadAnimation(this, R.anim.anim_scale);
	final Animation animTransLeft = AnimationUtils.loadAnimation(
	this, R.anim.anim_scale_alpha);
	final Animation animTransAlpha = AnimationUtils
	.loadAnimation(this, R.anim.anim_scale_point);
	final Animation animTransTwits = AnimationUtils
	.loadAnimation(this, R.anim.anim_scale_rotate);

	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);
	}
	});
	}
	}

	<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="Scale 구현하는 방법"
	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>