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

主要内容

• 使用系统提供的 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>

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