使用自定義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>