이 튜토리얼에서는 안드로이드(Android)에서 중심점(center point)을 기준으로 이미지가 확대되는 스케일 애니메이션을 구현하는 방법을 단계별로 알아봅니다. 버튼을 클릭하면 화면 중앙을 기준으로 이미지가 점점 커지며 나타나는 줌(Zoom) 효과를 만들 수 있습니다.
1단계 — 새 프로젝트 생성
Android Studio를 실행하고 File → New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 프로젝트를 만듭니다.
2단계 — 레이아웃 파일 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?> <RelativeLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent"> <Button android:id = "@+id/button" android:layout_centerHorizontal = "true" android:layout_marginTop = "100dp" android:layout_width = "150dp" android:text = "Click" android:layout_height = "wrap_content"/> <ImageView android:id = "@+id/imageView" android:src = "@mipmap/ic_launcher_round" android:layout_width = "match_parent" android:layout_height = "match_parent" /> </RelativeLayout>
위 코드에는 버튼 하나와 ImageView 하나가 배치되어 있습니다. 이 버튼은 클릭 시 이미지 스케일링(줌) 애니메이션을 실행하는 역할을 합니다.
3단계 — MainActivity 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다.
package com.example.andy.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
ImageView view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = findViewById(R.id.imageView);
view.setVisibility(View.INVISIBLE);
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ScaleAnimation fade_in = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000);
fade_in.setFillAfter(true);
view.startAnimation(fade_in);
}
});
}
}핵심 코드 살펴보기
사용자가 버튼을 클릭하면 아래 코드를 통해 이미지 스케일링 애니메이션이 실행됩니다.
ScaleAnimation fade_in = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); fade_in.setDuration(1000); fade_in.setFillAfter(true); view.startAnimation(fade_in);
여기서 각 파라미터의 의미는 다음과 같습니다.
- (0f, 1f, 0f, 1f) : X축과 Y축 방향으로 크기가 0에서 1까지 변하며, 즉 아무것도 없는 상태에서 원래 크기까지 확대됩니다.
- Animation.RELATIVE_TO_SELF, 0.5f : 애니메이션의 기준점(pivot)을 뷰 자신의 가로·세로 50% 위치, 즉 정중앙으로 지정합니다. 이 값 덕분에 이미지가 한쪽으로 치우치지 않고 중심을 기준으로 균형 있게 확대됩니다.
- setDuration(1000) : 애니메이션 지속 시간을 1000밀리초(1초)로 설정합니다.
- setFillAfter(true) : 애니메이션이 끝난 후에도 마지막 상태를 그대로 유지하도록 합니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 열고 툴바의 Run 아이콘을 클릭하세요. 목록에서 자신의 모바일 기기를 선택하면, 기본 화면이 다음과 같이 표시됩니다.
위 화면에는 버튼이 하나 있습니다. 사용자가 이 버튼을 클릭하면 아래와 같이 이미지가 중심을 기준으로 점점 확대되는 줌 효과와 함께 나타납니다.
