自定義View-扭曲動效

1. 概述

今天繼續分（Zhuang）享（Bi）一個自定義的動畫歷程。今天的目標以下：

這動畫的UI源文件已經丟失，也就是動畫的細節已經不知道（咳咳），好吧硬着頭皮上吧。

2. 簡單分析

簡單看出，整個動畫分紅三個部分：車輪，車箱，車頂。

• 車輪：車輪的動效比較簡單，基於X軸的橫向拉伸和擠壓，這個不難。

• 車箱，車頂：這兩個部分其實動效是同樣的，區別是，動做的激烈程度不同 (/ω＼)。要作到這種姿式這種動做，噢，不，是動效，有點難。 但仔細觀察，車箱比如是有人用手指，在車箱的左下和右下進行拉扯和復原所達到的效果， Canvas提供了一個方法：

drawBitmapMesh(Bitmap bitmap, 
    int meshWidth, 
    int meshHeight, 
    float[] verts, 
    int vertOffset, 
    int[] colors,int colorffset,Paint paint)
複製代碼

這個方法能夠對bitmap進行扭曲，部分參數說明以下:

• bitmap    須要扭曲的源位圖
• meshWidth   控制在橫向上把該源位圖劃成成多少格
• meshHeight   控制在縱向上把該源位圖劃成成多少格
• verts     長度爲(meshWidth + 1) * (meshHeight + 1) * 2的數組，它記錄了扭曲後的位圖各頂點位置
• vertOffset 控制verts數組中從第幾個數組元素開始纔對bitmap進行扭曲

3. drawBitmapMesh簡單示例

• 根據參數的含義，咱們先初始化這些參數：

//將圖像分紅多少格
private int carBodyWidthPart = 4;
private int carBodyHeightPart = 4;
//交點座標的個數
private int carBodyPartCount = (carBodyWidthPart + 1) * (carBodyHeightPart + 1);
//用於保存COUNT的座標
//x0, y0, x1, y1......
private float[] carBodyNewsPos = new float[carBodyPartCount * 2];
private float[] carBodyOrigPos = new float[carBodyPartCount * 2];
/** * 獲得網格點集合 * @param bitmap bitmap * @param heightPart 縱向分割的份數 * @param widthPart 橫向分割的份數 * @param newPos 新點集合 * @param origPos 原始點集合 */
protected void getBitmapMeshPoints(Bitmap bitmap, int heightPart, int widthPart, float[] newPos, float[] origPos) {
    //初始化網格點
    int index = 0;
    float bmWidth = bitmap.getWidth();
    float bmHeight = bitmap.getHeight();
    for (int i = 0; i < heightPart + 1; i++) {
        float fy = bmHeight * i / heightPart;
        for (int j = 0; j < widthPart + 1; j++) {
            float fx = bmWidth * j / widthPart;
            //X軸座標 放在偶數位
            newPos[index * 2] = fx;
            origPos[index * 2] = newPos[index * 2];
            //Y軸座標 放在奇數位
            newPos[index * 2 + 1] = fy;
            origPos[index * 2 + 1] = newPos[index * 2 + 1];
            index += 1;
        }
    }
}
複製代碼

• 這裏我把初始化數組寫成了一個函數，注意的是，數組按照第一個點的x1,y1,而後第二個點的x2,y2,這樣的順序存儲。咱們先把圖給畫出來看看效果，咱們把這些點集也畫出來：

/** * 繪製網格點 * @param canvas canvas * @param pos 點集 * @param paint 畫筆 */
protected void drawPoint(Canvas canvas, float[] pos, Paint paint) {
    for (int i = 0; i < pos.length/2; i++) {
        int x = i*2;
        int y = x + 1;
        canvas.drawPoint(pos[x], pos[y], paint);
    }
}
複製代碼

• 繪製方法：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.setDrawFilter(paintFlagsDrawFilter);
    //原始點
    canvas.save();
    canvas.translate(50,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyOrigPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyOrigPos, paint);
    canvas.restore();
    //變化點
    canvas.save();
    canvas.translate(1000,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyNewsPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyNewsPos, paint);
    canvas.restore();
}
複製代碼

• 左邊的是原始點所畫出來的，右邊是變化後所畫出來的，由於這裏沒有對點進行偏移因此左右是同樣的。還有要注意的一點，繪製drawBitmapMesh是沒有傳入繪製的起始點，由於他默認是從原始點開始繪製，因此這裏有把座標移動的代碼。

4. 嘗試加點扭曲

