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

共享元素小图到大图浏览,即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传送门

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容