自定義View-扭曲動效
1. 概述
今天繼續分（Zhuang）享（Bi）一個自定義的動畫歷程。今天的目標如下：
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據說可以使用Matrix去做？后面再研究一下
作者：栗子醬油餅
來源：掘金
工程師必備
- 項目客服
- 培訓客服
- 平臺客服
TOP
