[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

이번 시간에는 애니메이션(Animation)을 이용해서 텍스트뷰가 퍼지듯이 나타났다가 퍼지듯이 사라지는 방법을 알아보겠습니다. 

---

목차

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 메인 화면 activity_main.xml

- 설명 -

1. 애니메이션 효과가 들어가는 TextView

2. 애니메이션 기능 Button

<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="match_parent"
        android:layout_height="400dp">

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

    <Button
        android:id="@+id/circularBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="회전 표시 버튼"
        android:textSize="25sp"/>
</LinearLayout>

 

3. 메인 코드 MainActivity.kt

- 설명 -

1. clicked

  버튼 클릭 상태 변수

2. finalRadius

  원 끝 반경

3. initialRadius: 

  원 시작 반경

4. ViewAnimationUtils.createCircularReveal

  뷰를 퍼지듯 보여주거나 퍼지듯 사라지게 하는 애니메이션

  인자값(뷰, x좌표, y좌표, 원 시작 반경, 원 끝 반경)

class MainActivity : AppCompatActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //객체 생성
        val textView: TextView = findViewById(R.id.textView)
        val circularBtn: Button = findViewById(R.id.circularBtn)

        //클릭 상태 변수
        var clicked: Boolean = false

        //버튼 이벤트
        circularBtn.setOnClickListener {

            //클릭 안한 상태라면
            if(!clicked){

                //뷰 표시
                val cx: Int = textView.width /2
                val cy: Int = textView.height /2

                val finalRadius: Float = hypot(cx.toFloat(), cy.toFloat())

                //애니메이션
                val anim: Animator = ViewAnimationUtils.createCircularReveal(textView, cx, cy,
                    0f, finalRadius)

                //화면에 보여주기
                textView.visibility = View.VISIBLE

                //애니메이션 시작
                anim.start()

                //클릭 상태 변경
                clicked = true
            }

            else{ //클릭 상태라면
                //뷰 숨김
                val cx: Int = textView.width /2
                val cy: Int = textView.height /2

                val initialRadius: Float = hypot(cx.toFloat(), cy.toFloat())

                //애니메이션
                val anim: Animator = ViewAnimationUtils.createCircularReveal(textView, cx, cy,
                    initialRadius, 0f)

                anim.addListener(object: Animator.AnimatorListener{
                    override fun onAnimationStart(p0: Animator?) {}

                    override fun onAnimationEnd(p0: Animator?) {
                       //애니메이션 끝나면 실행
                        //숨기기
                        textView.visibility = View.INVISIBLE
                    }

                    override fun onAnimationCancel(p0: Animator?) {}

                    override fun onAnimationRepeat(p0: Animator?) {}
                })

                //애니메이션 시작
                anim.start()

                //클릭 상태 변경
                clicked = false
            }
        }
    }//onCreate
}

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

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

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

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

2022.08.02 - [안드로이드] - [안드로이드 코틀린] 버튼 Button 숨김(INVISIBLE), 보여짐(VISIBLE), 사라짐(GONE) 만드는 방법

[안드로이드 코틀린] 버튼 Button 숨김(INVISIBLE), 보여짐(VISIBLE), 사라짐(GONE) 만드는 방법