Animation View Hide ?

여기에서 중요하게 봐야하는 것이 ViewAnimationUtils.createCircularReveal 입니다.

첫번째 매개변수에서는 숨기거나 표시할려는 View입니다.

두번째 , 세번째 매개변수에서는 x , y 좌표 입니다.

일반적으로는 View 중심이 되지만 사용자가 터치한 위치도 사용이 가능합니다.

네번째는 서클의 시작 반지름입니다. 위에 예제는 숨기는 예제이기 때문에 0 으로 설정을 합니다.

다섯번째는 최종 반지름 입니다.

안드로이드 사용 할때 Paging 처리 하거나 혹은 특정한 상황을 기다릴 때 표시 전환이 너무 빠르게 진행이되면 오히려 더 부자연스럽게 보일수가 잇습니다.

 

그럴 때 흔히 사용하는 것이 회전 표시 애니메이션 , cross fade 애니메이션 , 카드 플립 애니메이션을 사용을 합니다.

 

[Cross fade 애니메이션]

크로스 페이드 애니메이션은 하나의 View를 점차적으로 페이드 아웃을 하면서 또 다른 View를 페이드인을 하는 애니메이션 입니다.

 

ViewPropertyAnimator을 통해서 할수가 있습니다.

[예시]

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView style="?android:textAppearanceMedium"
                android:lineSpacingMultiplier="1.2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/lorem_ipsum"
                android:padding="16dp" />

        </ScrollView>

        <ProgressBar android:id="@+id/loading_spinner"
            style="?android:progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

    </FrameLayout>
    

    class CrossfadeActivity : Activity() {

        private lateinit var contentView: View
        private lateinit var loadingView: View
        private var shortAnimationDuration: Int = 0

     

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

            contentView = findViewById(R.id.content)
            loadingView = findViewById(R.id.loading_spinner)

            // Initially hide the content view.
            contentView.visibility = View.GONE

            // Retrieve and cache the system's default "short" animation time.
            shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
        }
        
        
        private fun crossfade() {
            contentView.apply {
                // Set the content view to 0% opacity but visible, so that it is visible
                // (but fully transparent) during the animation.
                alpha = 0f
                visibility = View.VISIBLE

                // Animate the content view to 100% opacity, and clear any animation
                // listener set on the view.
                animate()
                        .alpha(1f)
                        .setDuration(shortAnimationDuration.toLong())
                        .setListener(null)
            }
            // Animate the loading view to 0% opacity. After the animation ends,
            // set its visibility to GONE as an optimization step (it won't
            // participate in layout passes, etc.)
            loadingView.animate()
                    .alpha(0f)
                    .setDuration(shortAnimationDuration.toLong())
                    .setListener(object : AnimatorListenerAdapter() {
                        override fun onAnimationEnd(animation: Animator) {
                            loadingView.visibility = View.GONE
                        }
                    })
        }
    }

이제 crossfade을 함수를 호출을 하면 contentView는 shortAnimationDuration 시간만큼 천천히 보여지면서 loadingView는 shortAnimationDuration 시간만큼 천천히 사라집니다.

 

[회전 표시 애니메이션]

회전 표시 애니메이션은 Visible 하거나 숨길때 사용자에게 시각적인 효과를 제공합니다.

ViewAnimationUtils.createCircularReveal() 을 통해서 구현이 가능합니다.

 

[예시]

    // previously visible view
    val myView: View = findViewById(R.id.my_view)

    // Check if the runtime version is at least Lollipop
    if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
        // get the center for the clipping circle
        val cx = myView.width / 2
        val cy = myView.height / 2

        // get the initial radius for the clipping circle
        val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

        // create the animation (the final radius is zero)
        val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)

        // make the view invisible when the animation is done
        anim.addListener(object : AnimatorListenerAdapter() {

            override fun onAnimationEnd(animation: Animator) {
                super.onAnimationEnd(animation)
                myView.visibility = View.INVISIBLE
            }
        })

        // start the animation
        anim.start()
    } else {
        // set the view to visible without a circular reveal animation below Lollipop
        myView.visibility = View.VISIBLE
    }

 

 // previously invisible view
    val myView: View = findViewById(R.id.my_view)

    // Check if the runtime version is at least Lollipop
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // get the center for the clipping circle
        val cx = myView.width / 2
        val cy = myView.height / 2

        // get the final radius for the clipping circle
        val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

        // create the animator for this view (the start radius is zero)
        val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
        // make the view visible and start the animation
        myView.visibility = View.VISIBLE
        anim.start()
    } else {
        // set the view to invisible without a circular reveal animation below Lollipop
        myView.visibility = View.INVISIBLE
    }

 

여기에서 중요하게 봐야하는 것이 ViewAnimationUtils.createCircularReveal 입니다.

첫번째 매개변수에서는 숨기거나 표시할려는 View입니다.

두번째 , 세번째 매개변수에서는 x , y 좌표 입니다.

일반적으로는 View 중심이 되지만 사용자가 터치한 위치도 사용이 가능합니다.

네번째는 시작 반지름입니다.

다섯번째는 최종 반지름 입니다.