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))
(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去做？後面再研究一下
- 注意點密集帶來的效能消耗和點稀疏帶來的效果不佳的問題，這個要具體情況具體取捨