Android 共享动画实现点击列表图片跳转查看大图页面

小咪咪 2022-04-04 08:11 453阅读 0赞

#### 主要内容 ####

*  使用系统提供的 `API` 实现共享动画
 *  在实现过程中遇到的问题
    
     *  图片点击和关闭之后会出现短暂的黑屏问题

> 实现的动画效果如下：

![共享动画.gif][.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>

本文完~，欢迎留言交流讨论。

[.gif]: /images/20220404/d4a15d233f3e44d089b005a42bcae151.png