【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】Android可自定義神奇動(dòng)效的卡片切換視圖實(shí)例

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】Android可自定義神奇動(dòng)效的卡片切換視圖實(shí)例

前言面對(duì)眾多卡片層疊效果，我們的產(chǎn)品童鞋也突發(fā)奇想，搞出了另一種卡片層疊切換展示的交互，而且產(chǎn)品狗們居然要求多做幾種動(dòng)效給他們看，好讓他們選擇，這簡(jiǎn)直就是要搞事情啊，whatareyou弄啥咧？！“哥哥我做不到啊啊呸”，做為一名有節(jié)操的程序猿，自然是不能說(shuō)出這么沒(méi)有出息的話(huà)，哥就滿(mǎn)足你們，于是，出了個(gè)可自定義動(dòng)效的卡片切換視圖，效果如下所示思路首先，要展示出卡片層疊的視覺(jué)效果。在這里，我們通過(guò)方塊的縮放大小差異以及在Y方向上的位置差異，來(lái)展現(xiàn)這種視覺(jué)效果。其次，要能夠方便的定義卡片視圖內(nèi)容。我們通過(guò)都很熟悉的設(shè)置Adapter的方式來(lái)構(gòu)建內(nèi)容視圖。最后，要能夠自定義動(dòng)效。我們通過(guò)定義一個(gè)由0到1的ValueAnimator，即每個(gè)動(dòng)畫(huà)的過(guò)程，其實(shí)就是該ValueAnimator在一個(gè)動(dòng)畫(huà)周期內(nèi)，從0變化到1的過(guò)程，0表示動(dòng)畫(huà)剛開(kāi)始，1表示動(dòng)畫(huà)結(jié)束了，0.5則表示這一輪動(dòng)畫(huà)已經(jīng)執(zhí)行到了一半。這樣，通過(guò)轉(zhuǎn)換器以及插值器，我們就可以根據(jù)ValueAnimator實(shí)時(shí)的值，來(lái)設(shè)置當(dāng)前正在執(zhí)行動(dòng)畫(huà)的卡片應(yīng)該有的“樣子”。總覽我們給出三種基本的動(dòng)畫(huà)模式并通過(guò)Helper類(lèi)來(lái)處理所有的動(dòng)畫(huà)邏輯，以及Adapter來(lái)生成卡片視圖在onMeasure時(shí)根據(jù)卡片寬高比來(lái)設(shè)置卡片的尺寸，在此請(qǐng)注意，當(dāng)前情況下卡片寬度與整體容器寬度一致，后續(xù)通過(guò)自定義的方式，通過(guò)縮放來(lái)產(chǎn)生卡片的視覺(jué)效果。那么如此之后，自然Helper中就保存了視圖的主要數(shù)據(jù)與參數(shù)細(xì)節(jié)那么，動(dòng)畫(huà)到底是如何實(shí)現(xiàn)的，以及如何自定義的呢，我們以通用動(dòng)畫(huà)為例，來(lái)看看動(dòng)畫(huà)的主要流程首先，在ValueAnimator更新的時(shí)候，獲得當(dāng)前的動(dòng)畫(huà)系數(shù)，依次來(lái)執(zhí)行動(dòng)畫(huà)接著，對(duì)需要執(zhí)行動(dòng)畫(huà)的卡片，執(zhí)行動(dòng)畫(huà)，以ANIM_TYPE_FRONT動(dòng)畫(huà)模式為例，當(dāng)選中的卡片移動(dòng)到最前的時(shí)候，原來(lái)在這張卡片之前的所有卡片，都要向后移動(dòng)一位，來(lái)留出第一個(gè)的位置最后，通過(guò)轉(zhuǎn)換器，對(duì)卡片進(jìn)行自定義動(dòng)畫(huà)處理而轉(zhuǎn)換器的具體實(shí)現(xiàn)則以DefaultCommonTransformer為例對(duì)于向第一位移動(dòng)的選中卡片，也是同理，只不過(guò)是根據(jù)該卡片對(duì)應(yīng)的轉(zhuǎn)換器來(lái)進(jìn)行自定義動(dòng)畫(huà)的轉(zhuǎn)換。最后的效果，就像演示圖中第一次點(diǎn)擊，圖片向前翻轉(zhuǎn)到第一位的效果一樣。對(duì)于產(chǎn)品狗突如其來(lái)的想法，咱們程序猿不善于口水仗的，就只能用代碼來(lái)讓他們來(lái)服氣了。畢竟，大家還都是伐木累嘛，哈哈。當(dāng)實(shí)現(xiàn)某個(gè)東西遇到困難時(shí)，不妨想想Android系統(tǒng)自身的一些實(shí)現(xiàn)方式，比如參考List