前言
Activity的轉場動畫很早就有,但是太過于單調,樣式也不好看,本文將給大家介紹了關于Android實現Reveal圓形Activity轉場動畫的相關內容,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧
一、效果
二、知識點
CircularReveal動畫、透明主題、轉場動畫(非必須)
三、方案
假設有兩個Activity A和B。Reveal圓形Activity轉場動畫效果先從A到B,那么基本方案如下:
四、實現
4.1 初始界面Activity A
在Activity A中需要定義好主題、布局以及啟動Activity B的方法。因為當不需要執行返回動畫的時候,要把Activity A銷毀,這時候一定是在后臺銷毀的,所以要把主題相關設置為透明,不然會在Activity B中顯示Activity A銷毀界面。
<style name="FullScreen" parent="@style/Theme.AppCompat.Light.NoActionBar"><item name="android:windowFullscreen">true</item><item name="android:windowContentOverlay">@null</item><item name="android:windowIsTranslucent">true</item><item name="android:windowBackground">@android:color/transparent</item><item name="android:backgroundDimEnabled">false</item><item name="android:windowTranslucentNavigation">true</item><item name="android:windowTranslucentStatus">true</item><item name="android:windowDrawsSystemBarBackgrounds">true</item></style>
然后是布局設置,這一步比較簡單,這里以啟動界面為例,顯示一張鋪滿全屏的圖片,下面覆蓋一個進度條。
<?xml version="1.0" encoding="utf-8"?><FrameLayout 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"tools:context=".SplashActivity"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY"android:src="@mipmap/wallace" /><ProgressBarandroid:id="@+id/progressbar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center_horizontal"android:layout_marginBottom="180dp" /></FrameLayout>
在Activity A中啟動Activity B代碼如下,使用轉場動畫API執行,當然也可以使用ActivityCompat.startActivity(this, intent, null); overridePendingTransition(0, 0);這種方式。在這段代碼中,把Activity A中開始執行Reveal圓形動畫的坐標點傳遞給Activity B,因為動畫是在Activity B中執行的。
public void presentActivity(View view) {ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, view, "transition");int revealX = (int) (view.getX() + view.getWidth() / 2);int revealY = (int) (view.getY() + view.getHeight() / 2);Intent intent = new Intent(this, MainActivity.class);intent.putExtra(MainActivity.EXTRA_CIRCULAR_REVEAL_X, revealX);intent.putExtra(MainActivity.EXTRA_CIRCULAR_REVEAL_Y, revealY);ActivityCompat.startActivity(this, intent, options.toBundle());//ActivityCompat.startActivity(this, intent, null); overridePendingTransition(0, 0);}
4.2 動畫界面Activity B
在Activity B中同樣需要定義好主題、布局以及執行動畫的方法。上面方案中也說到,Activity B需要是透明主題,而且布局文件不能為透明,隨便設置一個背景即可。因為動畫效果是從Activity A過度到Activity B,也就是啟動Activity B一切準備就緒之后,顯示其布局。同時開始執行ViewAnimationUtils.createCircularReveal動畫,createCircularReveal會把根布局慢慢展開。這樣就形成了上面的動畫效果。
主題設置如下:
<style name="AppTheme.Transparent" parent="AppTheme"><item name="android:windowIsTranslucent">true</item><item name="android:windowBackground">@android:color/transparent</item><item name="android:windowDrawsSystemBarBackgrounds">true</item></style>
布局設置如下,注意根布局背景設置:
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout 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:id="@+id/root_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/holo_blue_dark"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>
最后就是執行動畫的代碼,先把根據不設置為不可見,然后在跟布局測量完畢之后開始執行動畫。
if (savedInstanceState == null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP &&intent.hasExtra(EXTRA_CIRCULAR_REVEAL_X) &&intent.hasExtra(EXTRA_CIRCULAR_REVEAL_Y)) {rootLayout.setVisibility(View.INVISIBLE);revealX = intent.getIntExtra(EXTRA_CIRCULAR_REVEAL_X, 0);revealY = intent.getIntExtra(EXTRA_CIRCULAR_REVEAL_Y, 0);ViewTreeObserver viewTreeObserver = rootLayout.getViewTreeObserver();if (viewTreeObserver.isAlive()) {viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {revealActivity(revealX, revealY);rootLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);}});}} else {rootLayout.setVisibility(View.VISIBLE);}
protected void revealActivity(int x, int y) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {float finalRadius = (float) (Math.max(rootLayout.getWidth(), rootLayout.getHeight()) * 1.1);// create the animator for this view (the start radius is zero) Animator circularReveal = ViewAnimationUtils.createCircularReveal(rootLayout, x, y, 0, finalRadius);circularReveal.setDuration(400);circularReveal.setInterpolator(new AccelerateInterpolator());// make the view visible and start the animation rootLayout.setVisibility(View.VISIBLE);circularReveal.start();} else {finish();}}
最后實現效果如下:
五、參考:
好了,以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答