既然要形變要扭曲，那麼咱們先對carBodyNewsPos這個點集進行肆意妄爲地操做一下：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.setDrawFilter(paintFlagsDrawFilter);
    //原始點
    canvas.save();
    canvas.translate(50,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyOrigPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyOrigPos, paint);
    canvas.restore();
    //遍歷交點，修改
    for (int i = 0; i < carBodyPartCount; i++) {
        int x = i * 2;
        int y = x + 1;
        carBodyNewsPos[x] = carBodyOrigPos[x] * (changeFactor * 1.0f / 100 + 1);
    }
    //變化點
    canvas.save();
    canvas.translate(1000,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyNewsPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyNewsPos, paint);
    canvas.restore();
}
複製代碼

咱們對每個點應用了：carBodyNewsPos[x] = carBodyOrigPos[x] * (changeFactor * 1.0f / 100 + 1)：

5. 車箱的扭曲實現

仔細觀察車箱的動畫，發現有幾點細節：

• 扭曲能夠分解爲x,y軸的扭曲，其疊加一塊兒就是車箱的動畫
• 車箱和車頂的扭曲同樣，不用的是扭曲度
• x軸的扭曲，以車箱的中心軸爲分界線，左邊向左扭曲，右邊向右扭曲
• x軸方向的拉伸，離x中心軸線越近變化越小，離頂部（y=0）越近，變化也越小
• y軸的扭曲，是以y=0爲中心軸，離x中心軸線越近變化越大，離頂部（y=0）越近，變化也越小

由於咱們是依次遍歷點集，就是從i=0一直到i=posCount，那麼咱們來實現一下上面的變化：

• 設定兩個因子：xFactor和yFactor，控制x,y軸方向的最大扭曲度。
• 設定變化因子changeFactor，帶動扭曲度隨着時間而變化
• 當點的x在x中心軸的左邊，其x座標應該是原始座標減去扭曲度，反之亦然

大體獲得X方向的扭曲度：changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;

• xFactor是控制整個扭曲度的大小
• 頂部（y=0）越近，變化也越小，而由於是從y=0開始繪製，因此，bitmap.getHeight()就是y軸的最大值，那麼，origPos[y]/bitmap.getHeight() 就是當前點所佔y軸的百分比，也就是，離y=0越近，origPos[y]/bitmap.getHeight() 的值越小。
• 離x周軸線越近變化越小，Math.abs((widthPart+1)/2-i%(widthPart+1))

  

  如上圖，紅色爲x的中心軸，而咱們遍歷的i（點的個數）值是從0-N，而，i=0，i=4的時候最大，i=1,i=3次小，如此類推。 (widthPart+1)/2是算出中心軸的座標相對位置，例如圖中，算出應該是2，那麼中心軸的相對位置則爲2，而i%(widthPart+1)，在圖中就是，0-4的取值，跟中心軸的相對位置2相減取絕對值，就是一個離中心軸的變化量的大小了。

Y方向的扭曲度，也是同樣的。這裏就不說了。。。最後得出的扭曲函數以下：

/** * 改變車箱的Points * @param bitmap bitmap * @param posCount 點的個數 * @param widthPart 橫向分割的份數 * @param heightPart 縱向分割的份數 * @param newPos 新點集合 * @param origPos 原始點集合 * @param xFactor 變化因子 * @param yFactor 變化因子 */
protected void changeCarBodyPoint(Bitmap bitmap, int posCount, int widthPart, int heightPart, float[] newPos, float[] origPos, float xFactor, float yFactor) {
    //遍歷交點，修改
    for (int i = 0; i < posCount; i++) {
        int x = i*2;
        int y = x + 1;
        //x方向的拉伸，離x周軸線越近變化越小，離頂部（y=0）越近，變化也越小
        if (newPos[x]<centralAxisX) {
            newPos[x] = origPos[x] - changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;
        }
        else if (newPos[x]>centralAxisX) {
            newPos[x] = origPos[x] + changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;
        }
        //y方向的拉伸，離x周軸線越近變化越大，離頂部（y=0）越近，變化也越小
        newPos[y] = origPos[y] + changeFactor * (widthPart*heightPart/(heightPart+1)+1) * (1 - Math.abs(origPos[x]-centralAxisX)/bitmap.getWidth()) * yFactor;
    }
}
複製代碼

把上面的函數應用上去：

是吧，效果差很少就得了吧！（嘔心瀝血，個人40米長刀呢！）

6. 總結

• 經過這個自定義動畫，熟悉了drawBitmapMesh的使用
• 車頂也是一樣的扭曲動畫，只是要調xFactor和yFactor
• Demo在這裏
• 聽說可使用Matrix去作？後面再研究一下
• 注意點密集帶來的性能消耗和點稀疏帶來的效果不佳的問題，這個要具體狀況具體取捨