简单玩转ViewPager+Fragment动画效果，实现京东淘宝物流卡片效果 (附源码)

fox_soyoung 发布于2019-08-16 16:49 / 401人阅读

摘要：物流卡片新版的京东和淘宝有一个交互感觉不错，待收货订单会有类似探探那样的卡片效果，滑动查看下一条物流的信息，近期部门说要做这个效果，于是我就写了一个，现在分享出来和大家交流一下。

物流卡片Demo

新版的京东和淘宝有一个交互感觉不错，
待收货订单会有类似探探那样的卡片效果，
滑动查看下一条物流的信息，
近期UI部门说要做这个效果，
于是我就写了一个Demo，
现在分享出来和大家交流一下。

本Demo使用的是ViewPager+Fragment的实现方式，
只是给ViewPager增加了Transformer，
详细内容点击文章底部的github链接，
共同探讨吧。

话不多说，
看效果：

当然，
既然写了和京东一样的层叠效果，
那何不顺便多写两个呢？

缩放效果：

风车效果：

经常用淘宝的同学可能发现了，
最后的这个风车效果和淘宝的很像，
但是我的效果露出了前后两张卡片的角角，
这里就给同学们留个彩蛋，
代码中某处我留下了一个判断，
用于控制风车效果下是否显示前后两张卡片的角角，
当关闭的时候，
就和淘宝的效果一样咯。

关于这三个效果的代码，
在Demo中CardTransformer.java里。

从图片中大家也发现了，
除了这三个切换效果之外，
我还写了三个出场动画效果，
请大家过目：

感兴趣的同学把Demo下载下来之后，
可以打开这个文件看一下。

代码很简单，
注释我也写得很全，
如果还是有疑问的地方，
欢迎在文章下评论，
或者加入QQ讨论群：569614530，
群里找我，
我是尘少。

本文github链接：
https://github.com/Bamboy1203...

也可以先下载apk安装体验：

云服务器 GPU云服务器 Viewpager翻页效果跳转效果fragment 浮动效果动画翻转动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/74200.html

登陆后可评论

我要关注我要私信