资讯专栏INFORMATION COLUMN

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

fox_soyoung / 307人阅读

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

物流卡片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

相关文章

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

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

    Anshiii 评论0 收藏0
  • Android控件 - 收藏集 - 掘金

    摘要:贝塞尔曲线根据万能的,支持上拉加载添加掘金最近的项目,使用比较多,导致需要写大量的和。转载请注明来源会了这些,你也能成为自定义大咖掘金自定义自定义主要掌握以下四块内容绘制机制掌握及相关类的使用。 ViewPager+Fragment 组合的预加载和懒加载 - Android - 掘金转载请标明出处: http://www.jianshu.com/p/7a47... 预加载介绍 View...

    ACb0y 评论0 收藏0
  • 滑动 - 收藏集 - 掘金

    摘要:分析提到侧滑删除,一个经典的例子就是玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源,估计有一段历史了。列表左右滑动开源组件掘金是一款用于为上的排布提供左滑右滑操作的库。 Android 仿 YouTube 拖拽视频效果的实现 - Android - 掘金Android仿YouTube拖拽视频效果的实现 youtube-like-drag-video-view 代码已经开源到GitH...

    ShevaKuilin 评论0 收藏0
  • 高仿 - 收藏集 - 掘金

    摘要:自定义仿京东手势解锁掘金早上看个,忘了吃饭,最后定位到的问题,反馈了。动画仿新浪微博雷达搜索效果掘金前言在应用中使用动画,可以给用户带来良好的交互体验。掘金该应用内容灵感来源于应用。 自定义 view——仿京东手势解锁 - Android - 掘金早上看个bug,忘了吃饭,最后定位到ROM的问题,反馈了。忙完了是时候享受了,现在戴上耳机,写个清爽点的文章。虽然很简单,刷刷存在感也好啊,...

    jasperyang 评论0 收藏0
  • 仿淘宝京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、Fragmen

    摘要:链接实现效果图首先看一下实现效果图简单的当然,如果将替换成其他的之类的也是支持的。不过,并非所有的子都需要遍历,只有与相关的才需要判断。以上就是常用商品详情黏滞布局的实现。最后附上链接欢迎链接 背景 对于电商App,商品详情无疑是很重要的一个模块,观察主流购物App的详情界面,发现大部分都是做成了上下两部分,上面展示商品规格信息,下面是H5商品详情,或者是嵌套了一个包含H5详情及评论列...

    Amos 评论0 收藏0

发表评论

0条评论

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