日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：QiShare ? 更新時間： 2022-06-26 編程語言

1.引言

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

2.圓形揭露動畫簡介

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

//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坐標，然后調用Math.hypot()方法計算得出圓形的半徑，接著調用ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f)創建圓形揭露動畫，增加動畫執行的Listener，在動畫執行結束后調用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坐標，然后算出圓形的半徑，接著創建圓形揭露動畫，此時的起始半徑是0f，結束半徑是圓形的半徑，調用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坐標，并計算出圓形半徑，在調用ViewAnimationUtils.createCircularReveal()方法創建的時候要注意起始半徑和結束半徑的填寫，隱藏View的時候在動畫執行完畢后setVisibility()方法隱藏，顯示View的時候，在動畫啟動前調用setVisibility()方法顯示。

原文鏈接：https://juejin.cn/post/7086348131792584734

欄目分類
最近更新