반응형
이전 포스팅에서는 안드로이드에서 제공하는 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) 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 |
