主要内容使用系统提供的 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"?>

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/iv_grid_welfare"

android:layout_width="match_parent"

android:layout_height="250dp"

android:scaleType="centerCrop"

android:transitionName="@string/share_str"/>

大图页面布局如下：<?xml  version="1.0" encoding="utf-8"?>

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">

android:id="@+id/iv_big_image"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:transitionName="@string/share_str"/>

从下一个页面返回关闭共享动画

使用 finishAfterTransition(); 替换 finish() 关闭页面。

以上就实现了两个页面之间跳转的共享动画效果。

但是动画从大图页面返回时会出现黑屏或者白屏。这是什么原因呢？

这个原因是由于由于我们Activity设置的主题决定的，在 AndroidManifest.xml中找到我们设置的主题，修改为透明主题即可，Theme代码如下：

android:name=".big_image.BigImageActivity"

android:theme="@style/BigImageTranslateTheme" />

true

true

@android:color/transparent

作者：_龙衣

链接：https://www.jianshu.com/p/c564f099cd4e