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

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

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

一、動畫分析

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

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

二、技術(shù)分析

1）、魚身的位移

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

?
上圖對關(guān)鍵點都做了簡單標(biāo)注，控制點確定過程如下：?
1）：利用頭部圓心、魚身的重心以及點擊點坐標(biāo)來唯一確定一個特征三角形。?
2）：確定魚身需要向左還是向右轉(zhuǎn)彎，這是個很關(guān)鍵的問題。我們知道，對于同一目的地，向右轉(zhuǎn)和向右轉(zhuǎn)動都可以到達(dá)，但是一定有一個最優(yōu)的方案，假設(shè)我們的小魚有魚類智商，那么能轉(zhuǎn)45°能到達(dá)就肯定不會轉(zhuǎn)315°，結(jié)合這個理論和1）的特征三角形，可以知道三角形內(nèi)角AOB就是我們要的轉(zhuǎn)動的角度，知道轉(zhuǎn)動的角度那么轉(zhuǎn)動方向自然而然就知道了?，F(xiàn)在我們只有AOB三點的坐標(biāo)如何求出夾角呢？我們可以 利用向量的夾角公式計算夾角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）：知道了向左轉(zhuǎn)還是向右轉(zhuǎn)就可以確定曲線的控制點，上圖控制點是我憑經(jīng)驗和多次實踐確定的比較好的方案第一個控制點就是頭部的圓心處，第二個控制點就是轉(zhuǎn)動方向的1/2上的一點

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

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

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

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

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

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

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

getLength()

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

3）、點擊處的水波紋

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

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

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

/**
?????*?利用向量的夾角公式計算夾角
?????*?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));
????????//判斷方向??正:左側(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è)順時針為負(fù)
????????????????return?-temAngle;
????????????}?else?{
????????????????return?temAngle;
????????????}
????????}
????}

三階貝塞爾曲線生成代碼

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

魚身轉(zhuǎn)動代碼

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

???????final?float[]?tan?=?new?float[2];
????????//設(shè)置為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”關(guān)鍵字，我們知道默認(rèn)的屬性動畫關(guān)鍵字有"alpha"、"scaleX"、"scaleY"、"rotationX"、"rotationY"、"Y"等等，唯獨沒有“radius”關(guān)鍵字，對的我們自己定義的，ObjectAnimator的ofFloat(Object target, String propertyName, float... values)方法會通過反射技術(shù)在參數(shù)target中尋找關(guān)鍵字對應(yīng)的set方法，即我們需要在“this”類中定義一個setRadius(參數(shù))方法，其中的參數(shù)是我們定義的浮點數(shù)0~1中的過程值，通過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();

????}

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

四、結(jié)語

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