Android 自定義View之下雨動畫

三木思samlss發表於2018-10-12

效果

RainyView

RainyView

開始前先做個熱身( ˘•灬•˘ )

自己實現比較容易,但是到了要出部落格整理思路,總結要點的時候就撓頭,不知雲所以,所以最簡單的還是 Read the fucking source code

如果對安卓UI有興趣的朋友可以加我好友互相探討,這裡有很多自定義view可以參考

思路

思路比較簡單,整個view無非兩樣東西

  • 雨滴

這裡又包含兩部分動畫,一部分是雲的左右移動動畫,一部分是雨滴移動動畫 那我們這裡可以自定義一些屬性,如果對自定義屬性還不太瞭解的同學,搜下百度哈

<resources>
    <declare-styleable name="RainyView">
        <!--雨滴的顏色-->
        <attr name="raindrop_color" format="color"></attr>

        <!--左邊雲的顏色-->
        <attr name="left_cloud_color" format="color"></attr>

        <!--右邊雲的顏色-->
        <attr name="right_cloud_color" format="color"></attr>

        <!-可同時存在的雨滴的最大數量-->
        <attr name="raindrop_max_number" format="integer"></attr>

        <!--每個雨滴之間建立的時間間隔-->
        <attr name="raindrop_creation_interval" format="integer"></attr>

        <!--每個雨滴的最小長度-->
        <attr name="raindrop_min_length" format="integer"></attr>

        <!--每個雨滴的最大長度-->
        <attr name="raindrop_max_length" format="integer"></attr>

        <!--雨滴的大小-->
        <attr name="raindrop_size" format="integer"></attr>

        <!--雨滴的最小移動速度-->
        <attr name="raindrop_min_speed" format="float"></attr>

        <!--雨滴的最大移動速度-->
        <attr name="raindrop_max_speed" format="float"></attr>

        <!--雨滴的斜率-->
        <attr name="raindrop_slope" format="float"></attr>
    </declare-styleable>
</resources>
複製程式碼

畫雲

雲怎麼畫?

雲的形狀不可勝舉,我這裡只實現了一種簡單的形狀:

RainyView

那我們如何通過畫筆將其畫出來:

1.首先,我們先畫底部,底部是一個圓角的矩形,通過下面方法繪製新增圓角矩形 path.addRoundRect(RectF rect, float rx, float ry, Direction dir)

RainyView

2.在該圓角的矩形的基礎上,再畫兩個圓,左邊的為小圓,右邊的為大圓,這樣就產生了一個最簡單的雲的圖形,

RainyView

在設定了以下程式碼之後

paint.setStyle(Paint.Style.FILL);
複製程式碼

雲的效果如下:

RainyView

我們把這個雲作為左邊的雲,那麼右邊的雲怎麼畫?

很簡單,因為我們這裡用path來裝載了這個雲的路徑,通過以下方法,

mComputeMatrix.preTranslate(rightCloudTranslateX, -calculateRect.height() * (1 - CLOUD_SCALE_RATIO) / 2);
mComputeMatrix.postScale(CLOUD_SCALE_RATIO, CLOUD_SCALE_RATIO, rightCloudCenterX, leftCloudEndY);
mLeftCloudPath.transform(mComputeMatrix, mRightCloudPath);
複製程式碼

將這個雲的path移動,縮小,並將其路徑轉換到mRightCloudPath即可

在onDraw()的時候,呼叫以下方法就可以描繪路徑了

canvas.drawPath()
複製程式碼

接下來我們來實現雲的動畫,我們由上面已經瞭解到:

/**
 * Transform the points in this path by matrix, and write the answer
 * into dst. If dst is null, then the the original path is modified.
 *
 * @param matrix The matrix to apply to the path
 * @param dst    The transformed path is written here. If dst is null,
 *               then the the original path is modified
 */
public void transform(Matrix matrix, Path dst) {
    long dstNative = 0;
    if (dst != null) {
        dst.isSimplePath = false;
        dstNative = dst.mNativePath;
    }
    nTransform(mNativePath, matrix.native_instance, dstNative);
}
複製程式碼

該方法可以將一個path進行matrix轉換,即矩陣轉換,因此我們可以通過方法matrix.postTranslate來實現平移動畫,即建立一個迴圈動畫,通過postTranslate來設定動畫值就可以了,這裡左邊的雲在右邊的雲之上,因此先畫右邊的雲。

