小魚兒

1）火鼻、三階貝塞爾曲線
2）隶垮、Path的Measure

一藻雪、動(dòng)畫分析

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

1）勉耀、魚身的位移
2）、魚身的旋轉(zhuǎn)
3）捷绒、點(diǎn)擊處的水波紋

二瑰排、技術(shù)分析

1）、魚身的位移

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

三階貝塞爾曲線確定過程

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)來確定一條三階貝塞爾曲線了

4）：那么問題來了我們拿到貝塞爾曲線如何讓
ImageView移動(dòng)呢纺酸？我們經(jīng)辰讯海看到各大直播平臺送主播禮物時(shí)那些小禮物不規(guī)則地向上升是怎么實(shí)現(xiàn)呢？原理都差不多餐蔬，無非就是讓控件跟著路徑走碎紊。傳統(tǒng)的做法是利用自定義估值器來計(jì)算出動(dòng)畫行走路徑，還有一種方法可以不用自定義估值器樊诺，LOLLIPOP版本出來之后屬性動(dòng)畫里新增了一個(gè)路徑動(dòng)畫仗考，我們只用丟進(jìn)去一個(gè)控件和一條路徑以及模板參數(shù)就能讓控件跟著這個(gè)路徑走，方法如下

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

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

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

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

getLength()

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

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

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

ImageView的平移

三秀睛、代碼實(shí)現(xiàn)

文章只貼出主要代碼，完整代碼文末提供鏈接

最重要的特征三角夾角計(jì)算代碼

注意點(diǎn)：
1）莲祸、變量abc是向量ab和ac的數(shù)量積
2）蹂安、angleCos是弧度值表示的，真正的角度需要通過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 是確定魚身重心
2）、fishHead獲取魚頭圓心
3）缴阎、angle即通過夾角計(jì)算方法計(jì)算出特征三角形的夾角
4）允瞧、delta是魚身的角度，angle/2+delta就可以得出特征三角形夾角中線跟x軸正方向的角度了
有了起點(diǎn)fishMiddle，轉(zhuǎn)動(dòng)的長度1.6R以及轉(zhuǎn)動(dòng)的角度（angle/2+delta）就可以通過（上篇）的calculatPoint（）方法計(jì)算出控制點(diǎn)的坐標(biāo)了瓷式，有了控制點(diǎn)就可以通過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)動(dòng)代碼

其中：
1）替饿、tan數(shù)組變量就是我們存取正切值的兩個(gè)邊的信息數(shù)組，通過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ù)號“-”,這是為了適配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)畫監(jiān)聽回調(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);
            }
        });

水波紋代碼

代碼比較簡單，需要注意的是ofFloat中的“radius”關(guān)鍵字妒挎，我們知道默認(rèn)的屬性動(dòng)畫關(guān)鍵字有"alpha"绳锅、"scaleX"、"scaleY"酝掩、"rotationX"鳞芙、"rotationY"、"Y"等等期虾，唯獨(dú)沒有“radius”關(guān)鍵字原朝，對的我們自己定義的，ObjectAnimator的ofFloat(Object target, String propertyName, float... values)方法會通過反射技術(shù)在參數(shù)target中尋找關(guān)鍵字對應(yīng)的set方法镶苞，即我們需要在“this”類中定義一個(gè)setRadius(參數(shù))方法喳坠，其中的參數(shù)是我們定義的浮點(diǎn)數(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();

    }

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

四、結(jié)語

（上篇）得到了很多朋友的支持牍白，非常感動(dòng)怠肋，謝謝大家給予我的鼓勵(lì)。 動(dòng)畫是個(gè)很靈活的事情其實(shí)大家可以找找不同的思路來實(shí)現(xiàn)淹朋，本篇小魚的轉(zhuǎn)動(dòng)并不完美笙各，但是我還沒找到更好的轉(zhuǎn)彎方法，希望有有更好思路的朋友多多交流础芍。
上篇地址： 自定義Drawable實(shí)現(xiàn)靈動(dòng)的紅鯉魚動(dòng)畫（上篇）
github地址：Fish_2
csdn同步地址：[自定義Drawable實(shí)現(xiàn)靈動(dòng)的紅鯉魚動(dòng)畫（下篇）

文章補(bǔ)惰厩馈（2017年7月18日12:27:15）：低版本（5.0以下）的問題，謝謝@八阿哥_提出了低版本手機(jī)崩潰的問題仑性。前文提到過屬性動(dòng)畫中的路徑動(dòng)畫是5.0之后才支持的惶楼，看來想逃避的問題還是要解決的。翻出了N久前寫的版本，用的是自定義估值器歼捐。
　　估值器的作用正如其名字"估值"何陆，用最通俗的語言描述就是估算出動(dòng)畫當(dāng)前時(shí)刻的值，雖說是估算但是計(jì)算出的數(shù)據(jù)也不是憑空捏造不可控制的豹储，所以我們要對它進(jìn)行限制贷盲，有三個(gè)重要的問題需要我們搞明白：

1）、估算出的值是什么類型
2）剥扣、值的取值范圍
3）巩剖、用什么規(guī)則去估算

我們先貼代碼再一 一分析

import android.animation.TypeEvaluator;
import android.graphics.PointF;

public class BezierEvaluator implements TypeEvaluator<PointF> {
    //三階貝塞爾曲線的兩個(gè)控制點(diǎn)
    private PointF pointF1;
    private PointF pointF2;
    private FishView fishView;

    /**
     *
     * @param pointF1 控制點(diǎn)1
     * @param pointF2 控制點(diǎn)2
     * @param fishView
     */
    public BezierEvaluator(PointF pointF1, PointF pointF2, FishView fishView) {
        this.pointF1 = pointF1;
        this.pointF2 = pointF2;
        this.fishView = fishView;
    }

    /**
     * 三階貝塞爾曲線
     *
     * @param time
     * @param startValue 運(yùn)動(dòng)開始點(diǎn)
     * @param endValue 運(yùn)動(dòng)結(jié)束點(diǎn)
     * @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();// 結(jié)果

        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;
    }
}

自定義估值器思路十分簡單，只用實(shí)現(xiàn)TypeEvaluator<T>接口復(fù)寫public T evaluate(float fraction, T startValue, T endValue)钠怯，其中泛型類型T就代表起始值以及返回的過程值類型佳魔，這里我們用的是PointF，即浮點(diǎn)型的坐標(biāo)這就是我們要解決的第一個(gè)問題估算出的值是什么類型,startValue和endValue就是我們要解決的第二個(gè)問題值的取值范圍晦炊，相對比較難解決的是第三個(gè)問題用什么規(guī)則去估算鞠鲜，這里我們的估算方案當(dāng)然還是三階貝塞爾曲線了，上公式：

三階貝塞爾曲線公式

        // 初始化貝塞爾估值器- - 傳入兩個(gè)控制點(diǎn)
        BezierEvaluator evaluator = new BezierEvaluator(listPoint.get(2),
                listPoint.get(3), fishView);

        //估值器  傳入起點(diǎn)終點(diǎn)
        ValueAnimator animator = ValueAnimator.ofObject(evaluator, listPoint.get(0),
                listPoint.get(1));
        animator.addUpdateListener(new BezierListenr(target));
                //綁定動(dòng)畫目標(biāo)View
        animator.setTarget(target);
        animator.setDuration(animatorDuration);

核心代碼已經(jīng)提供了瓮具，有興趣的朋友可以把原來的代碼改造改造
補(bǔ)丁打完，完結(jié)撒花！