首先我们先看一下效果
哈哈哈哈哈,是不是看起来非常的魔性呢
下面我们就来实现这个效果吧
要用什么思想实现呢?
其实只需要利用两个函数就可以实现了
利用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.com.waterdome.widget.WaterView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:id="@+id/water_view"/>
</RelativeLayout>
</RelativeLayout>