美文网首页
自定义view实现拉勾网水波纹效果

自定义view实现拉勾网水波纹效果

作者: Yestin | 来源:发表于2016-11-14 13:58 被阅读58次

    github链接:https://github.com/yestin0303/WaveView
    该效果可以用2个二阶贝塞尔曲线完成,关于贝塞尔曲线,网上文章很多,不在详述,下面直接上代码,

    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);
     //设置动画无限循环
     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

    相关文章

      网友评论

          本文标题:自定义view实现拉勾网水波纹效果

          本文链接:https://www.haomeiwen.com/subject/zbyhpttx.html