Android之自定義Drawable實現(xiàn)靈動的紅鯉魚動畫（下篇）

　?
上篇文章Android之自定義Drawable實現(xiàn)靈動的紅鯉魚動畫（上篇）我們繪制了可以擺動身體的小魚，本篇就分享一下如何讓小魚游到手指點擊的位置。用到的主要技術如下：

1）、三階貝塞爾曲線?
2）、Path的Measure

一、動畫分析

小魚的行走不是簡單的位移，不難看出在小魚位移的同時身體的角度還隨著前進的方向而變化，所以本篇要解決如下兩部分：

1）、魚身的位移?
2）、魚身的旋轉?
3）、點擊處的水波紋

二、技術分析

1）、魚身的位移

　　上篇介紹自定義Drawable的時候分析了Drawable需要作為ImageView的drawable資源或者作為View的background才可以顯示出來，那么我們就可以通過ImageView.setImageDrawable()將自定義Drawable和ImageView關聯(lián)起來，通過位移ImageView來移動小魚。?
　　為了讓魚游動的軌跡更真實，位移路徑只有直線是不行的，在魚需要轉身的時候行走路線應該是有弧度的曲線?，只要涉及到曲線就少不了貝塞爾曲線，涉及到貝塞爾曲線就要涉及到貝塞爾曲線控制點的確定，這里重點介紹一下控制點的確定問題

?
上圖對關鍵點都做了簡單標注，控制點確定過程如下：?
1）：利用頭部圓心、魚身的重心以及點擊點坐標來唯一確定一個特征三角形。?
2）：確定魚身需要向左還是向右轉彎，這是個很關鍵的問題。我們知道，對于同一目的地，向右轉和向右轉動都可以到達，但是一定有一個最優(yōu)的方案，假設我們的小魚有魚類智商，那么能轉45°能到達就肯定不會轉315°，結合這個理論和1）的特征三角形，可以知道三角形內角AOB就是我們要的轉動的角度，知道轉動的角度那么轉動方向自然而然就知道了?，F(xiàn)在我們只有AOB三點的坐標如何求出夾角呢？我們可以 利用向量的夾角公式計算夾角cosAOB = (OA*OB)/(|OA|*|OB|)其中OA*OB是向量的數(shù)量積,計算過程如下?
OA=(Ax-Ox,Ay-Oy)?
OB=(Bx-Ox,By-Oy)?
OA*OB=(Ax-Ox)(Bx-Ox)+(Ay-Oy)(By-Oy)?
|OA|表示線段OA的模即OA的長度，如果對向量不太了解的朋友請自行百度一下。

3）：知道了向左轉還是向右轉就可以確定曲線的控制點，上圖控制點是我憑經驗和多次實踐確定的比較好的方案第一個控制點就是頭部的圓心處，第二個控制點就是轉動方向的1/2上的一點

好了，上述的控制點確定之后就可以實用A點、A點、C點、M點來確定一條三階貝塞爾曲線了

4）：那么問題來了我們拿到貝塞爾曲線如何讓?

ImageView移動呢？我們經?？吹礁鞔笾辈テ脚_送主播禮物時那些小禮物不規(guī)則地向上升是怎么實現(xiàn)呢？原理都差不多，無非就是讓控件跟著路徑走。傳統(tǒng)的做法是利用自定義估值器來計算出動畫行走路徑，還有一種方法可以不用自定義估值器，LOLLIPOP版本出來之后屬性動畫里新增了一個路徑動畫，我們只用丟進去一個控件和一條路徑以及模板參數(shù)就能讓控件跟著這個路徑走，方法如下

ObjectAnimator?animator?=?ObjectAnimator.ofFloat(ivFish,?"x",?"y",?path);

需要明確一點，這里的位移只是平移，也就是說魚的角度不會因為控件轉動而改變，要想讓魚在轉彎的時候沿路徑切線方向轉動請聽我繼續(xù)分析.

2）、魚身的旋轉

計算魚身的旋轉角度只用計算出路徑切線方向即可，數(shù)學里的切線和導數(shù)是掛鉤的，初代版本我是通過自定義估值器來確定路徑的，自定義估值器的時候可以求出當前時刻三階貝塞爾曲線的導數(shù)，那是一個痛苦的過程，公式代碼寫了十幾行，而且效果不好。后來發(fā)現(xiàn)一個強大的類PathMeasure，我們可以通過

