原標題:從0到1Android自定義View(四)貝塞爾曲線
2017年安卓巴士全球開發者論壇-上海站
作者
本文由兩點水投稿,博客地址:http://www.apkbus.com/myspaceblog-911082.html
前言
扯來扯去,前面三篇自定義 View 文章,終于扯完了一些知識點,有些枯燥,所以我也是講下核心點,沒有細分析,主要是讓各位有點印象和了解。這篇終于是實踐,敲代碼的了,因為工作原因,這篇拖的比較久,不過這系列會一直更新下去的,會把我工作中用到的自定義 View 也會加上去。好了,回歸正原題,說到自定義 View ,似乎都離不開貝塞爾曲線,因此,第一篇實踐就是與貝塞爾曲線有關的。點擊左下角”閱讀原文“可查看全部。
目錄
貝塞爾曲線
1、貝塞爾曲線簡介
來看看官方對神奇的賽貝爾曲線的介紹:貝塞爾曲線于 1962,由法國工程師皮埃爾·貝塞爾所廣泛發表,他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 于 1959 年運用 de Casteljau 演算法開發,以穩定數值的方法求出貝茲曲線。貝塞爾曲線主要用于二維圖形應用程序中的數學曲線,曲線由起始點,終止點(也稱錨點)和控制點組成,通過調整控制點,貝塞爾曲線的形狀會發生變化。
看完后是不是一臉蒙蔽,一句話理解貝塞爾曲線就是:將任意一條曲線轉化為精確的數學公式。
2、賽貝爾曲線公式
竟然說了是將曲線轉化為精確的數學公式,那么我們來看下具體的數學公式( 注:以下公式中,B(t) 為 t 時間下點的坐標; P0 為起點,Pn 為終點,Pi 為控制點 ):
(1) 一階貝塞爾曲線(線段)
由 P0 至 P1 的連續點, 描述的一條線段
(2) 二階貝塞爾曲線(拋物線):
由 P0 至 P1 的連續點 Q0,描述一條線段。
由 P1 至 P2 的連續點 Q1,描述一條線段。
由 Q0 至 Q1 的連續點 B(t),描述一條二次貝塞爾曲線。
(3) 三階貝塞爾曲線:
3、貝塞爾曲線在 Android 中的應用
其實貝塞爾曲線在 Android 自定義 View 中運用還是挺多的,比如
Android 5.0 后下拉刷新的陰影曲線
QQ 消息提醒的小紅點
用于左右滑動時顯示個數的點的移動動畫
水流波動效果
一個彈性效果的抽屜菜單
4、Android Path 類中提供貝塞爾曲線的操作方法
在 Android 開發中,要實現貝塞爾曲線其實還是很簡單的,因為 Android 已經給我們提供了相關接口,此接口方法在 Path 類中,而關于 Path 類的講解,前面一篇博客就介紹過了。而且通過 Android 的 API 可以知道,貝塞爾曲線從 API1 就開始支持了。下面就是賽貝爾曲線對應的 API 方法了。
貝塞爾曲線
對應的方法
演示動畫
一階曲線
(線性曲線)
lineTo
二階曲線
quadTo
三階曲線
cubicTo
四階曲線
無
5、通過 de Casteljau 算法繪制貝塞爾曲線
上面提過,Path 類中提供了畫一到三階的貝塞爾曲線的方法,如果我們需要繪制更高階的貝塞爾曲線呢?我們可以采用德卡斯特里奧算法(De Casteljau’s Algorithm)來實現貝塞爾曲線。
效果圖:
Github 上的代碼:beziercurve
里面主要就一個類,beziercurve,這是個自定義 View ,BezierCurve里面主要提供了以下的方法:
Methods:
method 方法
deion 描述
void start()
開始貝塞爾曲線(required)
void stop()
停止貝塞爾曲線(optional)
boolean addPoint()
增加控制點(optional)
boolean delPoint()
刪除控制點(optional)
int getOrder()
獲取貝塞爾曲線階數(optional)
void setRate(int rate)
設置移動速率(optional)
void setTangent(boolean tangent)
設置是否顯示切線(optional)
void setLoop(boolean loop)
設置是否循環(optional)
void setOrder(int order)
設置貝塞爾曲線階數(optional)
最后通過BezierCurveActivity來展示。
貝塞爾曲線的應用1.QQ 消息提醒可拖拽紅點
Github 上的項目地址:qqmsgnotify
效果圖:
主要是在繪制紅點的時候運用了貝塞爾曲線,在固定的位置中,拖拽的時候,有一種粘性的效果,就是這里運用了貝塞爾曲線。
運用:
(1) 在對應的位置創建一個 TextView
(2) 設置 GooViewListener 監聽事件就可以了
mTvPoint = (TextView) findViewById(R.id.point_conversation); mTvPoint.setText("10"); mTvPoint.setTag(10); GooViewListener listener = newGooViewListener(this, mTvPoint) {
@Overridepublic void onDisappear(PointF mDragCenter){
super.onDisappear(mDragCenter); Toast.makeText(QQMsgNotifyActivity.this, "消失了", Toast.LENGTH_SHORT).show(); } @Overridepublic void onReset(boolean isOutOfRange){
super.onReset(isOutOfRange); Toast.makeText(QQMsgNotifyActivity.this, "重置了", Toast.LENGTH_SHORT).show(); } }; mTvPoint.setOnTouchListener(listener);2.Viewpage頁面引導切換動畫
Github 上的項目地址:guideview
效果圖:
其實這個例子也是,運用貝塞爾曲線也就是在繪制那個圓形的地方而已,其他地方基本不怎么使用貝塞爾曲線。
大家都在看
歡迎大家到安卓巴士論壇博文》返回搜狐,查看更多
責任編輯: