Android高級UI開發(fā)（二十七）Material Design之轉(zhuǎn)場動畫（一）

什么是轉(zhuǎn)場動畫，我們先看一副動圖：

當(dāng)我們點擊第一個“湖面”縮略圖時，跳轉(zhuǎn)到第二個頁面時有一個從左上角擴展圖片的動畫，而且這2張圖片展示的是同一個內(nèi)容元素，給用戶一個很好的過渡效果，平滑的從第一個頁面過渡到第二個頁面。

今天我們用一些簡單的實例來展示一下轉(zhuǎn)場動畫如何實現(xiàn)，我們接下來要實現(xiàn)的第一個轉(zhuǎn)場動畫效果如下：

我們來看一下這里面是如何實現(xiàn)的（源碼-：https://download.csdn.net/download/gaoxiaoweiandy/11097376).

1. 布局文件

這里為了轉(zhuǎn)場我們有MainActivity 與? SecondActivity共兩個頁面。第一個頁面展示小圖，第二個頁面展示大圖。因此我們就有2個布局：

activity_main.xml：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ffffff"

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

app:title="轉(zhuǎn)場動畫"

app:titleTextColor="#ffffff"

app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

/>

android:layout_margin="10dp"

android:layout_below="@+id/toolbar"

android:id="@+id/iv1"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:scaleType="centerCrop"

android:transitionName="iv_jackson"

android:src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529184552_10228."

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:transitionName="bt"

android:text="轉(zhuǎn)場" />

acitivty_second.xml:

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

app:title="網(wǎng)易新聞"

app:titleTextColor="#ff0" />

android:id="@+id/iv1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529184552_19591." />

android:id="@+id/btBack"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:text="返回偶像"

android:transitionName="bt" />

第一個布局的imageview展示杰克遜的縮略圖，然后可以點擊BUTTON來跳轉(zhuǎn)到第二個頁面。

第二個布局也有一個imageview用來展示杰克遜的大圖，然后點擊BUTTON可以返回到第一個頁面。

要實現(xiàn)從縮略圖到大圖的轉(zhuǎn)場過渡動畫，我們是否發(fā)現(xiàn)兩個布局里的imageview的android:transitionName這個屬性值是相同的，這個transitionName就叫做共享元素，它是兩個頁面中2個imageview的紐帶，是實現(xiàn)轉(zhuǎn)場動畫的關(guān)鍵。只有兩個頁面中的Imageview的android:transitionName名字相同，才能展示出轉(zhuǎn)場效果。當(dāng)然這里是以Imageview舉例而已，像其它的布局BUTTON等也可以實現(xiàn)轉(zhuǎn)場效果。OK，我們設(shè)置了共享元素，接下來我們看代碼里如何處理，才能驅(qū)動起來這個動畫。我們先看一下MainActivity.java中的代碼。

2. 代碼

2.1?第一個頁面MainActivity.java

btTransition.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

ActivityOptionsCompat optionsCompat =

ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, iv1,"iv_jackson");

Intent intent = new Intent(MainActivity.this, SecondActivity.class);

MainActivity.this.startActivity(intent, optionsCompat.toBundle());

}

});

我們主要看一下“轉(zhuǎn)場”按鈕，單擊它跳轉(zhuǎn)到SecondActivity頁面同時執(zhí)行過渡的轉(zhuǎn)場動畫。這里我們startAcitivity比平時多了一個參數(shù)，那就是ActivityOptionsCompt，這個對象又由makeSceneTransitionAnimation函數(shù)創(chuàng)建，我們來看一下makeSceneTransitionAnimation的各個參數(shù)：

參數(shù)1：當(dāng)前頁面上下文，MainActivity.this.

參數(shù)2：要實現(xiàn)轉(zhuǎn)場的控件，這里我們是imageview id = iv1

參數(shù)3：就是共享元素名，就是前面所講述的2個頁面中的2個imagview公有的transitionName.

這樣就創(chuàng)建了一個頁面轉(zhuǎn)場動畫的ActivityOptionsCompat配置項對象，將這個對象代入startAcitivty就實現(xiàn)了頁面之間跳轉(zhuǎn)時的轉(zhuǎn)場動畫。

2.2 第二個頁面SecondActivity.java

在acitivty_second.xml布局里我們定義了一個“返回偶像”的按鈕，點擊?它可以返回到MainActivity.java，同時也讓返回跳轉(zhuǎn)頁面的同時執(zhí)行轉(zhuǎn)場動畫，這里我們只需在“返回偶像”的按鈕的單擊響應(yīng)函數(shù)里調(diào)研“onBackPress()”函數(shù)。因為該函數(shù)里也實現(xiàn)了類似2.1中的startActivity，也就是說api已經(jīng)為我們寫好了轉(zhuǎn)場代碼。執(zhí)行的動畫效果就是：第二個頁面中的大圖片向第一個頁面中小圖位置的方向上逐漸縮小。

今天我們對轉(zhuǎn)場動畫有了一個初步認識,并且用實例介紹了共享元素, 明天我們?nèi)パ芯恳幌露鄠€共享元素的轉(zhuǎn)場動畫.

（源碼-：https://download.csdn.net/download/gaoxiaoweiandy/11097376).

Android

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。