一個有趣的android加載動畫

前言

以前學習canvas畫圖的時候，寫了一個Android的加載動畫，代碼託管在github上面。

這裏是github的地址：github地址，歡迎star，歡迎關注

下面先附上實際運行的效果圖。

主要的工做思路

須要繪製這樣的動畫，首先要學習Canvas的一些基本知識，這裏我就不一一介紹了，推薦一個大神的教程，講解的很是好。

這裏是鏈接：Canvas學習鏈接

這裏要說一下，在沒有現成的View，須要本身實現的時候，就使用自定義View，通常繼承自View，SurfaceView或其餘的View，不包含子View。通常的狀況下，咱們要下面幾個函數，構造函數，測量View大小(onMeasure)，肯定View大小(onSizeChanged)，肯定子View佈局位置(onLayout)，繪製內容(onDraw)，最後在對外提供操做方法和監聽回調。

這個loading主要分爲下面幾個部分：

一、精度框的繪製，隨着進度的增長，內部的進度須要，向前填充。

可是，要注意，在左邊的部分是分爲，上半弧，矩形，下半弧，組成，中間就是一個矩形，在右邊同理，有上半弧，矩形，下半弧。下面詳細分析的圖。

下面是繪製左邊的的代碼

private void drawLeft(Canvas canvas,int mCurrentProgressPosition) {
        initPaint();
        mPaint.setColor(BLUE_COLOR);
        mPaint.setStyle(Paint.Style.FILL);
        int height = (int) Math.sqrt(900-(30-mCurrentProgressPosition)*(30-mCurrentProgressPosition));
        //上圓弧
        RectF rectUP = new RectF();
        rectUP.left = 200;
        rectUP.top = mTotalHeight/2 + 135 - height;
        rectUP.right = 2 * mCurrentProgressPosition + 200;
        rectUP.bottom = mTotalHeight/2 + 125 + height;
        canvas.drawArc(rectUP, 180, 90, true, mPaint);
        //中部
        RectF mRect = new RectF();
        mRect.left = 200;
        mRect.top = mTotalHeight/2 + 130;
        mRect.right = mCurrentProgressPosition + 200;
        mRect.bottom = mTotalHeight/2 + 170;
        canvas.drawRect(mRect, mPaint);
        //下圓弧
        RectF rectDown = new RectF();
        rectDown.left = 200;
        rectDown.top = mTotalHeight/2 + 175 - height;
        rectDown.right = 2 * mCurrentProgressPosition + 200;
        rectDown.bottom = mTotalHeight/2 + 165 + height;
        canvas.drawArc(rectDown, 90, 90, true, mPaint);
    }

二、雲彩的動態效果

詳細見代碼

三、菸圈的動態效果

主要繪製一個橢圓，而後隨着進度的增長，橢圓向上運動，同時要漸漸地變大。

四、房子的波浪顯示效果，這裏要考慮到試用Path()路徑繪圖，貝塞爾曲線的繪製。

首先，繪製房子，而後，經過Path()路徑，繪製貝葉斯曲線，漸進波浪顯示房子的總體效果。

/**
     * 波浪顯示
     * @param canvas
     * @param width    波浪的寬度
     * @param length   波浪的高度
     * @param left     波浪的左起點
     * @param top      波浪的上頂點
     */
    private void setPath(Canvas canvas,int width,int length,int left,int top){
        Path path = new Path();
        path.reset();
        int x,y;
        int a = 12;//振幅
        for (int i = mProgress; i < width + mProgress ; i++) {
            x = left + i- mProgress;
            y = (int) (a * Math.sin(i * Math.PI / 50) + length + top);
            if (i == mProgress) {
                path.moveTo(x, y);
            }
            path.quadTo(x, y, x + 1, y);
        }
        path.lineTo(left + width, top);
        path.lineTo(left, top);
        path.close();
        Paint wavePaint = new Paint();
        wavePaint.setStyle(Paint.Style.FILL);
        wavePaint.setAntiAlias(true);
        wavePaint.setColor(ORANGE_COLOR);
        canvas.drawPath(path, wavePaint);
    }

先寫這麼多，下次繼續補全。歡迎到github幫我star。

附：Canvas的經常使用操做速查表