这个效果我其实是用两个自定义View实现的 -_- , 波浪是用两个不断改变的float值加画布裁剪实现的 , 泡泡是用float数组随机生成不同大小的shape画的圆，使用三阶Bezier曲线和属性动画实现。
MainActivity:
public classMainActivityextendsAppCompatActivity {
LoveBezierViewlover;
HandlermHandler=newHandler(){
@Override
public voidhandleMessage(Message msg) {
super.handleMessage(msg);
switch(msg.what){
case20:
lover.addImg();
break;
}
}
};
@Override
protected voidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lover= (LoveBezierView) findViewById(R.id.mylove);
addPaopao();
}
public voidaddPaopao(){
newThread(newRunnable() {
@Override
public voidrun() {
while(true){
SystemClock.sleep(100);
mHandler.sendEmptyMessageDelayed(20,1500);
}
}
}).start();
}
}
WaveView波浪自定义View:
public classWaveViewextendsView{
private intmHeight;
private intmWidth;
private float[]mContentOneYs=null;
private float[]mContentTwoys=null;
private float[]mRestoreOnes=null;
private float[]mRestoreTwos=null;
private static final intSWINGONE=35;
private static final intSWINGTWO=60;//波动幅度
private static final intOFFSETONE=10;
private static final intOFFSETTWO=50;
private final intINIT_BASE_HEIGHT1=200;//距离View顶部的高度
private final intINIT_BASE_HEIGHT2=200;
private intmPosition1=0;//偏移坐标
private intmPosition2=0;
private static final intSTEP1=5;
private static final intSTEP2=8;
privatePaintmPaint1,mPaint2;//画笔
publicWaveView(Context context) {
this(context,null);
}
publicWaveView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
publicWaveView(Context context, AttributeSet attrs,intdefStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private voidinit() {//初始化画笔
mPaint1=newPaint(Paint.ANTI_ALIAS_FLAG);
mPaint1.setColor(Color.parseColor("#33CCFF"));
mPaint1.setStrokeWidth(4);
mPaint1.setAlpha(85);
mPaint2=newPaint(Paint.ANTI_ALIAS_FLAG);
mPaint2.setColor(Color.parseColor("#99FFFF"));//代码设置颜色
mPaint2.setStrokeWidth(4);
mPaint2.setAlpha(155);
}
@Override
protected voidonMeasure(intwidthMeasureSpec,intheightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected voidonSizeChanged(intw,inth,intoldw,intoldh) {
super.onSizeChanged(w, h, oldw, oldh);
if(w !=0|| h !=0|| w != oldw || h != oldh) {
mWidth= w;
mHeight= h;
calculatePoints();
}
}
@Override
protected voidonDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
Path path =newPath();
path.addArc(0,(mHeight/2)-350,mWidth,(mHeight/2)+350,0,360);
canvas.clipPath(path);
changeRestorePosition();
for(inti =0; i
final intx = i;
final floaty1 =mRestoreOnes[i];
final floaty2 =mRestoreTwos[i];
canvas.drawLine(x, y2, x,mHeight,mPaint2);
canvas.drawLine(x, y1, x,mHeight,mPaint1);
}
invalidate();
}
private voidcalculatePoints() {
mContentOneYs=new float[mWidth];
mContentTwoys=new float[mWidth];
mRestoreOnes=new float[mWidth];
mRestoreTwos=new float[mWidth];
for(inti =0; i
mContentOneYs[i] = getYPosition(i,SWINGONE,OFFSETONE,INIT_BASE_HEIGHT1);
mContentTwoys[i] = getYPosition(i,SWINGTWO,OFFSETTWO,INIT_BASE_HEIGHT2);
}
}
private voidchangeRestorePosition() {
//偏移坐标的方法，根据响应的步长设置每次的偏移起始点
if(mWidth!=0) {
mPosition1= (mPosition1+STEP1) %mWidth;
System.arraycopy(mContentOneYs,mPosition1,mRestoreOnes,0,mWidth-mPosition1);
System.arraycopy(mContentOneYs,0,mRestoreOnes,mWidth-mPosition1,mPosition1);
mPosition2= (mPosition2+STEP2) %mWidth;
System.arraycopy(mContentTwoys,mPosition2,mRestoreTwos,0,mWidth-mPosition2);
System.arraycopy(mContentTwoys,0,mRestoreTwos,mWidth-mPosition2,mPosition2);
}
}
private floatgetYPosition(intx,intswing,intoffset,intbaseHeight) {
floatcycle = (float) (2* Math.PI) /mWidth;
return(float) Math.sin(cycle * x + offset) * swing + baseHeight;
}
}
LoveBezierView泡沫上升效果:
public classLoveBezierViewextendsRelativeLayout{
privateDrawable[]drawables;//图片集合
private intdWidth,dHeight;//泡泡宽高
privateLayoutParamslayoutParams;//泡泡宽高及位置
private intmWidth,mHeight;
privateRandomrandom=newRandom();
intwhats=1;
publicLoveBezierView(Context context) {
super(context);
init();
}
publicLoveBezierView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
publicLoveBezierView(Context context, AttributeSet attrs,intdefStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private voidinit() {
drawables=newDrawable[3];//泡泡的数组
drawables[0] = ContextCompat.getDrawable(getContext(), R.drawable.yuan);
drawables[1] = ContextCompat.getDrawable(getContext(), R.drawable.yuan2);
drawables[2] = ContextCompat.getDrawable(getContext(), R.drawable.yuan3);
}
@Override
protected voidonMeasure(intwidthMeasureSpec,intheightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth= getMeasuredWidth();
mHeight= getMeasuredHeight();
}
/*@Override 两种测量方法
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
}*/
public voidaddImg(){
ImageView imageView =newImageView(getContext());
intwhat =random.nextInt(3);
imageView.setBackground(drawables[what]);
dWidth=drawables[what].getIntrinsicWidth();
dHeight=drawables[what].getIntrinsicHeight();
layoutParams=newLayoutParams(dWidth,dHeight);//泡泡宽高
/* layoutParams.addRule(ALIGN_PARENT_LEFT , TRUE); //水平居中
layoutParams.addRule(ALIGN_PARENT_BOTTOM, TRUE); //在父控件底部*/
imageView.setLayoutParams(layoutParams);
addView(imageView);
AnimatorSet animator = getBezierAnimator(imageView);
animator.addListener(newAnimatorLinstener(imageView));
animator.start();
}
privateAnimatorSet getBezierAnimator(ImageView imageView) {
Estimator evaluator =newEstimator(getPoint(2), getPoint(1));//随机两个拐点
ValueAnimator valueAnimator = ValueAnimator.ofObject(evaluator, getPointF(1), getPointF(2));
valueAnimator.setDuration(5000);
valueAnimator.addUpdateListener(newValueUpdateLinstener(imageView));
valueAnimator.setTarget(imageView);
ObjectAnimator ob = ObjectAnimator.ofFloat(imageView,"alpha",0.1f,1.0f);
ob.setDuration(2000);
AnimatorSet a =newAnimatorSet();
a.playTogether(valueAnimator,ob);
returna;
}
privatePointF getPoint(intscale) {
PointF pointF =newPointF();//选择Y轴的两个拐点
pointF.x=random.nextInt((mWidth));
pointF.y=random.nextInt((mHeight-100)) / scale;
returnpointF;
}
private classAnimatorLinstenerextendsAnimatorListenerAdapter {
privateImageViewimageView;
publicAnimatorLinstener(ImageView imageView) {
this.imageView= imageView;
}
@Override
public voidonAnimationEnd(Animator animation) {
removeView(imageView);
}
}
privatePointF getPointF(inti) {
PointF pointF =newPointF();
if(i ==1){
pointF.set(random.nextInt(mWidth-18),mHeight-dHeight-30);//在底部X轴随机出现
}else{
pointF.set(random.nextInt(getWidth()),0);
}
returnpointF;
}
private classValueUpdateLinstenerimplementsValueAnimator.AnimatorUpdateListener {
privateImageViewimageView;
publicValueUpdateLinstener(ImageView imageView) {
this.imageView= imageView;
}
@Override
public voidonAnimationUpdate(ValueAnimator valueAnimator) {
PointF pointF = (PointF) valueAnimator.getAnimatedValue();
imageView.setX(pointF.x);
imageView.setY(pointF.y);
// Log.e("TAG", valueAnimator.getAnimatedFraction()+"=========");
imageView.setAlpha(1- valueAnimator.getAnimatedFraction());
}
}
}
然后就是在布局中将两个自定义View组合，写成一个自定义View的画太卡，onDraw最好不要有太复杂的运算。
