android图片浮动层,android自定义View-一个随波浪上下浮动的效果

android项目开发中，我们会用到一些动画效果，下面是我写的一个小demo：

首先，贴上自定义view类的代码：

public class MaveView extends View {

private Path mAbovePath, mBelowWavePath;

private Paint mAboveWavePaint, mBelowWavePaint;

private DrawFilter mDrawFilter;

private float φ;

private double ω;

private float y, y2;

private OnWaveAnimationListener mWaveAnimationListener;

public MaveView(Context context) {

super(context);

//初始化

init();

}

public MaveView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

//初始化

init();

}

public MaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

//初始化

init();

}

protected void init(){

//初始化路径

mAbovePath = new Path();

mBelowWavePath = new Path();

//初始化画笔

//上方波浪

mAboveWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

mAboveWavePaint.setAntiAlias(true);

mAboveWavePaint.setStyle(Paint.Style.FILL);

mAboveWavePaint.setColor(Color.WHITE);

//下方波浪

mBelowWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

mBelowWavePaint.setAntiAlias(true);

mBelowWavePaint.setStyle(Paint.Style.FILL);

mBelowWavePaint.setColor(Color.WHITE);

mBelowWavePaint.setAlpha(60);

//画布抗锯齿

mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);

}

@Override

protected void onDraw(Canvas canvas) {

canvas.setDrawFilter(mDrawFilter);

mAbovePath.reset();

mBelowWavePath.reset();

φ -= 0.1f;

ω = 2 * Math.PI / getWidth();

mAbovePath.moveTo(getLeft(), getBottom() - 15);

mBelowWavePath.moveTo(getLeft(), getBottom() + 15);

for (float x = 0; x <= getWidth(); x++) {

/**

* y=Asin(ωx+φ)+k

* A—振幅越大，波形在y轴上最大与最小值的差值越大

* ω—角速度， 控制正弦周期(单位角度内震动的次数)

* φ—初相，反映在坐标系上则为图像的左右移动。这里通过不断改变φ,达到波浪移动效果

* k—偏距，反映在坐标系上则为图像的上移或下移。

*/

y = (float) (30 * Math.cos(ω * x + φ) + 30);

y2 = (float) (30 * Math.sin(ω * x + φ) + 30);

mAbovePath.lineTo(x, y);

mBelowWavePath.lineTo(x, y2);

}

//回调 把y坐标的值传出去(在activity里面接收让小机器人随波浪一起摇摆)

mWaveAnimationListener.OnWaveAnimation(y);

mAbovePath.lineTo(getRight(), getBottom() - 15);

mBelowWavePath.lineTo(getRight(), getBottom() + 15);

canvas.drawPath(mAbovePath, mAboveWavePaint);

canvas.drawPath(mBelowWavePath, mBelowWavePaint);

postInvalidateDelayed(20);

}

public void setOnWaveAnimationListener(final OnWaveAnimationListener onWaveAnimationListener) {

this.mWaveAnimationListener = onWaveAnimationListener;

}

public interface OnWaveAnimationListener {

void OnWaveAnimation(float y);

}

}

代码逻辑比较简单，只是有些计算方法对于初学android的童鞋来说不太容易想到。

其次，在我们的xml布局文件中引用该view:

最后，是我们在Activity中的使用：

private MaveView mView;

private LinearLayout topLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mView = findViewById(R.id.maveView);

topLayout = findViewById(R.id.topLayout);

final ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) topLayout.getLayoutParams();

mView.setOnWaveAnimationListener(new MaveView.OnWaveAnimationListener() {

@Override

public void OnWaveAnimation(float y) {

lp.bottomMargin = (int) (y + 2);

topLayout.setLayoutParams(lp);

}

});

}

这样，就实现了一个简单的控件随着波浪上下振动的效果啦！如下图，圆形图片和图片下面的字体会随波纹上下浮动：