Android自定义View实现水波纹效果

最新推荐文章于 2021-05-25 15:52:58 发布

原创最新推荐文章于 2021-05-25 15:52:58 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #path #动画

Andorid 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Android中通过自定义View来实现水波纹效果。主要思路是利用Path画出静态波纹，再通过属性动画改变Path坐标以形成波纹移动。详细步骤包括绘制静止的贝塞尔曲线，闭合Path路径，以及添加动画来实现波纹的上下左右移动。文章强调理解Path相关API的重要性，并提供了源码链接供读者参考和学习。

Android自定义View实现水波纹效果

- - Android自定义View实现水波纹效果

效果图

enter image description here

实现思路

根据效果分析，首先利用Path的 rQuadTo(float dx1, float dy1, float dx2, float dy2)先画出静止的波纹，然后添加一个属性动画，利用动画改变path相应的坐标，实现波纹的移动。path相关类容

具体实现

画出静止的贝塞尔曲线

效果图

        mPath.moveTo(-mItemWaveLength , 300 );//
        int halfWaveLen = mItemWaveLength / 2;//波长的半径
        //左右都多移动了一个波 方便左右移动
        for (int i = -mItemWaveLength; i <= getWidth() + mItemWaveLength; i += mItemWaveLength) {
            mPath.rQuadTo(halfWaveLen / 2, -50, halfWaveLen, 0);
            mPath.rQuadTo(halfWaveLen / 2, 50, halfWaveLen, 0);
        }
        canvas.drawPath(mPath, mPaint);

画波纹的时候左边和右边分别移动一个波纹的宽度，方便波纹移动。

闭合Path路径

效果图

        //闭合曲线
        mPath.lineTo(getWidth(), getHeight());
        mPath.lineTo(0, getHeight());
        mPath.close();
        canvas.drawPath(mPath, mPaint);

添加动画

添加动画实现左右和上下都移动

    /**
     * 开始动画
     */
    public void startAnim() {
        animator = ValueAnimator.ofInt(0, mItemWaveLength);
        animator.setDuration(2000);
        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();
    }

在添加一个方法重置动画

    /**
     * 重置path
     */
    public void reset(){
        if (animator!=null&&animator.isRunning()){
            animator.cancel();
        }
        mPath.reset();
        dx=0;
        dy=0;
    }