[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전표시 애니메이션

이번 시간에는 애니메이션을 통해 텍스트뷰가

퍼지듯이 나타났다가 퍼지듯이 사라지는

예제를 만들어 보려고 합니다.

---

1. 메인 화면 구성 activity_main.xml

화면은 간단합니다. 프레임 레이아웃(FrameLayout) 안에 텍스트뷰(TextView)가 있고

하단에 애니메이션을 작동시키는 버튼(Button)이 있습니다.

초기에는 visibility 속성을 통해 텍스트뷰(textView)를 숨겨놓고, 버튼을 통해

나타났다, 사라졌다 시키려고 합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="500dp"
        android:layout_height="400dp">

        <TextView
            android:id="@+id/text_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_margin="50dp"
            android:background="@color/purple_200"
            android:gravity="center"
            android:text="Front"
            android:textColor="@color/white"
            android:visibility="invisible"
            android:textSize="30sp" />
    </FrameLayout>

    <Button
        android:id="@+id/ani_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="회전표시 버튼" />

</LinearLayout>

 

2. 메인 코드 구현 MainActivity.java

1. clicked 변수는 버튼을 클릭했는지 안했는지 체크를 하기 위해 선언했다.

2. createCircularReveal를 통해 텍스트뷰에 퍼지듯이 나타나고 사라지는

효과를 줄 수 있다.

3. createCircularReveal에는 5개의 매개변수가 사용되는데

첫 번째는 화면에서 숨기거나 표시하려는 뷰

두 번째와 세 번째는 좌표값이 들어가고

네 번째는 클리핑서클의 시작 반지름

다섯 번째는 클리핑서클의 최종 반지름이다.

뷰를 표시할 때는 최종 반지름이 뷰 자체보다 커야 한다.

그래야 애니메이션이 끝나기 전에 뷰가 완전히 표시된다.

public class MainActivity extends AppCompatActivity {

    TextView text_view;

    boolean clicked = false;

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

        Button ani_btn = findViewById(R.id.ani_btn);
        ani_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //뷰 표시하기
                if(!clicked){ //안드로이드 버젼이 롤리팝(5.0)이거나 보다 높으면
                   if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){

                        int cx = text_view.getWidth() /2;
                        int cy = text_view.getHeight() /2;

                        float finalRadius = (float) Math.hypot(cx, cy);

                        Animator anim = ViewAnimationUtils.createCircularReveal(text_view, cx, cy, 0f, finalRadius);

                        text_view.setVisibility(View.VISIBLE);
                        anim.start();
                    }else{
                        text_view.setVisibility(text_view.INVISIBLE);
                    }

                    clicked = true;

                }else{ //뷰 숨기기

                    //안드로이드 버젼이 롤리팝(5.0)이거나 보다 높으면
                    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){

                        int cx = text_view.getWidth() /2;
                        int cy = text_view.getHeight() /2;

                        float initialRadius = (float) Math.hypot(cx, cy);

                        Animator anim = ViewAnimationUtils.createCircularReveal(text_view, cx, cy, initialRadius, 0f);

                        anim.addListener(new Animator.AnimatorListener() {
                            @Override
                            public void onAnimationStart(Animator animator) {

                            }

                            @Override
                            public void onAnimationEnd(Animator animator) {
                                text_view.setVisibility(text_view.INVISIBLE);
                            }

                            @Override
                            public void onAnimationCancel(Animator animator) {

                            }

                            @Override
                            public void onAnimationRepeat(Animator animator) {

                            }
                        });

                        anim.start();

                    }else{
                        text_view.setVisibility(text_view.VISIBLE);
                    }

                    clicked = false;
                }
            } //onClick
        });//ani_btn.setOnClickListener
    }// onCreate
}

 

3. 실행 화면

 

 

2021.12.28 - [안드로이드] - [안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드플립(CardFlip)

[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드플립(CardFlip)

2021.12.27 - [안드로이드] - [안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

2021.12.26 - [안드로이드] - [안드로이드] 속성 애니메이션 (이미지를 움직이게 하는 방법)

[안드로이드] 속성 애니메이션 (이미지를 움직이게 하는 방법)