getLength()

計算出一條Path的總長度，還可以通過?
getPosTan(float distance, float pos[], float tan[])?
根據(jù)傳入的長度計算出路徑的某點坐標和切線方向，簡直就是為我們量身定做的。其中參數(shù)distance就是我們需要計算切線的點距Path的起點的距離，通過在AnimatorUpdateListener中獲取Animator的當前進度，再與路徑總長度相乘，就得到了當前動畫已行走的路徑長度distance，接下來傳入兩個長度>=2的非空數(shù)組pos和tan數(shù)據(jù)就可以得到坐標和切線角度的相關參數(shù)了。?
pos數(shù)組的前兩個值就是x,y的坐標值?
tan前兩個值就是所求角的對邊和臨邊的相對長度值（也有可能是絕對長度，因為無法看到native源碼，但是不管是相對的還是絕對的這兩個值的比例知道就可以求出對應的角度了）

3）、點擊處的水波紋

水波紋效果比較簡單，只需改變圓環(huán)的大小和透明度即可，代碼部分會詳細說明。?
分析完位移和旋轉，做一個效果圖看看大家就更清楚了。為了讓大家更清晰地看出效果我把ImageView背景設置成藍色，可以看出藍色的ImageView只負責平移并沒有旋轉，旋轉效果是Drawable中的小魚執(zhí)行的。

三、代碼實現(xiàn) 最重要的特征三角夾角計算代碼

注意點：?
1）、變量abc是向量ab和ac的數(shù)量積?
2）、angleCos是弧度值表示的，真正的角度需要通過Math.toDegrees轉換成角度制

/**
?????*?利用向量的夾角公式計算夾角
?????*?cosBAC?=?(AB*AC)/(|AB|*|AC|)
?????*?其中AB*AC是向量的數(shù)量積AB=(Bx-Ax,By-Ay)??AC=(Cx-Ax,Cy-Ay),AB*AC=(Bx-Ax)*(Cx-Ax)+(By-Ay)*(Cy-Ay)
?????*
?????*?@param?center?頂點?A
?????*?@param?head???點1??B
?????*?@param?touch??點2??C
?????*?@return
?????*/
????public?static?float?includedAngle(PointF?center,?PointF?head,?PointF?touch)?{
????????float?abc?=?(head.x?-?center.x)?*?(touch.x?-?center.x)?+?(head.y?-?center.y)?*?(touch.y?-?center.y);
????????float?angleCos?=?(float)?(abc?/
????????????????((Math.sqrt((head.x?-?center.x)?*?(head.x?-?center.x)?+?(head.y?-?center.y)?*?(head.y?-?center.y)))
????????????????????????*?(Math.sqrt((touch.x?-?center.x)?*?(touch.x?-?center.x)?+?(touch.y?-?center.y)?*?(touch.y?-?center.y)))));

????????float?temAngle?=?(float)?Math.toDegrees(Math.acos(angleCos));
????????//判斷方向??正:左側??負:右側?0:線上,但是Android的坐標系Y是朝下的，所以左右顛倒一下
????????float?direction?=?(center.x?-?touch.x)?*?(head.y?-?touch.y)?-?(center.y?-?touch.y)?*?(head.x?-?touch.x);
????????//線上還要判斷是同向還是逆向
????????if?(direction?==?0)?{
????????????if?(abc?>=?0)?{
????????????????return?0;
????????????}?else
????????????????return?180;
????????}?else?{
????????????if?(direction?>?0)?{//右側順時針為負
????????????????return?-temAngle;
????????????}?else?{
????????????????return?temAngle;
????????????}
????????}
????}

三階貝塞爾曲線生成代碼

其中：?
1）、fishMiddle 是確定魚身重心?
2）、fishHead獲取魚頭圓心?
3）、angle即通過夾角計算方法計算出特征三角形的夾角?
4）、delta是魚身的角度，angle/2+delta就可以得出特征三角形夾角中線跟x軸正方向的角度了?
有了起點fishMiddle，轉動的長度1.6R以及轉動的角度（angle/2+delta）就可以通過（上篇）的calculatPoint（）方法計算出控制點的坐標了，有了控制點就可以通過cubicTo函數(shù)得到三階貝塞爾曲線了

