Android 共享動畫實現點選列表圖片跳轉檢視大圖頁面
摘要：
主要內容
使用系統提供的 API 實現共享動畫
在實現過程中遇到的問題
圖片點選和關閉之後會出現短暫的黑屏問題
實現的動畫效果如下：
共享動畫.gif
具體實現
這個效果是在兩...
主要內容
- 使用系統提供的
API實現共享動畫 - 在實現過程中遇到的問題
- 圖片點選和關閉之後會出現短暫的黑屏問題
實現的動畫效果如下：
共享動畫.gif
具體實現
這個效果是在兩個頁面之間的切換動畫，既然是兩個頁面之間的切換，那麼我們頁面跳轉程式碼，設定跳轉動畫，即可。
頁面跳轉的程式碼如下：
Intent intent = new Intent(context, BigImageActivity.class); intent.putExtra(AppConfig.IMAGE_URL,imageUrl); // 新增跳轉動畫 context.startActivity(intent, ActivityOptionsCompat.makeSceneTransitionAnimation( (Activity) context, shareImage, context.getString(R.string.share_pic_str)) .toBundle());
可以看到這裡用到了 ActivityOptionsCompat.makeSceneTransitionAnimation ,這個就是頁面跳轉的轉場動畫。
通過檢視原始碼可以知道這個轉場動畫只支援 Android 5.0 以上， 它的原始碼實現如下：
public static ActivityOptionsCompat makeSceneTransitionAnimation(Activity activity,
View sharedElement, String sharedElementName) {
if (Build.VERSION.SDK_INT >= 21) {
return createImpl(ActivityOptions.makeSceneTransitionAnimation(
activity, sharedElement, sharedElementName));
}
return new ActivityOptionsCompat();
}
// 上面的 makeSceneTransitionAnimation 方法的實現
public static ActivityOptions makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName) {
throw new RuntimeException("Stub!");
}
// 上面的 makeSceneTransitionAnimation 方法的另一個實現 ，可以看出是共享動畫是支援多個檢視的
@SafeVarargs
public static ActivityOptions makeSceneTransitionAnimation(Activity activity, Pair... sharedElements) {
throw new RuntimeException("Stub!");
}
View xml
第二個引數這裡是 ImageView 控制元件，第三個引數是自己定義的字串，這裡是 share_image_view 。
那麼在佈局程式碼中的實現如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_grid_welfare" android:layout_width="match_parent" android:layout_height="250dp" android:scaleType="centerCrop" android:transitionName="@string/share_str"/> </LinearLayout>
大圖頁面佈局如下：
<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".big_image.BigImageActivity"> <ImageView android:id="@+id/iv_big_image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:transitionName="@string/share_str"/> </android.support.constraint.ConstraintLayout>
從下一個頁面返回關閉共享動畫
使用 finishAfterTransition(); 替換 finish() 關閉頁面。
以上就實現了兩個頁面之間跳轉的共享動畫效果。
但是動畫從大圖頁面返回時會出現黑屏或者白屏。這是什麼原因呢？
這個原因是由於由於我們 Activity 設定的主題決定的，在 AndroidManifest.xml 中找到我們設定的主題，修改為透明主題即可， Theme 程式碼如下：
<activity android:name=".big_image.BigImageActivity" android:theme="@style/BigImageTranslateTheme" /> <!--轉場動畫--> <style name="BigImageTranslateTheme" parent="AppTheme"> <item name="android:windowIsTranslucent">true</item> <item name="android:windowContentTransitions">true</item> <item name="android:windowBackground">@android:color/transparent</item> </style>
本文完~，歡迎留言交流討論。