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

主要内容

使用系统提供的 API 实现共享动画

在实现过程中遇到的问题

图片点击和关闭之后会出现短暂的黑屏问题

实现的动画效果如下：

具体实现

这个效果是在两个页面之间的切换动画，既然是两个页面之间的切换，那么我们页面跳转代码，设置跳转动画，即可。

页面跳转的代码如下：

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。

那么在布局代码中的实现如下：

大图页面布局如下：

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

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

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

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

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

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