Android如何使用圓形揭露動(dòng)畫巧妙地隱藏或顯示View詳解
1.引言
在開發(fā)過程中,我們經(jīng)常會(huì)遇到需要顯示或隱藏View視圖的情況,如果在隱藏或顯示View的過程中加上動(dòng)畫,能讓交互更加的友好和動(dòng)感,本文將介紹如何使用圓形揭露動(dòng)畫巧妙地隱藏或顯示View。
2.圓形揭露動(dòng)畫簡(jiǎn)介
圓形揭露動(dòng)畫是動(dòng)畫的一種,是由ViewAnimationUtils類提供的,調(diào)用ViewAnimationUtils.createCircularReveal()方法可以創(chuàng)建圓形揭露動(dòng)畫,使用此動(dòng)畫要求API級(jí)別為21及以上版本,createCircularReveal()方法的參數(shù)如下:
//view:使用圓形動(dòng)畫的視圖 //centerX:裁剪圓形的中心的X坐標(biāo),這個(gè)中心是指相對(duì)于視圖本身 //centerY:裁剪圓形的中心的Y坐標(biāo),這個(gè)中心是指相對(duì)于視圖本身 //startRadius:圓形的起始半徑 //endRadius:圓形的結(jié)束半徑 public static Animator createCircularReveal(View view,int centerX, int centerY, float startRadius, float endRadius)
3.使用圓形揭露動(dòng)畫隱藏或顯示View
3.1 簡(jiǎn)易布局
簡(jiǎn)易布局如下:
<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 使用圓形揭露動(dòng)畫隱藏View
首先要計(jì)算得出View相對(duì)于自身的中心點(diǎn)的X坐標(biāo)和Y坐標(biāo),然后調(diào)用Math.hypot()方法計(jì)算得出圓形的半徑,接著調(diào)用ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f)創(chuàng)建圓形揭露動(dòng)畫,增加動(dòng)畫執(zhí)行的Listener,在動(dòng)畫執(zhí)行結(jié)束后調(diào)用imageView.setVisibility(View.GONE),最后啟動(dòng)動(dòng)畫,示例如下:
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 使用圓形揭露動(dòng)畫顯示View
使用圓形揭露動(dòng)畫顯示View,先計(jì)算得出View相對(duì)于自身的中心點(diǎn)的X坐標(biāo)和Y坐標(biāo),然后算出圓形的半徑,接著創(chuàng)建圓形揭露動(dòng)畫,此時(shí)的起始半徑是0f,結(jié)束半徑是圓形的半徑,調(diào)用imageView.setVisibility(View.VISIBLE),最后啟動(dòng)動(dòng)畫,示例如下:
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.總結(jié)
使用圓形揭露動(dòng)畫隱藏或顯示View,主要是計(jì)算出View相對(duì)于自身的中心點(diǎn)的X坐標(biāo)和Y坐標(biāo),并計(jì)算出圓形半徑,在調(diào)用ViewAnimationUtils.createCircularReveal()方法創(chuàng)建的時(shí)候要注意起始半徑和結(jié)束半徑的填寫,隱藏View的時(shí)候在動(dòng)畫執(zhí)行完畢后setVisibility()方法隱藏,顯示View的時(shí)候,在動(dòng)畫啟動(dòng)前調(diào)用setVisibility()方法顯示。
到此這篇關(guān)于Android如何使用圓形揭露動(dòng)畫巧妙地隱藏或顯示View的文章就介紹到這了,更多相關(guān)Android隱藏或顯示View內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在啟動(dòng)欄制作android studio啟動(dòng)圖標(biāo)
這篇文章主要介紹了在啟動(dòng)欄制作android studio啟動(dòng)圖標(biāo)的相關(guān)知識(shí),需要的朋友可以參考下2018-03-03Android互聯(lián)網(wǎng)訪問圖片并在客戶端顯示的方法
這篇文章主要介紹了Android互聯(lián)網(wǎng)訪問圖片并在客戶端顯示的方法,結(jié)合實(shí)例分析了Android處理圖片的技巧,并附帶了Android的URL封裝類,網(wǎng)絡(luò)連接封裝類與輸出流封裝類,需要的朋友可以參考下2015-12-12Android調(diào)用系統(tǒng)圖庫獲取圖片的方法
這篇文章主要為大家詳細(xì)介紹了Android調(diào)用系統(tǒng)圖庫獲取圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Android自定義View實(shí)現(xiàn)角度選擇器
前幾天在Google Photos查看照片,用了一下它的圖片剪裁功能,于是我馬上就被其界面和操作吸引。后來想模仿做一個(gè)和Google Photos裁圖頁面幾乎一模一樣的角度選擇器,本文比較基礎(chǔ),在閱讀本文前只需要掌握最基礎(chǔ)的自定義View知識(shí)和Android事件知識(shí)。下面來一起學(xué)習(xí)下吧。2016-11-11Android View 測(cè)量流程(Measure)全面解析
這篇文章主要為大家全面解析了Android View 測(cè)量流程Measure,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Android學(xué)習(xí)筆記——Menu介紹(三)
今天繼續(xù)昨天沒有講完的Menu的學(xué)習(xí),主要是Popup Menu的學(xué)習(xí),需要的朋友可以參考下2014-10-10Android組件化工具ARouter使用方法詳細(xì)分析
這篇文章主要介紹了Android組件化工具ARouter使用方法,組件化項(xiàng)目存在各個(gè)模塊之間耦合,通信麻煩的問題,為了解決這個(gè)問題,阿里巴巴的開發(fā)者就搞出了Arouter這個(gè)框架,以解決上述問題2022-10-10