Android 實(shí)現(xiàn)的下拉刷新效果
下面是自己實(shí)現(xiàn)的效果:
可以將動(dòng)畫分解成:
睜眼毛驢繞著中心地球旋轉(zhuǎn),并且在到達(dá)地球中心時(shí),切換為閉眼毛驢,最后發(fā)射出去
地球自我旋轉(zhuǎn),隨著下拉而緩緩上升,達(dá)到半徑距離后停止上升
一顆上下來(lái)回移動(dòng)的衛(wèi)星
2、實(shí)現(xiàn)(1)下載趕集app,然后將其后綴名改為zip解壓獲取我們需要的資源圖片:
(2) 我們先實(shí)現(xiàn)衛(wèi)星的上下移動(dòng)
核心代碼:
@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);Matrix matrixPlanet = new Matrix();matrixPlanet.setScale(0.4f, 0.4f);matrixPlanet.postTranslate(locationX / 2 * 3, locationY /4);matrixPlanet.postTranslate(0, upDateY);canvas.drawBitmap(flyingPlanet,matrixPlanet,null); } public void startTranslatePlanet(int duration){ValueAnimator valueAnimator = new ValueAnimator();valueAnimator.setFloatValues(-50.0f, 50.0f);valueAnimator.setDuration(duration);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) {upDateY = (float) animation.getAnimatedValue();invalidate(); }});valueAnimator.setRepeatCount(ValueAnimator.INFINITE);valueAnimator.setRepeatMode(ValueAnimator.REVERSE);valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.start(); }
思想:使用Matrix來(lái)設(shè)置圖形變換,調(diào)用setScale()設(shè)置Bitmap縮放大小,然后調(diào)用postTranslate()將Bitmap平移到衛(wèi)星的初始位置。最后使用ValueAnimator計(jì)算衛(wèi)星上下移動(dòng)的距離,再調(diào)用postTranslate()即可。
(3)地球自我旋轉(zhuǎn),隨著下拉而緩緩上升,達(dá)到半徑距離后停止上升。
核心代碼:
@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);Matrix matrixBall = new Matrix();matrixBall.setScale(0.2f, 0.2f);if ((locationY + upDateY) > (locationY - flyingBall_Height / 2)) { matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY + upDateY); matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2) );}else { matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY - flyingBall_Height / 2); matrixBall.postRotate(degreeBall, locationX, locationY);}canvas.drawBitmap(flyingBall, matrixBall, null);canvas.drawBitmap(cloudBig , null , rectfCloudBig , null);canvas.drawBitmap(cloudSmall , null , rectfCloudSmall ,null); } public void startBallAnim(long duration) {ValueAnimator valueAnimator = new ValueAnimator();valueAnimator.setFloatValues(0.0f, 360.0f);valueAnimator.setDuration(duration);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) {degreeBall = (float) animation.getAnimatedValue();invalidate(); }});valueAnimator.setRepeatCount(ValueAnimator.INFINITE);valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.start(); } public void UpBall(float offsetY){if (upDateY!=offsetY) { upDateY = offsetY; invalidate();} } public void accelerateBall(long duration) {clearAnimation();startBallAnim(duration); }
思想:同樣使用Matrix,先設(shè)置縮放大小。調(diào)用
matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY + upDateY);
將bitmap隱藏在view可視范圍的下方,然后通過下拉刷新列表獲取下拉刷新的Y坐標(biāo)的改變量,調(diào)用postTranslate()上移改變量大小的距離即可。自轉(zhuǎn)動(dòng)畫的實(shí)現(xiàn),就是調(diào)用postRotate()方法 使用ValueAnimator 獲取改變量。因?yàn)榈厍蚴巧仙模晕覀冃枰獎(jiǎng)討B(tài)的設(shè)置旋轉(zhuǎn)的中心。
matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2) );
只需要改變減去下拉刷新列表獲取下拉刷新的Y坐標(biāo)的改變量就可以了。
(3) 睜眼毛驢繞著中心地球旋轉(zhuǎn),并且在到達(dá)地球中心時(shí),切換為閉眼毛驢,最后發(fā)射出去
核心代碼:
@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);Matrix matrix = new Matrix();matrix.setScale(0.3f, 0.3f);matrix.postTranslate(pointDonkey.getDx(), pointDonkey.getDy());matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2);matrix.postTranslate(0 , upDateY);canvas.drawBitmap(flyingDonkey, matrix, null); }
思想:與上面一樣,先調(diào)用setScale()設(shè)置縮放大小,在進(jìn)行平移旋轉(zhuǎn)操作的時(shí)候。
matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2); matrix.postTranslate(0 , upDateY);
我們先繞著還沒有移動(dòng)的地球旋轉(zhuǎn),然后調(diào)用postTranslate()將其與地球一起上升。
源碼地址:
https://github.com/sangenan/DonkeyRefresh
到這里就結(jié)束啦。
以上就是Android 實(shí)現(xiàn)的下拉刷新效果的詳細(xì)內(nèi)容,更多關(guān)于Android 下拉刷新的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. XML入門精解之結(jié)構(gòu)與語(yǔ)法2. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)3. Echarts自定義圖形的方法參考4. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享5. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理6. ASP基礎(chǔ)入門第二篇(ASP基礎(chǔ)知識(shí))7. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享8. ASP實(shí)現(xiàn)加法驗(yàn)證碼9. 解析原生JS getComputedStyle10. css代碼優(yōu)化的12個(gè)技巧
