Android贝塞尔曲线实现水波纹的效果

最新推荐文章于 2021-05-31 01:05:19 发布

codermake

最新推荐文章于 2021-05-31 01:05:19 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android 水波纹波浪

本文链接：https://blog.youkuaiyun.com/qq_28767927/article/details/75047540

Android 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在Android中实现水波纹效果的方法。通过使用Path.quadTo()绘制波浪，并借助ValueAnimator更新路径，实现了动态水波纹视图。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天朋友找我实现一个水波纹的效果，因为这块一直没做过，所以花了一上午时间研究一下，参考了网上的一些方法，得知Android还有Path.quadTo()这么一个方法。

话不多说，代码如下：

public class MyView extends View implements View.OnClickListener {
    private int mRippleWeight;//一个波的周期长度
    private  int mRippleCount;
    private int mScreenWidth;
    private int mScreenHeight;
    private int mCenterY;//需要展示的位置中线
    private int mOffset;
    private Path mPath;
    private Paint mPaint;
    private ValueAnimator mValueAnimatior;

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
//        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//如若需要下方带颜色可用此样式
        mPaint.setStrokeWidth(8);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mPath = new Path();
        mScreenHeight = getMeasuredHeight();
        mScreenWidth = getMeasuredWidth();
        mCenterY = mScreenWidth / 2;
        mRippleWeight = mScreenHeight / 2;
        mRippleCount = Math.round(mScreenWidth / mRippleWeight + 2);
        setOnClickListener(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();//重置笔画
        mPath.moveTo(-mRippleWeight,mCenterY);//波走完重新的起点
        /**
         * 如若波上下不够大，仅需修改mCenterY + 400及mCenterY - 400，
         * 如若波左右不够大，请把mRippleWeight值变大
         */
        for (int i = 0;i <  mRippleCount;i++) {
            mPath.quadTo(-mRippleWeight * 3 / 4 + i * mRippleWeight + mOffset,mCenterY + 100,-mRippleWeight / 2 + i * mRippleWeight + mOffset,mCenterY);
            mPath.quadTo(-mRippleWeight / 4 + i * mRippleWeight + mOffset,mCenterY - 100,i * mRippleWeight + mOffset,mCenterY);
        }
        canvas.drawPath(mPath,mPaint);
    }


    @Override
    public void onClick(View v) {
        mValueAnimatior = ValueAnimator.ofInt(0, mRippleWeight);
        mValueAnimatior.setDuration(800);
        mValueAnimatior.setInterpolator(new LinearInterpolator());
        mValueAnimatior.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimatior.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mOffset = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimatior.start();
    }
}
 


当然觉得还不明白的可以下载我写的一个demo，链接如下：http://download.youkuaiyun.com/download/qq_28767927/9897370