共享元素实现列表大图浏览的过度动画（高仿微信朋友圈大图拖拽退出）

共享元素小图到大图浏览，即recycleView到viewPager,pager左右滑动，共享动画item改变

（补充功能：高仿微信朋友圈大图查看器，拖拽退出）

:

①、viewPager滑动到当前gridView还没有滑到的item.主动让gridView下滑

②、共享元素滑动改变共享item

③、注意：在网络图片加载中。增加了图片加载进度。解决动画的弊端

（为了效果展示压缩了 展示的gif,有点模糊，请下载观看最佳效果）

项目演示：

一、滑动改变共享item

---

二、滑动到列表不可见，列表下滑

---

项目中有2个demo。

demo1：引用的是本地资源，目的是怕时间过久，网络url失效。

demo2：是网络url。此时会有网络问题，图片一时半会加载不除来，此时会有个延缓加载共享动画的机制。同时博主还做了对图片加载进度的操作，有效的避免了这个弊端。如果本文对您有帮助，github请帮忙star下。

在这里单个共享元素动画，博主就不说了。网上一搜一大把

这里主要有2个方法：

1、setExitSharedElementCallback（）

2、setEnterSharedElementCallback（）

然后着重讲一下。有些时候有需求，动画结束后要进行一些操作。

这里共享动画的监听也是有的。大部分网上的资料都没有提及，代码如下（这个监听应该在后一个activity中）：

getWindow().getSharedElementEnterTransition().addListener(new Transition.TransitionListener() {

    @Override

    public void onTransitionStart(Transition transition) {

        LogUtils.i("共享元素动画的实现", "onTransitionStart");

    }

    @Override

    public void onTransitionEnd(Transition transition) {

        LogUtils.i("共享元素动画的实现", "onTransitionEnd");

    }

    @Override

    public void onTransitionCancel(Transition transition) {

    }

    @Override

    public void onTransitionPause(Transition transition) {

    }

    @Override

    public void onTransitionResume(Transition transition) {

    }

});

下面是博主整合的：高仿微信朋友圈大图查看，拖拽退出：

 ●   正常展示：

 ●   支持长图：

 

●   支持gif动图：

●   支持视频：

●   妥善处理好了未加载图：

下面是本人github地址，欢迎star

github传送门