摘要：物流卡片新版的京東和淘寶有一個(gè)交互感覺(jué)不錯(cuò)，待收貨訂單會(huì)有類似探探那樣的卡片效果，滑動(dòng)查看下一條物流的信息，近期部門(mén)說(shuō)要做這個(gè)效果，于是我就寫(xiě)了一個(gè)，現(xiàn)在分享出來(lái)和大家交流一下。

新版的京東和淘寶有一個(gè)交互感覺(jué)不錯(cuò)，
待收貨訂單會(huì)有類似探探那樣的卡片效果，
滑動(dòng)查看下一條物流的信息，
近期UI部門(mén)說(shuō)要做這個(gè)效果，
于是我就寫(xiě)了一個(gè)Demo，
現(xiàn)在分享出來(lái)和大家交流一下。

本Demo使用的是ViewPager+Fragment的實(shí)現(xiàn)方式，
只是給ViewPager增加了Transformer，
詳細(xì)內(nèi)容點(diǎn)擊文章底部的github鏈接，
共同探討吧。

話不多說(shuō)，
看效果：

當(dāng)然，
既然寫(xiě)了和京東一樣的層疊效果，
那何不順便多寫(xiě)兩個(gè)呢？

縮放效果：

風(fēng)車效果：

經(jīng)常用淘寶的同學(xué)可能發(fā)現(xiàn)了，
最后的這個(gè)風(fēng)車效果和淘寶的很像，
但是我的效果露出了前后兩張卡片的角角，
這里就給同學(xué)們留個(gè)彩蛋，
代碼中某處我留下了一個(gè)判斷，
用于控制風(fēng)車效果下是否顯示前后兩張卡片的角角，
當(dāng)關(guān)閉的時(shí)候，
就和淘寶的效果一樣咯。

關(guān)于這三個(gè)效果的代碼，
在Demo中CardTransformer.java里。

從圖片中大家也發(fā)現(xiàn)了，
除了這三個(gè)切換效果之外，
我還寫(xiě)了三個(gè)出場(chǎng)動(dòng)畫(huà)效果，
請(qǐng)大家過(guò)目：

感興趣的同學(xué)把Demo下載下來(lái)之后，
可以打開(kāi)這個(gè)文件看一下。

代碼很簡(jiǎn)單，
注釋我也寫(xiě)得很全，
如果還是有疑問(wèn)的地方，
歡迎在文章下評(píng)論，
或者加入QQ討論群：569614530，
群里找我，
我是塵少。

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

也可以先下載apk安裝體驗(yàn)：