自定義Drawable實現靈動的紅鯉魚動畫（下篇）
上篇文章自定義Drawable實現靈動的紅鯉魚動畫(上篇)我們繪制了可以擺動身體的小魚，本篇就分享一下如何讓小魚游到手指點擊的位置。用到的主要技術如下：
1)、三階貝塞爾曲線
2)、Path的Measure
一、動畫分析
小魚的行走不是簡單的位移，不難看出在小魚位移的同時身體的角度還隨著前進的方向而變化，所以本篇要解決如下兩部分：
1)、魚身的位移
2)、魚身的旋轉
3)、點擊處的水波紋
二、技術分析
1)、魚身的位移
上篇介紹自定義Drawable的時候分析了Drawable需要作為ImageView的drawable資源或者作為View的background才可以顯示出來，那么我們就可以通過ImageView.setImageDrawable()將自定義Drawable和ImageView關聯起來，通過位移ImageView來移動小魚。
為了讓魚游動的軌跡更真實，位移路徑只有直線是不行的，在魚需要轉身的時候行走路線應該是有弧度的曲線 ，只要涉及到曲線就少不了貝塞爾曲線，涉及到貝塞爾曲線就要涉及到貝塞爾曲線控制點的確定，這里重點介紹一下控制點的確定問題
三階貝塞爾曲線確定過程
上圖對關鍵點都做了簡單標注，控制點確定過程如下：
1)：利用頭部圓心、魚身的重心以及點擊點坐標來唯一確定一個特征三角形。
2)：確定魚身需要向左還是向右轉彎，這是個很關鍵的問題。我們知道，對于同一目的地，向右轉和向右轉動都可以到達，但是一定有一個***的方案，假設我們的小魚有魚類智商，那么能轉45°能到達就肯定不會轉315°，結合這個理論和1)的特征三角形，可以知道三角形內角AOB就是我們要的轉動的角度，知道轉動的角度那么轉動方向自然而然就知道了?，F在我們只有AOB三點的坐標如何求出夾角呢?我們可以 利用向量的夾角公式計算夾角cosAOB = (OA*OB)/(|OA|*|OB|)其中OA*OB是向量的數量積,計算過程如下
- OA=(Ax-Ox,Ay-Oy)
- OB=(Bx-Ox,By-Oy)
- OAOB=(Ax-Ox)(Bx-Ox)+(Ay-Oy)*(By-Oy)
|OA|表示線段OA的模即OA的長度，如果對向量不太了解的朋友請自行百度一下。
3)：知道了向左轉還是向右轉就可以確定曲線的控制點，上圖控制點是我憑經驗和多次實踐確定的比較好的方案***個控制點就是頭部的圓心處，第二個控制點就是轉動方向的1/2上的一點
好了，上述的控制點確定之后就可以實用A點、A點、C點、M點來確定一條三階貝塞爾曲線了
4)：那么問題來了我們拿到貝塞爾曲線如何讓
ImageView移動呢?我們經常看到各大直播平臺送主播禮物時那些小禮物不規則地向上升是怎么實現呢?原理都差不多，無非就是讓控件跟著路徑走。傳統的做法是利用自定義估值器來計算出動畫行走路徑，還有一種方法可以不用自定義估值器，LOLLIPOP版本出來之后屬性動畫里新增了一個路徑動畫，我們只用丟進去一個控件和一條路徑以及模板參數就能讓控件跟著這個路徑走，方法如下
- ObjectAnimator animator = ObjectAnimator.ofFloat(ivFish, "x", "y", path);
需要明確一點，這里的位移只是平移，也就是說魚的角度不會因為控件轉動而改變，要想讓魚在轉彎的時候沿路徑切線方向轉動請聽我繼續分析.
2)、魚身的旋轉
計算魚身的旋轉角度只用計算出路徑切線方向即可，數學里的切線和導數是掛鉤的，初代版本我是通過自定義估值器來確定路徑的，自定義估值器的時候可以求出當前時刻三階貝塞爾曲線的導數，那是一個痛苦的過程，公式代碼寫了十幾行，而且效果不好。后來發現一個強大的類PathMeasure，我們可以通過
- getLength()
計算出一條Path的總長度，還可以通過
- getPosTan(float distance, float pos[], float tan[])
根據傳入的長度計算出路徑的某點坐標和切線方向，簡直就是為我們量身定做的。其中參數distance就是我們需要計算切線的點距Path的起點的距離，通過在AnimatorUpdateListener中獲取Animator的當前進度，再與路徑總長度相乘，就得到了當前動畫已行走的路徑長度distance，接下來傳入兩個長度>=2的非空數組pos和tan數據就可以得到坐標和切線角度的相關參數了。
pos數組的前兩個值就是x,y的坐標值
tan前兩個值就是所求角的對邊和臨邊的相對長度值(也有可能是絕對長度，因為無法看到native源碼，但是不管是相對的還是絕對的這兩個值的比例知道就可以求出對應的角度了)
3)、點擊處的水波紋
水波紋效果比較簡單，只需改變圓環的大小和透明度即可，代碼部分會詳細說明。
分析完位移和旋轉，做一個效果圖看看大家就更清楚了。為了讓大家更清晰地看出效果我把ImageView背景設置成藍色，可以看出藍色的ImageView只負責平移并沒有旋轉，旋轉效果是Drawable中的小魚執行的。
ImageView的平移
三、代碼實現
文章只貼出主要代碼，完整代碼文末提供鏈接
最重要的特征三角夾角計算代碼
注意點：
1)、變量abc是向量ab和ac的數量積
2)、angleCos是弧度值表示的，真正的角度需要通過Math.toDegrees轉換成角度制
- /**
- * 利用向量的夾角公式計算夾角
- * cosBAC = (AB*AC)/(|AB|*|AC|)
- * 其中AB*AC是向量的數量積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函數得到三階貝塞爾曲線了
- 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數組變量就是我們存取正切值的兩個邊的信息數組，通過public static native double atan2(double y, double x);得到切角的弧度值，轉換為角度即可算出轉動角度。細心的朋友發現Math.atan2(-tan[1], tan[0])中的y值前邊有一個負號“-”,這是為了適配Android坐標Y的正方向和自然直角左邊系Y軸方向相反的情況。
2)、因為我們用不到坐標點信息所以在getPosTan(float distance, float pos[], float tan[])中傳入的pos數組是null
3)、在動畫監聽回調中獲取到實時角度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)方法會通過反射技術在參數target中尋找關鍵字對應的set方法，即我們需要在“this”類中定義一個setRadius(參數)方法，其中的參數是我們定義的浮點數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的觸發和View中不一樣，需要在繪制前寫上一句setWillNotDraw(false)來打開強制繪制功能，否則水波紋無法顯示。
四、結語
(上篇)得到了很多朋友的支持，非常感動，謝謝大家給予我的鼓勵。 動畫是個很靈活的事情其實大家可以找找不同的思路來實現，本篇小魚的轉動并不***，但是我還沒找到更好的轉彎方法，希望有有更好思路的朋友多多交流。
上篇地址：自定義Drawable實現靈動的紅鯉魚動畫（上篇）
github地址：Fish_2
文章補丁(2017年7月18日12:27:15)：低版本(5.0以下)的問題，謝謝@八阿哥_提出了低版本手機崩潰的問題。前文提到過屬性動畫中的路徑動畫是5.0之后才支持的，看來想逃避的問題還是要解決的。翻出了N久前寫的版本，用的是自定義估值器。
估值器的作用正如其名字"估值"，用最通俗的語言描述就是估算出動畫當前時刻的值，雖說是估算但是計算出的數據也不是憑空捏造不可控制的，所以我們要對它進行限制，有三個重要的問題需要我們搞明白：
1)、估算出的值是什么類型
2)、值的取值范圍
3)、用什么規則去估算
我們先貼代碼再一 一分析
- import android.animation.TypeEvaluator;
- import android.graphics.PointF;
- public class BezierEvaluator implements TypeEvaluator<PointF> {
- //三階貝塞爾曲線的兩個控制點
- private PointF pointF1;
- private PointF pointF2;
- private FishView fishView;
- /**
- *
- * @param pointF1 控制點1
- * @param pointF2 控制點2
- * @param fishView
- */
- public BezierEvaluator(PointF pointF1, PointF pointF2, FishView fishView) {
- this.pointF1 = pointF1;
- this.pointF2 = pointF2;
- this.fishView = fishView;
- }
- /**
- * 三階貝塞爾曲線
- *
- * @param time
- * @param startValue 運動開始點
- * @param endValue 運動結束點
- * @return
- */
- @Override
- public PointF evaluate(float time, PointF startValue, PointF endValue) {
- float timeLeft = 1.0f - time;
- float slopeX;
- float slopeY;
- float angle;
- PointF point = new PointF();// 結果
- point.x = timeLeft * timeLeft * timeLeft * (startValue.x) + 3
- * timeLeft * timeLeft * time * (pointF1.x) + 3 * timeLeft
- * time * time * (pointF2.x) + time * time * time * (endValue.x);
- point.y = timeLeft * timeLeft * timeLeft * (startValue.y) + 3
- * timeLeft * timeLeft * time * (pointF1.y) + 3 * timeLeft
- * time * time * (pointF2.y) + time * time * time * (endValue.y);
- //魚兒身體角度
- slopeX = (-3 * startValue.x * timeLeft * timeLeft) +
- (3 * pointF1.x * timeLeft * timeLeft - 6 * pointF1.x * time * timeLeft) +
- (6 * pointF2.x * time * timeLeft - 3 * pointF2.x * time * time) +
- (3 * endValue.x * time * time);
- slopeY = (-3 * startValue.y * timeLeft * timeLeft) +
- (3 * pointF1.y * timeLeft * timeLeft - 6 * pointF1.y * time * timeLeft) +
- (6 * pointF2.y * time * timeLeft - 3 * pointF2.y * time * time) +
- (3 * endValue.y * time * time);
- angle = (float) (Math.atan2(slopeX, slopeY) * 180.0 / Math.PI);
- fishView.setMainAngle(angle-90);
- return point;
- }
- }
自定義估值器思路十分簡單，只用實現TypeEvaluator<T>接口復寫public T evaluate(float fraction, T startValue, T endValue)，其中泛型類型T就代表起始值以及返回的過程值類型，這里我們用的是PointF，即浮點型的坐標這就是我們要解決的***個問題估算出的值是什么類型,startValue和endValue就是我們要解決的第二個問題值的取值范圍，相對比較難解決的是第三個問題用什么規則去估算，這里我們的估算方案當然還是三階貝塞爾曲線了，上公式：
三階貝塞爾曲線公式
B(t)即當前時刻的計算結果，P0、P1、P2、P3分別是起點、控制點1、控制點2、終點。這樣大家是不是就可以理解我上邊代碼里那個point.x和point.y是如何計算的了吧。
代碼里還有slopeX和slopeY，這是我對上述公式做了處理，分別讓X坐標和Y坐標對時間t做了偏導(Tips:之所以不喜歡這種方法并不是因為需要用到數學知識，而是曲線切線角度只能在這里計算，計算之后還要通過持有小魚的對象才能將角度結果賦值給小魚)，好了 估值器定義完畢，別急，差點忘記了，大部分沒接觸過自定義估值器的朋友可能要問：說了這么多，我只看到了兩個控制點是構造函數的時候傳遞進來的，那這個startValue和endValue是哪里來的?接下來看看這個估值器是如何使用的，就豁然開朗了
// 初始化貝塞爾估值器- - 傳入兩個控制點
- // 初始化貝塞爾估值器- - 傳入兩個控制點
- BezierEvaluator evaluator = new BezierEvaluator(listPoint.get(2),
- listPoint.get(3), fishView);
- //估值器 傳入起點終點
- ValueAnimator animator = ValueAnimator.ofObject(evaluator, listPoint.get(0),
- listPoint.get(1));
- animator.addUpdateListener(new BezierListenr(target));
- //綁定動畫目標View
- animator.setTarget(target);
- animator.setDuration(animatorDuration);
核心代碼已經提供了，有興趣的朋友可以把原來的代碼改造改造
補丁打完，完結撒花!
【本文為51CTO專欄作者“季晨生”的原創稿件，轉載請通過51CTO聯系作者獲取授權】
