詳解自定義Drawable如何實(shí)現(xiàn)靈動(dòng)的紅鯉魚(yú)動(dòng)畫(huà)（下篇）

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

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

一、動(dòng)畫(huà)分析

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

1）、魚(yú)身的位移?
2）、魚(yú)身的旋轉(zhuǎn)?
3）、點(diǎn)擊處的水波紋

二、技術(shù)分析

1）、魚(yú)身的位移

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

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

3）：知道了向左轉(zhuǎn)還是向右轉(zhuǎn)就可以確定曲線的控制點(diǎn)，上圖控制點(diǎn)是我憑經(jīng)驗(yàn)和多次實(shí)踐確定的比較好的方案第一個(gè)控制點(diǎn)就是頭部的圓心處，第二個(gè)控制點(diǎn)就是轉(zhuǎn)動(dòng)方向的1/2上的一點(diǎn)

好了，上述的控制點(diǎn)確定之后就可以實(shí)用A點(diǎn)、A點(diǎn)、C點(diǎn)、M點(diǎn)來(lái)確定一條三階貝塞爾曲線了

4）：那么問(wèn)題來(lái)了我們拿到貝塞爾曲線如何讓?

ImageView移動(dòng)呢？我們經(jīng)常看到各大直播平臺(tái)送主播禮物時(shí)那些小禮物不規(guī)則地向上升是怎么實(shí)現(xiàn)呢？原理都差不多，無(wú)非就是讓控件跟著路徑走。傳統(tǒng)的做法是利用自定義估值器來(lái)計(jì)算出動(dòng)畫(huà)行走路徑，還有一種方法可以不用自定義估值器，LOLLIPOP版本出來(lái)之后屬性動(dòng)畫(huà)里新增了一個(gè)路徑動(dòng)畫(huà)，我們只用丟進(jìn)去一個(gè)控件和一條路徑以及模板參數(shù)就能讓控件跟著這個(gè)路徑走，方法如下

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

需要明確一點(diǎn)，這里的位移只是平移，也就是說(shuō)魚(yú)的角度不會(huì)因?yàn)榭丶D(zhuǎn)動(dòng)而改變，要想讓魚(yú)在轉(zhuǎn)彎的時(shí)候沿路徑切線方向轉(zhuǎn)動(dòng)請(qǐng)聽(tīng)我繼續(xù)分析.

2）、魚(yú)身的旋轉(zhuǎn)

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

getLength()

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

3）、點(diǎn)擊處的水波紋

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

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

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

/**
?????*?利用向量的夾角公式計(jì)算夾角
?????*?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?頂點(diǎn)?A
?????*?@param?head???點(diǎn)1??B
?????*?@param?touch??點(diǎn)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));
????????//判斷方向??正:左側(cè)??負(fù):右側(cè)?0:線上,但是Android的坐標(biāo)系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)?{//右側(cè)順時(shí)針為負(fù)
????????????????return?-temAngle;
????????????}?else?{
????????????????return?temAngle;
????????????}
????????}
????}

三階貝塞爾曲線生成代碼

其中：?
1）、fishMiddle 是確定魚(yú)身重心?
2）、fishHead獲取魚(yú)頭圓心?
3）、angle即通過(guò)夾角計(jì)算方法計(jì)算出特征三角形的夾角?
4）、delta是魚(yú)身的角度，angle/2+delta就可以得出特征三角形夾角中線跟x軸正方向的角度了?
有了起點(diǎn)fishMiddle，轉(zhuǎn)動(dòng)的長(zhǎng)度1.6R以及轉(zhuǎn)動(dòng)的角度（angle/2+delta）就可以通過(guò)（上篇）的calculatPoint（）方法計(jì)算出控制點(diǎn)的坐標(biāo)了，有了控制點(diǎn)就可以通過(guò)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);

魚(yú)身轉(zhuǎn)動(dòng)代碼

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

???????final?float[]?tan?=?new?float[2];
????????//設(shè)置為false代表不強(qiáng)制把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);
????????????}
????????});

水波紋代碼

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

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();

????}

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

四、結(jié)語(yǔ)

（上篇）得到了很多朋友的支持，非常感動(dòng)，謝謝大家給予我的鼓勵(lì)。 動(dòng)畫(huà)是個(gè)很靈活的事情其實(shí)大家可以找找不同的思路來(lái)實(shí)現(xiàn)，本篇小魚(yú)的轉(zhuǎn)動(dòng)并不完美，但是我還沒(méi)找到更好的轉(zhuǎn)彎方法，希望有有更好思路的朋友多多交流。