Android貝塞爾曲線初步學(xué)習(xí)第三課 Android實現(xiàn)添加至購物車的運(yùn)動軌跡
不知上一節(jié)高仿QQ未讀消息氣泡大家還喜歡么,今天繼續(xù)練習(xí)貝賽爾曲線,這一節(jié)我們通過貝賽爾曲線和屬性動畫估值器實現(xiàn)添加至購物車的運(yùn)動軌跡,效果如下:
1、新建自定義View,重寫構(gòu)造方法,初始化Paint、Path;
2、確定起始點、終止點、控制點坐標(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、畫起止點小球和貝賽爾曲線路徑:
@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、那么該怎樣使一個小球隨著貝賽爾曲線的路徑軌跡運(yùn)動呢,那就需要得到運(yùn)動到當(dāng)前的點在貝賽爾曲線上的坐標(biāo),使用如下工具類:
/** * 計算貝賽爾曲線坐標(biāo)的工具類 */ public class BezierUtil { /** * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1] * * @param t 曲線長度比例 * @param p0 起始點 * @param p1 控制點 * @param p2 終止點 * @return t對應(yīng)的點 */ 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 曲線長度比例 * @param p0 起始點 * @param p1 控制點1 * @param p2 控制點2 * @param p3 終止點 * @return t對應(yīng)的點 */ 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; } }
只需要傳入對應(yīng)的參數(shù)即可獲得到當(dāng)前點在貝賽爾曲線上的坐標(biāo)。其中曲線長度比例t 以及起始點、終止點都可以在屬性動畫估值器Evaluator中獲得:
/** * 貝賽爾曲線估值器 */ public class BezierEvaluator implements TypeEvaluator<PointF> { /* 控制點坐標(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類型來存儲x、y坐標(biāo),而PointF使用的是float類型。
5、設(shè)置點擊監(jiān)聽setOnclickListner(this),重寫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的對象,在屬性動畫更新監(jiān)聽中獲取到該當(dāng)前所在位置,并重繪:
canvas.drawCircle(mCurX, mCurY, 24, mCirclePaint);
即可實現(xiàn)一種類似于添加至購物車的運(yùn)動軌跡效果。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android?NDK開發(fā)(C語言--聯(lián)合體與枚舉)
這篇文章主要介紹了Android?NDK開發(fā)C語言聯(lián)合體與枚舉,共用體是一種特殊的數(shù)據(jù)類型,允許您在相同的內(nèi)存位置存儲不同的數(shù)據(jù)類型。您可以定義一個帶有多成員的共用體,但是任何時候只能有一個成員帶有值。下面詳細(xì)介紹該內(nèi)容,需要的朋友可以參考一下2021-12-12Kotlin Channel處理多個數(shù)據(jù)組合的流
最近項目中對 kotlin 的使用比較多。不得不說 kotlin 確實可以極大的提高 android 的開發(fā)效率,channel用于協(xié)程之間的通訊,使用send和receive往通道里寫入或者讀取數(shù)據(jù),2個方法為非阻塞掛起函數(shù),channel是熱流,不管有沒有訂閱者都會發(fā)送2022-11-11詳解Android的內(nèi)存優(yōu)化--LruCache
LruCache是基于Lru算法實現(xiàn)的一種緩存機(jī)制。本文對LruCache的概念和實現(xiàn)原理進(jìn)行介紹,通過實例分析和使用介紹,讓大家更好的了解LruCache,下面跟著小編一起來看下吧2016-12-12Android開發(fā)Jetpack組件Room使用講解
Room是一個數(shù)據(jù)庫訪問組件; 對SqLite數(shù)據(jù)庫做了友好的封裝,使我們在編碼的時候,只需要注重邏輯的部分即可,數(shù)據(jù)庫就交給Room去流暢的訪問即可2022-08-08Android ExpandableListView雙層嵌套實現(xiàn)三級樹形菜單
這篇文章主要介紹了Android ExpandableListView雙層嵌套實現(xiàn)三級樹形菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11Android開發(fā)實現(xiàn)自定義水平滾動的容器示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)自定義水平滾動的容器,涉及Android滾動容器的事件響應(yīng)、屬性運(yùn)算與修改相關(guān)操作技巧,需要的朋友可以參考下2017-10-10Windows下搭建Flutter開發(fā)環(huán)境
這篇文章介紹了Windows下搭建Flutter開發(fā)環(huán)境的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11