Android貝塞爾曲線————波浪效果(大波浪)
阿新 • • 發佈:2019-02-13
Hello大家好,很高興又一次與大家見面,今天是農曆丁酉雞年(大年初四),現在跟大家拜年有點晚,算是拜晚年,祝大家晚年幸福。 這麼快大夥都到了晚年了,Android貝塞爾曲線我也準備以一個大波浪來結束。所以今天給大家帶來的就是android貝塞爾曲線製作波浪效果。
好了說了這麼久我們來看一下效果吧。
怎麼樣是不是很動感,很哇塞。 那麼我們一起來搞定它吧!
我覺得應該先來給大家梳理一下思路,我們首先應該找出曲線的起始點、終止點和控制點座標。 其次我們應該繪製出來一整條的波紋,也就是要繪製出兩條貝塞爾曲線,緊接著我們往螢幕外繪製一條相同長度的一整條波紋,螢幕外的波紋每次加上一個固定的值然後加上動畫讓他們週期性迴圈,這樣這個波浪也就繪製出來了。
好了,多說無益,還是程式碼最有感覺,下面我直接貼上我的程式碼,我覺得通過之前的學習理解這個波浪應該沒有那麼困難了。有問題的小夥伴可以在下方評論,或者私信我來討論具體問題。
public class BoLangView extends View implements View.OnClickListener{
private int mWaveLength;
private int mScreenWidth;
private int mScreenHeight;
private int mCenterY;
private int mWaveCount;
private int offset;
private Path mPath;
private Paint mPaint;
private ValueAnimator mValueAnimatior;
public BoLangView(Context context) {
super(context);
}
public BoLangView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setStrokeWidth(8 );
mPaint.setColor(Color.LTGRAY);
mWaveLength = 800;
}
public BoLangView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 需要計算出螢幕能容納多少個波形
mPath = new Path();
mScreenHeight = h;
mScreenWidth = w;
mCenterY = h / 2;
mWaveCount = (int) Math.round(mScreenWidth / mWaveLength + 1.5); // 計算波形的個數
setOnClickListener(this);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPath.reset();
mPath.moveTo(-mWaveLength,mCenterY);
for (int i = 0; i < mWaveCount; i++) {
mPath.quadTo(-mWaveLength * 3 / 4 + i * mWaveLength + offset,mCenterY + 60,-mWaveLength / 2 + i * mWaveLength + offset,mCenterY);
mPath.quadTo(-mWaveLength / 4 + i * mWaveLength + offset,mCenterY - 60,i * mWaveLength + offset,mCenterY);
}
mPath.lineTo(mScreenWidth,mScreenHeight);
mPath.lineTo(0,mScreenHeight);
mPath.close();
canvas.drawPath(mPath,mPaint);
}
@Override
public void onClick(View v) {
mValueAnimatior = ValueAnimator.ofInt(0, mWaveLength);
mValueAnimatior.setDuration(1000);
mValueAnimatior.setInterpolator(new LinearInterpolator());
mValueAnimatior.setRepeatCount(ValueAnimator.INFINITE);
mValueAnimatior.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
offset = (int) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimatior.start();
}
}
我這個程式碼還和以前一樣,省略了佈局引用,載入activity等等那些特別基礎的東西,好了到現在整個貝塞爾之旅到這裡算是結束了,以後如果有什麼貝塞爾做出的效果可能會與大家來一同分享。喜歡的話來給我一個贊吧!