自定義view實現(xiàn)拉勾網(wǎng)水波紋效果

github鏈接:https://github.com/yestin0303/WaveView
該效果可以用2個二階貝塞爾曲線完成,關(guān)于貝塞爾曲線,網(wǎng)上文章很多,不在詳述,下面直接上代碼,

public class WaveView extends View {
 Path path;
 Paint paint;
 Path pathback;
 Paint paintback;
 int screen_width;
 int screen_height;
 int dx;
 int itemLength;
 int controlLength;

 public WaveView(Context context) {
 this(context, null);
 }

 public WaveView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 WindowManager wm = (WindowManager) context
 .getSystemService(Context.WINDOW_SERVICE);
 screen_width = wm.getDefaultDisplay().getWidth();
 screen_height = wm.getDefaultDisplay().getHeight();
 itemLength = screen_height;
 path = new Path();
 paint = new Paint();
 paint.setColor(Color.parseColor("#B9EBDF"));
 paint.setStyle(Paint.Style.FILL_AND_STROKE);

 pathback = new Path();
 paintback = new Paint();
 paintback.setColor(Color.parseColor("#00B388"));
 paintback.setStyle(Paint.Style.FILL_AND_STROKE);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 path.reset();
 pathback.reset();
 controlLength = itemLength / 4;
 path.moveTo(-itemLength + dx, 500);
 pathback.moveTo((float) (-itemLength * 1.25+ dx), 500);

 drawWave(canvas, path, paint);
 drawWave(canvas, pathback, paintback);
 }

 public void drawWave(Canvas canvas, Path drawpath, Paint drawpaint) {
 for (int i = 0; i <= screen_width / itemLength + 2; i++) {
 drawpath.rQuadTo(controlLength, 30, itemLength / 2, 0);
 drawpath.rQuadTo(controlLength, -30, itemLength / 2, 0);
 }
 drawpath.lineTo(screen_width, 0);
 drawpath.lineTo(0, 0);
 drawpath.close();
 canvas.drawPath(drawpath, drawpaint);
 }

 public void startAnim() {
 ValueAnimator animator = ValueAnimator.ofInt(0, itemLength);
 animator.setDuration(25000);
 //設(shè)置動畫無限循環(huán)
 animator.setRepeatCount(ValueAnimator.INFINITE);
 animator.setInterpolator(new LinearInterpolator());
 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
 dx = (int) animation.getAnimatedValue();
 postInvalidate();
 }
 });
 animator.start();
 }
}
public class MainActivity extends AppCompatActivity {
 WaveView waveView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 waveView = (WaveView) findViewById(R.id.mywave);
 waveView.startAnim();
 }
}

效果如下,

GIF.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,063評論 25 709
  • 貝塞爾曲線開發(fā)的藝術(shù) 一句話概括貝塞爾曲線:將任意一條曲線轉(zhuǎn)化為精確的數(shù)學(xué)公式。 很多繪圖工具中的鋼筆工具,就是典...
    eclipse_xu閱讀 28,005評論 38 370
  • (接上篇)上一章《惑18》 這小子終于知道動腦子了,哈哈! 你只看見我變成了這個樣子,你沒看見我都經(jīng)歷了什么! 賀...
    生活就是咚咚鏘閱讀 788評論 19 22
  • 一個冬天 她也要溫度 一個冬天 她也怕冷 所以她摘下了所有枯葉 做了一件金黃色的衣裳 冬天說,我也想要手套 于是,...
    夢夢cute萌閱讀 338評論 0 2
  • 睡前造夢者閱讀 243評論 0 0

友情鏈接更多精彩內(nèi)容