不知上一節(jié)高仿QQ未讀消息氣泡大家還喜歡么，今天繼續(xù)練習(xí)貝賽爾曲線，這一節(jié)我們通過(guò)貝賽爾曲線和屬性動(dòng)畫(huà)估值器實(shí)現(xiàn)添加至購(gòu)物車(chē)的運(yùn)動(dòng)軌跡，效果如下：
1、新建自定義View，重寫(xiě)構(gòu)造方法，初始化Paint、Path；
2、確定起始點(diǎn)、終止點(diǎn)、控制點(diǎn)坐標(biāo)，這里我們直接固定：
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mStartX = 100; mStartY = 100; mEndX = w - 100; mEndY = h - 100; mControlX = w - 100; mControlY = 100; }3、畫(huà)起止點(diǎn)小球和貝賽爾曲線路徑：
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(mStartX, mStartY, 24, mCirclePaint); canvas.drawCircle(mEndX, mEndY, 24, mCirclePaint); mPath.reset(); mPath.moveTo(mStartX, mStartY); mPath.quadTo(mControlX, mControlY, mEndX, mEndY); canvas.drawPath(mPath, mPathPaint); }這樣基本的東西就完成了。
4、那么該怎樣使一個(gè)小球隨著貝賽爾曲線的路徑軌跡運(yùn)動(dòng)呢，那就需要得到運(yùn)動(dòng)到當(dāng)前的點(diǎn)在貝賽爾曲線上的坐標(biāo)，使用如下工具類(lèi)：
/** * 計(jì)算貝賽爾曲線坐標(biāo)的工具類(lèi) */public class BezierUtil { /** * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1] * * @param t 曲線長(zhǎng)度比例 * @param p0 起始點(diǎn) * @param p1 控制點(diǎn) * @param p2 終止點(diǎn) * @return t對(duì)應(yīng)的點(diǎn) */ public static PointF calculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) { PointF point = new PointF(); float temp = 1 - t; point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x; point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y; return point; } /** * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1] * * @param t 曲線長(zhǎng)度比例 * @param p0 起始點(diǎn) * @param p1 控制點(diǎn)1 * @param p2 控制點(diǎn)2 * @param p3 終止點(diǎn) * @return t對(duì)應(yīng)的點(diǎn) */ public static PointF calculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) { PointF point = new PointF(); float temp = 1 - t; point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t; point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t; return point; }}只需要傳入對(duì)應(yīng)的參數(shù)即可獲得到當(dāng)前點(diǎn)在貝賽爾曲線上的坐標(biāo)。其中曲線長(zhǎng)度比例t 以及起始點(diǎn)、終止點(diǎn)都可以在屬性動(dòng)畫(huà)估值器Evaluator中獲得：
/** * 貝賽爾曲線估值器 */public class BezierEvaluator implements TypeEvaluator<PointF> { /* 控制點(diǎn)坐標(biāo) */ private PointF mControlPoint; public BezierEvaluator(PointF controlPoint) { mControlPoint = controlPoint; } @Override public PointF evaluate(float v, PointF pointF, PointF t1) { return BezierUtil.calculateBezierPointForQuadratic(v, pointF, mControlPoint, t1); }} 注：Point與PointF的區(qū)別：
Point使用的是int類(lèi)型來(lái)存儲(chǔ)x、y坐標(biāo)，而PointF使用的是float類(lèi)型。
5、設(shè)置點(diǎn)擊監(jiān)聽(tīng)setOnclickListner(this)，重寫(xiě)onClick方法：
@Override public void onClick(View view) { BezierEvaluator evaluator = new BezierEvaluator(new PointF(mControlX, mControlY)); PointF startPoint = new PointF(mStartX, mStartY); PointF endPoint = new PointF(mEndX, mEndY); ValueAnimator anim = ValueAnimator.ofObject(evaluator, startPoint, endPoint); anim.setDuration(1000); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { PointF curPoint = (PointF) valueAnimator.getAnimatedValue(); mCurX = (int) curPoint.x; mCurY = (int) curPoint.y; invalidate(); } }); anim.start(); }使用估值器BezierEvaluator的對(duì)象，在屬性動(dòng)畫(huà)更新監(jiān)聽(tīng)中獲取到該當(dāng)前所在位置，并重繪：
canvas.drawCircle(mCurX, mCurY, 24, mCirclePaint);
即可實(shí)現(xiàn)一種類(lèi)似于添加至購(gòu)物車(chē)的運(yùn)動(dòng)軌跡效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
