使用自定义VIew实现水波浪效果

 首先我们先看一下效果

哈哈哈哈哈，是不是看起来非常的魔性呢

下面我们就来实现这个效果吧

要用什么思想实现呢？

其实只需要利用两个函数就可以实现了

利用sin函数和cos函数就可以完成这样的效果，取值的范围从0一直到360，也就是从π到2π

 首先先实现波纹效果

//自定义的水波纹
public class WaterView extends View {

    private Paint mTopPaint;
    private Paint mBottomPaint;
    private Path mPathTop;
    private Path mPathBotom;
    private float φ;
    public WaterView(Context context) {
        this(context,null);
    }

    public WaterView(Context context, @Nullable AttributeSet attrs) {
        this(context,attrs,0);

        int w= context.getResources().getDisplayMetrics().widthPixels;

        //上面的线的画笔
        mTopPaint = new Paint();
        mTopPaint.setColor(Color.WHITE);
        mTopPaint.setAntiAlias(true);

        //下面的线的画笔
        mBottomPaint = new Paint();
        mBottomPaint.setColor(Color.RED);
        mBottomPaint.setAntiAlias(true);
        mBottomPaint.setAlpha(60);
        //上面的线的路径
        mPathTop = new Path();

        //下面的线的路径
        mPathBotom = new Path();
    }

    public WaterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPathTop.reset();
        mPathBotom.reset();
        //开始的位置
        mPathTop.moveTo(getLeft(),getBottom());
        mPathBotom.moveTo(getLeft(),getBottom());
        //获取每个宽度值所占的度数
        double mY = Math.PI * 2 /getWidth();
        φ-=0.1f;
        //路径移动的坐标
        for (float x=0;x<=getWidth();x+=20){
            mPathTop.lineTo(x, (float) (10*Math.cos(mY*x+φ)+15));
            mPathBotom.lineTo(x, (float) (10*Math.sin(mY*x+φ)));
        }
        int width= getWidth();
        //终止的位置
        mPathTop.lineTo(width,getBottom());
        mPathBotom.lineTo(width,getBottom());
        //绘制两条线的路线
        canvas.drawPath(mPathTop,mTopPaint);
        canvas.drawPath(mPathBotom,mBottomPaint);

        postInvalidateDelayed(20);
    }
}

以上代码就可以实现波纹效果了，之后再实现水波纹的效果了

接下来实现小人随波浪上下浮动的效果

在view中通过接口回调回传当前线所在的y坐标 

 public interface AnimationListener{
        void animation(float y);
    }
    private AnimationListener animationListener;

    public void setAnimationListener(AnimationListener animationListener) {
        this.animationListener = animationListener;
    }

之后再Activity中使用

public class MainActivity extends AppCompatActivity {
    private ImageView img;
    private WaterView waterView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        img = findViewById(R.id.img_icon);
        final RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) img.getLayoutParams();
        waterView = findViewById(R.id.water_view);
        waterView.setAnimationListener(new WaterView.AnimationListener() {
            @Override
            public void animation(float y) {
                layoutParams.setMargins(0,0,0, (int) y-50);
                img.setLayoutParams(layoutParams);
            }
        });
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#f00">
        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_above="@id/water_view"
            android:layout_centerInParent="true"
            android:id="@+id/img_icon"
            android:src="@drawable/ic_pool_black_24dp"/>
        <jiangguxu.bawei.com.waterdome.widget.WaterView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_alignParentBottom="true"
            android:id="@+id/water_view"/>

    </RelativeLayout>


</RelativeLayout>