Android貝塞爾曲線(xiàn)初步學(xué)習(xí)第三課 Android實(shí)現(xiàn)添加至購(gòu)物車(chē)的運(yùn)動(dòng)軌跡
不知上一節(jié)高仿QQ未讀消息氣泡大家還喜歡么,今天繼續(xù)練習(xí)貝賽爾曲線(xiàn),這一節(jié)我們通過(guò)貝賽爾曲線(xiàn)和屬性動(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)小球和貝賽爾曲線(xià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è)小球隨著貝賽爾曲線(xiàn)的路徑軌跡運(yùn)動(dòng)呢,那就需要得到運(yùn)動(dòng)到當(dāng)前的點(diǎn)在貝賽爾曲線(xiàn)上的坐標(biāo),使用如下工具類(lèi):
/**
* 計(jì)算貝賽爾曲線(xiàn)坐標(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 曲線(xiàn)長(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 曲線(xiàn)長(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)在貝賽爾曲線(xiàn)上的坐標(biāo)。其中曲線(xiàn)長(zhǎng)度比例t 以及起始點(diǎn)、終止點(diǎn)都可以在屬性動(dòng)畫(huà)估值器Evaluator中獲得:
/**
* 貝賽爾曲線(xiàn)估值器
*/
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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android四種數(shù)據(jù)存儲(chǔ)的應(yīng)用方式
這篇文章主要介紹了Android四種數(shù)據(jù)存儲(chǔ)的應(yīng)用方式的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家理解掌握Android存儲(chǔ)數(shù)據(jù)的方法,需要的朋友可以參考下2017-10-10
Android:如何編寫(xiě)“萬(wàn)能”的Activity
本文主要介紹了編寫(xiě)“萬(wàn)能”的Activity的方法與步驟,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
詳解Android實(shí)現(xiàn)定時(shí)器的幾種方法
本篇文章主要介紹了詳解Android實(shí)現(xiàn)定時(shí)器的幾種方法,主要包括了Handler, Timer, Thread, AlarmManager,有興趣的可以了解一下2017-09-09
android系統(tǒng)在靜音模式下關(guān)閉camera拍照聲音的方法
本文為大家詳細(xì)介紹下android系統(tǒng)如何在靜音模式下關(guān)閉camera拍照聲音,具體的實(shí)現(xiàn)方法如下,感興趣的朋友可以參考下哈2013-07-07
android app判斷是否有系統(tǒng)簽名步驟詳解
這篇文章主要為大家介紹了android app判斷是否有系統(tǒng)簽名步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Android使用http實(shí)現(xiàn)注冊(cè)登錄功能
這篇文章主要為大家詳細(xì)介紹了Android使用http實(shí)現(xiàn)注冊(cè)登錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android防止按鈕過(guò)快點(diǎn)擊造成多次事件的解決方法
這篇文章主要介紹了Android防止按鈕過(guò)快點(diǎn)擊造成多次事件的解決方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
Android使用Fragment實(shí)現(xiàn)兼容手機(jī)和平板的程序
這篇文章主要介紹了Android使用Fragment實(shí)現(xiàn)兼容手機(jī)和平板的程序,幫助大家更好的理解和學(xué)習(xí)使用Android開(kāi)發(fā),感興趣的朋友可以了解下2021-04-04
Android 自定義球型水波紋帶圓弧進(jìn)度效果(實(shí)例代碼)
最近小編接到一個(gè)這樣的需求,需要實(shí)現(xiàn)一個(gè)圓形水波紋,帶進(jìn)度,兩層水波紋需要漸變顯示,且外圍有一個(gè)圓弧進(jìn)度。今天小編給大家分享實(shí)例代碼,感興趣的朋友一起看看吧2019-12-12

