自定義Drawable實(shí)現(xiàn)靈動(dòng)的紅鯉魚(yú)動(dòng)畫(huà)（下篇）
上篇文章自定義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)題
三階貝塞爾曲線確定過(guò)程
上圖對(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è)***的方案，假設(shè)我們的小魚(yú)有魚(yú)類智商，那么能轉(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)
- OAOB=(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)大的類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í)行的。
ImageView的平移
三、代碼實(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”類中定義一個(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)彎方法，希望有有更好思路的朋友多多交流。
上篇地址：自定義Drawable實(shí)現(xiàn)靈動(dòng)的紅鯉魚(yú)動(dòng)畫(huà)（上篇）
github地址：Fish_2
文章補(bǔ)丁(2017年7月18日12:27:15)：低版本(5.0以下)的問(wèn)題，謝謝@八阿哥_提出了低版本手機(jī)崩潰的問(wèn)題。前文提到過(guò)屬性動(dòng)畫(huà)中的路徑動(dòng)畫(huà)是5.0之后才支持的，看來(lái)想逃避的問(wèn)題還是要解決的。翻出了N久前寫(xiě)的版本，用的是自定義估值器。
估值器的作用正如其名字"估值"，用最通俗的語(yǔ)言描述就是估算出動(dòng)畫(huà)當(dāng)前時(shí)刻的值，雖說(shuō)是估算但是計(jì)算出的數(shù)據(jù)也不是憑空捏造不可控制的，所以我們要對(duì)它進(jìn)行限制，有三個(gè)重要的問(wèn)題需要我們搞明白：
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)開(kāi)始點(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);
- //魚(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;
- }
- }
自定義估值器思路十分簡(jiǎn)單，只用實(shí)現(xiàn)TypeEvaluator<T>接口復(fù)寫(xiě)public T evaluate(float fraction, T startValue, T endValue)，其中泛型類型T就代表起始值以及返回的過(guò)程值類型，這里我們用的是PointF，即浮點(diǎn)型的坐標(biāo)這就是我們要解決的***個(gè)問(wèn)題估算出的值是什么類型,startValue和endValue就是我們要解決的第二個(gè)問(wèn)題值的取值范圍，相對(duì)比較難解決的是第三個(gè)問(wèn)題用什么規(guī)則去估算，這里我們的估算方案當(dāng)然還是三階貝塞爾曲線了，上公式：
三階貝塞爾曲線公式
B(t)即當(dāng)前時(shí)刻的計(jì)算結(jié)果，P0、P1、P2、P3分別是起點(diǎn)、控制點(diǎn)1、控制點(diǎn)2、終點(diǎn)。這樣大家是不是就可以理解我上邊代碼里那個(gè)point.x和point.y是如何計(jì)算的了吧。
代碼里還有slopeX和slopeY，這是我對(duì)上述公式做了處理，分別讓X坐標(biāo)和Y坐標(biāo)對(duì)時(shí)間t做了偏導(dǎo)(Tips:之所以不喜歡這種方法并不是因?yàn)樾枰玫綌?shù)學(xué)知識(shí)，而是曲線切線角度只能在這里計(jì)算，計(jì)算之后還要通過(guò)持有小魚(yú)的對(duì)象才能將角度結(jié)果賦值給小魚(yú))，好了 估值器定義完畢，別急，差點(diǎn)忘記了，大部分沒(méi)接觸過(guò)自定義估值器的朋友可能要問(wèn)：說(shuō)了這么多，我只看到了兩個(gè)控制點(diǎn)是構(gòu)造函數(shù)的時(shí)候傳遞進(jìn)來(lái)的，那這個(gè)startValue和endValue是哪里來(lái)的?接下來(lái)看看這個(gè)估值器是如何使用的，就豁然開(kāi)朗了
// 初始化貝塞爾估值器- - 傳入兩個(gè)控制點(diǎn)
- // 初始化貝塞爾估值器- - 傳入兩個(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)畫(huà)目標(biāo)View
- animator.setTarget(target);
- animator.setDuration(animatorDuration);
核心代碼已經(jīng)提供了，有興趣的朋友可以把原來(lái)的代碼改造改造
補(bǔ)丁打完，完結(jié)撒花!
【本文為51CTO專欄作者“季晨生”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)51CTO聯(lián)系作者獲取授權(quán)】
