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

7 篇文章 0 订阅
6 篇文章 0 订阅

物流卡片Demo

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

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

话不多说,
看效果:
层叠效果

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

缩放效果:
缩放效果

风车效果:
风车效果

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

关于这三个效果的代码,
在Demo中CardTransformer.java里。
在这里插入图片描述

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

感兴趣的同学把Demo下载下来之后,
可以打开这个文件看一下。
在这里插入图片描述

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

本文github链接:
https://github.com/Bamboy120315/ExpressCard

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值