? ? ? ? 這個效果我其實是用兩個自定義View實現(xiàn)的 -_- ?, 波浪是用兩個不斷改變的float值加畫布裁剪實現(xiàn)的 , 泡泡是用float數(shù)組隨機生成不同大小的shape畫的圓，使用三階Bezier曲線和屬性動畫實現(xiàn)。
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() {
//偏移坐標的方法窜锯，根據(jù)響應的步長設置每次的偏移起始點
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];//泡泡的數(shù)組
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軸隨機出現(xiàn)
}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最好不要有太復雜的運算差牛。
