[Java][Android] TransitionManager로 뷰 크기와 투명도 애니메이션 구현하기

안녕하세요,

오늘은 TransitionManager를 활용하여 뷰 크기와 투명도 애니메이션을 구현하는 예제를 만들어 보도록 하겠습니다. 

 

TransitionManager는 안드로이드에서 레이아웃 변경 시 부드러운 애니메이션 효과를 제공하는 클래스입니다. 일반적으로 뷰의 크기, 위치, 가시성 변화에 자연스러운 전환 효과를 추가하기 위해 사용됩니다.

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private boolean isExpanded = false;

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

        FrameLayout rootLayout = findViewById(R.id.rootLayout);
        View animatedView = findViewById(R.id.View);
        View animateButton = findViewById(R.id.Button);

        animateButton.setOnClickListener(view -> {
            // TransitionSet으로 복합 애니메이션 설정
            TransitionSet transitionSet = new TransitionSet()
                    .addTransition(new ChangeBounds()) // 크기와 위치 변경
                    .addTransition(new Fade());       // 투명도 변경
            transitionSet.setDuration(500);

            TransitionManager.beginDelayedTransition(rootLayout, transitionSet);

            // 상태에 따라 크기 및 위치 변경
            FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) animatedView.getLayoutParams();
            if (isExpanded) {
                params.width = 100;
                params.height = 100;
                animatedView.setAlpha(1.0f); // 완전 불투명
            } else {
                params.width = 300;
                params.height = 300;
                animatedView.setAlpha(0.5f); // 반투명
            }

            animatedView.setLayoutParams(params);
            isExpanded = !isExpanded; // 상태 변경
        });
    }
}

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <View
        android:id="@+id/View"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@android:color/holo_blue_light" />

    <Button
        android:id="@+id/Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="20dp" />
</FrameLayout>

 

 

시연 영상입니다.