Android如何使用圓形揭露動畫巧妙地隱藏或顯示View詳解

更新時間：2022年04月28日 15:50:30 作者：QiShare

Android開發(fā)中會遇到不少顯示和隱藏的問題,下面這篇文章主要給大家介紹了關于Android如何使用圓形揭露動畫巧妙地隱藏或顯示View的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1.引言

在開發(fā)過程中，我們經(jīng)常會遇到需要顯示或隱藏View視圖的情況，如果在隱藏或顯示View的過程中加上動畫，能讓交互更加的友好和動感，本文將介紹如何使用圓形揭露動畫巧妙地隱藏或顯示View。

2.圓形揭露動畫簡介

圓形揭露動畫是動畫的一種，是由ViewAnimationUtils類提供的，調(diào)用ViewAnimationUtils.createCircularReveal()方法可以創(chuàng)建圓形揭露動畫，使用此動畫要求API級別為21及以上版本，createCircularReveal()方法的參數(shù)如下：

//view：使用圓形動畫的視圖
//centerX：裁剪圓形的中心的X坐標，這個中心是指相對于視圖本身
//centerY：裁剪圓形的中心的Y坐標，這個中心是指相對于視圖本身
//startRadius：圓形的起始半徑
//endRadius：圓形的結束半徑
public static Animator createCircularReveal(View view,int centerX,  int centerY, float startRadius, float endRadius)

3.使用圓形揭露動畫隱藏或顯示View

3.1 簡易布局

簡易布局如下：

<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:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_hide_or_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="隱藏或顯示"
        android:textColor="@color/black"
        android:textSize="18sp" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginTop="50dp"
        android:src="@mipmap/ic_launcher"/>
</LinearLayout>

3.2 使用圓形揭露動畫隱藏View

首先要計算得出View相對于自身的中心點的X坐標和Y坐標，然后調(diào)用Math.hypot()方法計算得出圓形的半徑，接著調(diào)用ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f)創(chuàng)建圓形揭露動畫，增加動畫執(zhí)行的Listener，在動畫執(zhí)行結束后調(diào)用imageView.setVisibility(View.GONE)，最后啟動動畫，示例如下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
     int width = imageView.getWidth();
     int height = imageView.getHeight();
     int ivXCenter = width/2;
     int ivYCenter = height/2;
     float circleRadius = (float) Math.hypot(ivXCenter, ivYCenter);
     Animator circularReveal = ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f);
     circularReveal.addListener(new AnimatorListenerAdapter() {
         @Override
         public void onAnimationEnd(Animator animation) {
             super.onAnimationEnd(animation);
             imageView.setVisibility(View.GONE);
             isVisible = false;
         }
     });
     circularReveal.start();
 }else {
     imageView.setVisibility(View.GONE);
     isVisible = false;
 }

3.3 使用圓形揭露動畫顯示View

使用圓形揭露動畫顯示View，先計算得出View相對于自身的中心點的X坐標和Y坐標，然后算出圓形的半徑，接著創(chuàng)建圓形揭露動畫，此時的起始半徑是0f，結束半徑是圓形的半徑，調(diào)用imageView.setVisibility(View.VISIBLE)，最后啟動動畫，示例如下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    int width = imageView.getWidth();
    int height = imageView.getHeight();
    int ivXCenter = width/2;
    int ivYCenter = height/2;
    float circleRadius = (float) Math.hypot(ivXCenter, ivYCenter);
    Animator circularReveal = ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, 0f, circleRadius);
    imageView.setVisibility(View.VISIBLE);
    isVisible = true;
    circularReveal.start();
}else {
    imageView.setVisibility(View.VISIBLE);
    isVisible = true;
}

4.總結

使用圓形揭露動畫隱藏或顯示View，主要是計算出View相對于自身的中心點的X坐標和Y坐標，并計算出圓形半徑，在調(diào)用ViewAnimationUtils.createCircularReveal()方法創(chuàng)建的時候要注意起始半徑和結束半徑的填寫，隱藏View的時候在動畫執(zhí)行完畢后setVisibility()方法隱藏，顯示View的時候，在動畫啟動前調(diào)用setVisibility()方法顯示。

到此這篇關于Android如何使用圓形揭露動畫巧妙地隱藏或顯示View的文章就介紹到這了,更多相關Android隱藏或顯示View內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: