Android에서 페이드 인(Fade In)과 페이드 아웃(Fade Out) 애니메이션은 알파(Alpha) 애니메이션 클래스를 기반으로 동작합니다. 이 글에서는 Java를 사용하여 Android 앱에 페이드 인·페이드 아웃 애니메이션을 적용하는 방법을 단계별로 살펴보겠습니다.
1단계: 새 프로젝트 생성
Android Studio에서 File → New Project를 선택하고, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 프로젝트를 만듭니다.
2단계: 레이아웃 파일 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/parent"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<Button
android:id="@+id/fadeIn"
android:text="Fade In"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/fadeOut"
android:text="Fade Out"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>위 코드에는 하나의 ImageView와 두 개의 Button이 배치되어 있습니다. Fade In 버튼을 누르면 이미지 뷰에 페이드 인(나타나기) 애니메이션이 적용되고, Fade Out 버튼을 누르면 페이드 아웃(사라지기) 애니메이션이 적용됩니다.
3단계: MainActivity 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다.
package com.example.andy.myapplication;
import android.animation.ObjectAnimator;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ImageView imageView = findViewById(R.id.imageView);
Button fadeIn = findViewById(R.id.fadeIn);
fadeIn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setDuration(1000);
alphaAnimation.setRepeatCount(1);
alphaAnimation.setRepeatMode(Animation.REVERSE);
imageView.startAnimation(alphaAnimation);
}
});
Button fadeOut = findViewById(R.id.fadeOut);
fadeOut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0);
fadeOut.setDuration(2000);
fadeOut.start();
}
});
}
}페이드 인 애니메이션 핵심 코드
이미지 뷰에 페이드 인 애니메이션을 적용하려면 다음 코드를 사용합니다. AlphaAnimation은 투명도 0(완전히 투명)에서 1(완전히 불투명)로 변화시키는 방식으로 동작합니다.
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f); alphaAnimation.setDuration(1000); // 애니메이션 지속 시간: 1초 alphaAnimation.setRepeatCount(1); // 반복 횟수: 1회 alphaAnimation.setRepeatMode(Animation.REVERSE); // 역방향 반복 imageView.startAnimation(alphaAnimation);
페이드 아웃 애니메이션 핵심 코드
이미지 뷰에 페이드 아웃 애니메이션을 적용하려면 다음 코드를 사용합니다. ObjectAnimator를 활용해 alpha 속성을 1에서 0으로 부드럽게 감소시킵니다.
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0); fadeOut.setDuration(2000); // 애니메이션 지속 시간: 2초 fadeOut.start();
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 Android 스마트폰을 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션에서 자신의 모바일 기기를 선택하면, 모바일 화면에 아래와 같은 기본 화면이 표시됩니다.
Fade In 버튼을 클릭하면 아래와 같이 이미지 뷰에 페이드 인 애니메이션이 적용됩니다.
이어서 Fade Out 버튼을 클릭하면 아래와 같이 이미지 뷰가 서서히 사라지는 페이드 아웃 애니메이션이 실행됩니다.