mComputeMatrix.reset();
mComputeMatrix.postTranslate((mMaxTranslationX / 2) * mRightCloudAnimatorValue, 0);
mRightCloudPath.transform(mComputeMatrix, mComputePath);
canvas.drawPath(mComputePath, mRightCloudPaint);

mComputeMatrix.reset();
mComputeMatrix.postTranslate(mMaxTranslationX * mLeftCloudAnimatorValue, 0);
mLeftCloudPath.transform(mComputeMatrix, mComputePath);
canvas.drawPath(mComputePath, mLeftCloudPaint);
複製程式碼

畫雨滴

首先我們要知道一點是,所有的雨滴都是隨機產生的,而產生的值,可以根據上面的自定義屬性指定,也可以使用自定義的值,我們先定義一個雨滴類

private class RainDrop{
    float speedX;  //雨滴x軸移動速度
    float speedY;   //雨滴y軸移動速度
    float xLength; //雨滴的x軸長度
    float yLength; //雨滴的y軸長度
    float x;        //雨滴的x軸座標
    float y;        //雨滴的y軸座標
    float slope; //雨滴的斜率
}
複製程式碼

關於上面引數,這裡畫張圖來示例:

RainyView

關於斜率 我這裡開放了一個設定斜率的介面,代表雨滴的一個傾斜度,可以看到下圖的雨滴都是傾斜的,就是通過斜率來設定這個傾斜度

RainyView

斜率:表示一條直線(或曲線的切線)關於(橫)座標軸傾斜程度的量。它通常用直線(或曲線的切線)與(橫)座標軸夾角的正切,或兩點的縱座標之差與橫座標之差的比來表示。

RainyView
該直線的斜率為k=(y1-y2)/(x1-x2)

我這裡使用了固定的斜率,使所有的雨滴方向一致,如果想將其改為隨機值的同學,可以下載原始碼自行修改。

在建立雨滴物件的時候,以下步驟使我們需要做的:

  • 斜率賦值(我這裡是指定的,因此不用計算隨機斜率)
  • 計算x軸、y軸移動速度隨機值
  • 計算雨滴長度隨機值(同時計算x軸,y軸長度值)
  • 計算x,y座標隨機值(為了營造雨滴更好的出場效果,這裡設定了y軸的起點座標為y-雨滴y軸長度)

建立雨滴物件後,我們有了想要的引數,我們可以canvas.drawLine來畫雨滴

canvas.drawLine(rainDrop.x, rainDrop.y,
            rainDrop.slope > 0 ? rainDrop.x + rainDrop.xLength : rainDrop.x - rainDrop.xLength,
            rainDrop.y + rainDrop.yLength,
            mRainPaint);
複製程式碼

這裡需要注意以下,為什麼canvas.drawLine中的stopX引數要設定為

rainDrop.slope > 0 ? rainDrop.x + rainDrop.xLength : rainDrop.x - rainDrop.xLength
複製程式碼

這是因為,我們的雨滴是一直往下移動即y是增加的,我們上面知道斜率公式為: k=(y1-y2)/(x1-x2)

即y1-y2肯定是大於0的,因此

當斜率小於0的時候,雨滴是這樣的,即x1-x2 < 0

RainyView

當斜率大於0的時候,雨滴是這樣的,即x1-x2 > 0

RainyView

雨滴動畫,由於每一個雨滴物件引數已經定義,在進行動畫的時候,只需要根據速度,設定x、y軸的下一個點的座標就行了

if (rainDrop.slope >= 0) {
        rainDrop.x += rainDrop.speedX;
    }else{
        rainDrop.x -= rainDrop.speedX;
    }
rainDrop.y += rainDrop.speedY;
複製程式碼

優化

我們知道,頻繁的建立雨滴的時候,如果每次都建立新物件的話, 可能會增加不必要的記憶體使用,而且很容易引起頻繁的gc,甚至是記憶體抖動。

因此這裡我增加了一個回收功能

//首先判斷棧中是否存在回收的物件,若存在,則直接複用,若不存在,則建立一個新的物件
private RainDrop obtainRainDrop(){
     if (mRecycler.isEmpty()){
         return new RainDrop();
     }

     return mRecycler.pop();
 }

//回收到一個棧裡面,若這個棧數量超過最大可顯示數量,則pop
private void recycle(RainDrop rainDrop){
    if (rainDrop == null){
        return;
    }

    if (mRecycler.size() >= mRainDropMaxNumber){
        mRecycler.pop();
    }

    mRecycler.push(rainDrop);
}
複製程式碼

開源不易,請尊重作者勞動,轉載註明出處

歡迎Github follow,star以表激勵。

Github

相關文章