【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android仿知乎日?qǐng)?bào)開屏頁(yè)效果

【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android仿知乎日?qǐng)?bào)開屏頁(yè)效果

先看看知乎日?qǐng)?bào)開屏頁(yè)的效果，非常漂亮的開屏效果

-resize(2).gif然后我來一個(gè)

-resize(1).gif也不錯(cuò)~感覺可以以假亂真了~很簡(jiǎn)單，直接開始。

實(shí)現(xiàn)這個(gè)效果先制定個(gè)三步走策略底部布局上滑展示直接上代碼吧，屬性動(dòng)畫基本使用在位移動(dòng)畫結(jié)束的時(shí)候，調(diào)用了自定義的view的方法，開始了畫弧的操作。畫個(gè)知弧接下來開始畫畫~自定義一個(gè)view，重寫ondraw方法，開畫之前先初始化一個(gè)合適的畫筆。mPaint1用來畫弧，設(shè)置填充樣式為描邊，這樣起碼我們就能輕松畫一個(gè)圓環(huán)了。其實(shí)要畫的知弧就是一個(gè)圓環(huán)被啃去了一塊的感覺~但被啃的地方很光滑，所以需要一個(gè)圓頭的畫筆。

mPaint2用來畫外面的圓角矩形環(huán)，設(shè)置也差不多。代碼量很少，但要明確環(huán)的畫法，不論是畫圓環(huán)還是圓角矩形環(huán)，需要先確定一個(gè)基準(zhǔn)矩形。基準(zhǔn)矩形的位置和大小確定環(huán)的位置和大小。畫弧的方法canvas.drawArc中的參數(shù)23設(shè)置了開始畫弧的位置和畫弧的范圍?？匆幌逻\(yùn)行效果，圓弧的起始畫點(diǎn)在圓心的正下方，X軸正方向?yàn)?度，所以起始畫點(diǎn)為90度。接下來就使用不斷增大畫弧的范圍的方式來完成動(dòng)畫的實(shí)現(xiàn)。上代碼使用ValueAnimator.ofFloat創(chuàng)建一個(gè)值為0-270的動(dòng)畫，添加狀態(tài)監(jiān)聽，在動(dòng)畫執(zhí)行的過程中不斷增大掃過的范圍并重繪視圖從而實(shí)現(xiàn)了畫弧的動(dòng)畫效果。整個(gè)過程就是canvas配合屬性動(dòng)畫的方式完成了動(dòng)態(tài)繪圖，一點(diǎn)也不復(fù)雜。顯示圖片這里我使用的是Glide加載的本地圖片，設(shè)置了延遲加載把握?qǐng)D片加載時(shí)機(jī)，獲得更好的開屏效果這里個(gè)人認(rèn)為知乎也是用某種方式預(yù)先把圖片下載到本地完成來把握精確地加載時(shí)機(jī)，不知道是不是這樣。。最后貼一下代碼activity自定義view布局文件我個(gè)人挺喜歡這些實(shí)現(xiàn)起來不復(fù)雜但體驗(yàn)非常好的設(shè)計(jì)，見到了就努力實(shí)現(xiàn)一下，然后邊學(xué)邊分享，要是跟我