概念：
What：貝塞爾曲線是用一系列點(diǎn)來控制曲線狀態(tài)的。可以用來實(shí)時(shí)繪制曲線。
How:
Why:
實(shí)例：
貝賽爾曲線最終2.gif
彈性的圓
實(shí)例1：讓一個(gè)圓漸變成為心形：
貝賽爾曲線最終2.gif
1 繪制坐標(biāo)
坐標(biāo)系.png
//繪制坐標(biāo)系
private void drawCoordinate(Canvas canvas) {
canvas.save();
mPaint.setStrokeWidth(8);
mPaint.setColor(getResources().getColor(R.color.gray));
//繪制x軸
canvas.drawLine(0, mCenterY, mCenterX * 2, mCenterY, mPaint);
canvas.drawLine(mCenterX, 0, mCenterX, mCenterY * 2, mPaint);
canvas.restore();
}
2 繪制數(shù)據(jù)點(diǎn)和輔助點(diǎn)，并連接他們：
輔助線.png
//繪制輔助線
public void drawLine(Canvas canvas) {
//繪制數(shù)據(jù)點(diǎn)
mPaint.setColor(getResources().getColor(R.color.blue));
mPaint.setStrokeWidth(8);
for (int index = 0; index < mData.length; index += 2) {
canvas.drawCircle(mData[index], mData[index + 1], 3, mPaint);
}
//繪制控制點(diǎn)
mPaint.setColor(getResources().getColor(R.color.green));
for (int index = 0; index < mCtrl.length; index += 2) {
canvas.drawCircle(mCtrl[index], mCtrl[index + 1], 3, mPaint);
}
//繪制輔助線
for (int i = 2, j = 2; i < 8; i += 2, j += 4) {
canvas.drawLine(mData[i], mData[i + 1], mCtrl[j], mCtrl[j + 1], mPaint);
canvas.drawLine(mData[i], mData[i + 1], mCtrl[j + 2], mCtrl[j + 3], mPaint);
}
canvas.drawLine(mData[0], mData[1], mCtrl[0], mCtrl[1], mPaint);
canvas.drawLine(mData[0], mData[1], mCtrl[14], mCtrl[15], mPaint);
}
3 繪制貝賽爾曲線：
貝賽爾曲線.png
//繪制貝賽爾曲線
public void drawbezier(Canvas canvas) {
mPaint.setColor(getResources().getColor(R.color.red));
mPaint.setStrokeWidth(15);
Path path = new Path();
path.moveTo(mData[0], mData[1]);
path.cubicTo(mCtrl[0], mCtrl[1], mCtrl[2], mCtrl[3], mData[2], mData[3]);
path.cubicTo(mCtrl[4], mCtrl[5], mCtrl[6], mCtrl[7], mData[4], mData[5]);
path.cubicTo(mCtrl[8], mCtrl[9], mCtrl[10], mCtrl[11], mData[6], mData[7]);
path.cubicTo(mCtrl[12], mCtrl[13], mCtrl[14], mCtrl[15], mData[0], mData[1]);
canvas.drawPath(path, mPaint);
}
4 執(zhí)行循環(huán)，動(dòng)態(tài)變成心形
貝賽爾曲線最終.gif
//繪制貝賽爾曲線
public void drawbezier(Canvas canvas) {
mPaint.setColor(getResources().getColor(R.color.red));
mPaint.setStrokeWidth(15);
Path path = new Path();
path.moveTo(mData[0], mData[1]);
path.cubicTo(mCtrl[0], mCtrl[1], mCtrl[2], mCtrl[3], mData[2], mData[3]);
path.cubicTo(mCtrl[4], mCtrl[5], mCtrl[6], mCtrl[7], mData[4], mData[5]);
path.cubicTo(mCtrl[8], mCtrl[9], mCtrl[10], mCtrl[11], mData[6], mData[7]);
path.cubicTo(mCtrl[12], mCtrl[13], mCtrl[14], mCtrl[15], mData[0], mData[1]);
canvas.drawPath(path, mPaint);
mCurrent += mPiece;
if (mCurrent < mDuration){
mData[1] -= 120/mCount;
mCtrl[7] += 80/mCount;
mCtrl[9] += 80/mCount;
mCtrl[4] -= 20/mCount;
mCtrl[10] += 20/mCount;
postInvalidateDelayed((long) mPiece);
}
}
5 注釋掉1，2步驟，即可。
貝賽爾曲線最終2.gif
實(shí)例2：彈性的圓：
彈性的圓
Demo源碼：
參考：
貝塞爾曲線開發(fā)的藝術(shù)
安卓自定義View進(jìn)階-Path之貝塞爾曲線
網(wǎng)頁版本繪制
學(xué)習(xí)，思維三部曲：WHAT、HOW、WHY（通過現(xiàn)象看本質(zhì)）
Android 貝塞爾曲線，QQ 刪除小紅點(diǎn)類似效果實(shí)現(xiàn)
Iwfu-貝塞爾曲線配合動(dòng)畫效果的小例子
三次貝塞爾曲線練習(xí)之彈性的圓
PullBezierZoomView 一個(gè)具有貝塞爾曲線下拉效果的自定義view
從Android動(dòng)畫到貝塞爾曲線
貝塞爾曲線實(shí)戰(zhàn)--BackgroundView
貝塞爾曲線之購物車動(dòng)畫效果
