Android 實現的下拉刷新效果

Posted on by

下面是自己實現的效果：

1、分析

可以將動畫分解成：

睜眼毛驢繞著中心地球旋轉，並且在到達地球中心時，切換為閉眼毛驢，最後發射出去

地球自我旋轉，隨著下拉而緩緩上升，達到半徑距離後停止上升

一顆上下來回移動的衛星

2、實現

(1)下載趕集app，然後將其後綴名改為zip解壓獲取我們需要的資源圖片：

(2) 我們先實現衛星的上下移動

核心代碼：

    @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來設置圖形變換,調用setScale()設置Bitmap縮放大小，然後調用postTranslate（）將Bitmap平移到衛星的初始位置。最後使用ValueAnimator計算衛星上下移動的距離，再調用postTranslate（）即可。

(3）地球自我旋轉，隨著下拉而緩緩上升，達到半徑距離後停止上升。

核心代碼：

    @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，先設置縮放大小。調用

matrixBall.postTranslate(locationX - flyingBall_Width / 2, locationY  + upDateY);

將bitmap隱藏在view可視范圍的下方，然後通過下拉刷新列表獲取下拉刷新的Y坐標的改變量，調用postTranslate（）上移改變量大小的距離即可。自轉動畫的實現，就是調用postRotate（）方法 使用ValueAnimator 獲取改變量。因為地球是上升的，所以我們需要動態的設置旋轉的中心。

matrixBall.postRotate(degreeBall, locationX, (locationY +upDateY + flyingBall_Height /2)  );

隻需要改變減去下拉刷新列表獲取下拉刷新的Y坐標的改變量就可以瞭。

(3) 睜眼毛驢繞著中心地球旋轉，並且在到達地球中心時，切換為閉眼毛驢，最後發射出去

核心代碼：

    @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);
    }

思想：與上面一樣，先調用setScale（）設置縮放大小，在進行平移旋轉操作的時候。

 matrix.postRotate(degree, locationX, locationY + flyingBall_Width / 2);
 matrix.postTranslate(0 , upDateY);

我們先繞著還沒有移動的地球旋轉，然後調用postTranslate（）將其與地球一起上升。

源碼地址：

https://github.com/sangenan/DonkeyRefresh

到這裡就結束啦。

以上就是Android 實現的下拉刷新效果的詳細內容，更多關於Android 下拉刷新的資料請關註WalkonNet其它相關文章！

推薦閱讀：