最近需求要再登錄頁(yè)面添加倆條動(dòng)態(tài)波浪線，參考大神們的Demo解決了需求，廢話不多說(shuō)直接上代碼！
一、自定義View
public class DoubleWaveView extends View {
private Paint mPaint;
private Path mPath;
private int width, height;
private int dx;
public DoubleWaveView(Context context, int width, int height) {
super(context);
this.width = width;
this.height = height;
init();
}
public DoubleWaveView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public DoubleWaveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mPath = new Path();
//?初始繪制波紋的畫筆
mPaint = new Paint();
// 設(shè)置風(fēng)格為實(shí)線
mPaint.setStyle(Paint.Style.STROKE);
//? ? ? ? mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//填充滿
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//重置繪制路線，即隱藏之前繪制的軌跡
mPath.reset();
// 去除畫筆鋸齒
mPaint.setAntiAlias(true);
// 設(shè)置畫筆顏色
mPaint.setColor(Color.parseColor("#F333EC"));
//mPath繪制的繪制起點(diǎn)高度
mPath.moveTo(-width + dx, height / 3 * 2);
for (int i = 0; i < 3; i++) {
//畫貝塞爾曲線
mPath.rQuadTo(width / 5, -70, width / 2, 0);
mPath.rQuadTo(width / 5, 70, width / 2, 0);
}
//填充形成波浪效果
//? ? ? ? mPath.lineTo(width, height);
//? ? ? ? //兩點(diǎn)連成直線
//? ? ? ? mPath.lineTo(0, height);
//? ? ? ? //回到初始點(diǎn)形成封閉的曲線
//? ? ? ? mPath.close();
canvas.drawPath(mPath, mPaint);
mPath.reset();
mPaint.setColor(Color.parseColor("#5733F3"));
mPath.moveTo(-width + dx, height / 3 * 2);
for (int i = 0; i < 3; i++) {
mPath.rQuadTo(width / 4, 70, width / 2, 0);
mPath.rQuadTo(width / 4, -70, width / 2, 0);
}
//? ? ? ? mPath.lineTo(width, height);
//? ? ? ? mPath.lineTo(0, height);
//? ? ? ? mPath.close();
//? ? ? ? 開始繪制
canvas.drawPath(mPath, mPaint);
}
public void startAnimation() {
// 屬性動(dòng)畫
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, width);// 從某個(gè)值變化到某個(gè)值
valueAnimator.setDuration(2000);//動(dòng)畫時(shí)間
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);// 設(shè)置播放次數(shù)。如果為ValueAnimator.INFINITE表示無(wú)限播放下去
valueAnimator.setInterpolator(new LinearInterpolator());//動(dòng)畫拋物線勻速運(yùn)動(dòng)
//如果不加，ValueAnimator或是AnimatorSet.start時(shí)改動(dòng)畫對(duì)象不能播放
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
dx = (int) animation.getAnimatedValue();//得到當(dāng)前值
invalidate();//刷新View
}
});
valueAnimator.start();//啟動(dòng)動(dòng)畫
}
}
二、MainActivity
public class MainActivity extends AppCompatActivity {
private FrameLayout rootView;
private DoubleWaveView waveView;
private int width,height;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.doublewaveview);
WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
width = wm.getDefaultDisplay().getWidth();
height = wm.getDefaultDisplay().getHeight();
initWaveView();
}
private void initWaveView() {
rootView = (FrameLayout) findViewById(R.id.rootView);
waveView = new DoubleWaveView(this, width, height);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, height);
rootView.addView(waveView, params);
waveView.startAnimation();
}
}