?Path?path?=?new?Path();
?PointF?fishMiddle?=?new?PointF(ivFish.getX()?+?fishDrawable.getMiddlePoint().x,?ivFish.getY()?+?fishDrawable.getMiddlePoint().y);
?PointF?fishHead?=?new?PointF(ivFish.getX()?+?fishDrawable.getHeadPoint().x,?ivFish.getY()?+?fishDrawable.getHeadPoint().y);
?path.moveTo(ivFish.getX(),?ivFish.getY());
?final?float?angle?=?includedAngle(fishMiddle,?fishHead,?touch);
?float?delta?=?calcultatAngle(fishMiddle,?fishHead);
?PointF?controlF?=?calculatPoint(fishMiddle,?1.6f*fishDrawable.HEAD_RADIUS,?angle?/?2?+?delta);
?path.cubicTo(fishHead.x,?fishHead.y,?controlF.x,?controlF.y,?touch.x?-?fishDrawable.getHeadPoint().x,?touch.y?-?fishDrawable.getHeadPoint().y);

魚身轉動代碼

其中：?
1）、tan數(shù)組變量就是我們存取正切值的兩個邊的信息數(shù)組，通過public static native double atan2(double y, double x);得到切角的弧度值，轉換為角度即可算出轉動角度。細心的朋友發(fā)現(xiàn)Math.atan2(-tan[1], tan[0])中的y值前邊有一個負號“-”,這是為了適配Android坐標Y的正方向和自然直角左邊系Y軸方向相反的情況。?
2）、因為我們用不到坐標點信息所以在getPosTan(float distance, float pos[], float tan[])中傳入的pos數(shù)組是null?
3）、在動畫監(jiān)聽回調中獲取到實時角度angle = (float) (Math.toDegrees(Math.atan2(-tan[1], tan[0])))

???????final?float[]?tan?=?new?float[2];
????????//設置為false代表不強制把Path閉合
????????final?PathMeasure?pathMeasure?=?new?PathMeasure(path,?false);

????????animator?=?ObjectAnimator.ofFloat(ivFish,?"x",?"y",?path);
????????animator.setDuration(2?*?1000);
????????animator.setInterpolator(new?AccelerateDecelerateInterpolator());

????????animator.addUpdateListener(new?ValueAnimator.AnimatorUpdateListener()?{
????????????@Override
????????????public?void?onAnimationUpdate(ValueAnimator?animation)?{
????????????????float?fraction?=?animation.getAnimatedFraction();
????????????????pathMeasure.getPosTan(pathMeasure.getLength()?*?fraction,?null,?tan);
????????????????float?angle?=?(float)?(Math.toDegrees(Math.atan2(-tan[1],?tan[0])));
????????????????fishDrawable.setMainAngle(angle);
????????????}
????????});

水波紋代碼

代碼比較簡單，需要注意的是ofFloat中的“radius”關鍵字，我們知道默認的屬性動畫關鍵字有"alpha"、"scaleX"、"scaleY"、"rotationX"、"rotationY"、"Y"等等，唯獨沒有“radius”關鍵字，對的我們自己定義的，ObjectAnimator的ofFloat(Object target, String propertyName, float... values)方法會通過反射技術在參數(shù)target中尋找關鍵字對應的set方法，即我們需要在“this”類中定義一個setRadius(參數(shù))方法，其中的參數(shù)是我們定義的浮點數(shù)0~1中的過程值，通過setRadius方法改變水波紋的alpha和半徑值，形成水波紋擴散和漸隱的效果

rippleAnimator?=?ObjectAnimator.ofFloat(this,?"radius",?0f,?1f).setDuration(1000);

public?void?setRadius(float?currentValue)?{
????????alpha?=?(int)?(100?*?(1?-?currentValue)?/?2);
????????radius?=?DEFAULT_RADIUS?*?currentValue;
????????invalidate();

????}

最后需要注意一點如上代碼都是寫在一個繼承了RelativeLayout的自定義ViewGroup中，ViewGroup中onDraw的觸發(fā)和View中不一樣，需要在繪制前寫上一句setWillNotDraw(false)來打開強制繪制功能，否則水波紋無法顯示。

四、結語

得到了很多朋友的支持，非常感動，謝謝大家給予我的鼓勵。 動畫是個很靈活的事情其實大家可以找找不同的思路來實現(xiàn)，本篇小魚的轉動并不完美，但是我還沒找到更好的轉彎方法，希望有有更好思路的朋友多多交流。?