资讯专栏INFORMATION COLUMN

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

fox_soyoung / 401人阅读

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

物流卡片Demo

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

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

话不多说,
看效果:

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

缩放效果:

风车效果:

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

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

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

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

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

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

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

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

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

相关文章

发表评论

0条评论

fox_soyoung

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<