android之自定义简单不平凡的对话框

之前玩一个游戏的时候看到他的一个效果很好看，于是自己寻思的实现一个，往自己应用里塞。话不多说，先看看效果，时间调的比较慢，看起来有点别扭，大家凑合一下哈！！



首先我们来撸一撸思路啊，自定义控件思路一定要清晰，虽然我不是大神【自带捂脸】

首先是位置三个小球的y坐标都是在这个控件高度的一半也就是height/2

然后是x坐标，中间的小球为父控件宽度的一半，widht/2，而另外两个则给她个间距，一个加间距，一个减去间距

最后才看他是怎么动的，只是控制他的y坐标吧，颜色到一半都时候变一下

对，我就是这么觉得，做一个自定义控件，先把静态的画出来，然后再去想动态的，这样会清晰很多

好的，先来画出这三个小圆，先来说说为什么使用三个画笔，因为每个小球到时候都需要单独变化颜色，这样好控制，还有就是mCurrentY3这是啥啊，这个是控制小球的y坐标的一个变量，我们后面只需改变他就能够让小球上升啦，额，对了，因为是上升，所以我们要减去他，不懂的同学，去了解一下android的坐标系哦！

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

int height = getHeight();
int width = getWidth();

canvas.drawCircle(width / 2 - mOffsetX, height / 2 - mCurrentY1, mPointRadius, mPaint1);
canvas.drawCircle(width / 2, height / 2 - mCurrentY2, mPointRadius, mPaint2);
canvas.drawCircle(width / 2 + mOffsetX, height / 2 - mCurrentY3, mPointRadius, mPaint3);
}

上面说了mCurrentY3改变这个就能让小球动起来，那怎么改变他呢？这里我使用了ValueAnimator，个人觉得这个比较简单，不过代码还是有点多

private void anim1() {
//mCurrentY1从0到mOffsetY增长
mUpAnim = ValueAnimator.ofFloat(0, mOffsetY);
mUpAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY1 = (float) valueAnimator.getAnimatedValue();
//如果高度大于了预期的一般，则改变画笔的颜色
if (mCurrentY1 > mOffsetY / 2) {
mPaint1.setColor(Color.RED);
}
//不断刷新view
postInvalidate();
}
});
//这边是反过来，小球下降
mDownAnim = ValueAnimator.ofFloat(mOffsetY, 0);
mDownAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpda
c2d0
te(ValueAnimator valueAnimator) {
mCurrentY1 = (float) valueAnimator.getAnimatedValue();
if (mCurrentY1 < mOffsetY / 2) {
mPaint1.setColor(Color.BLUE);
}
postInvalidate();
}
});

AnimatorSet set = new AnimatorSet();
set.setDuration(2000);
set.play(mUpAnim).before(mDownAnim);
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//如果这个小球上升下降的动画完成，则执行第二个小球的动画
anim2();
}
});
}

对，大概思路就是上面那样。我考虑下次做这让的加载动画要不要使用surfaceView，毕竟我们一直都在刷新着view。下面是源码

public class FloatPointView extends View {
private Paint mPaint1;
private Paint mPaint2;
private Paint mPaint3;
private int mColor = Color.BLUE;

/**
* 小球跳起的高度
*/
private int mOffsetY = 30;
/**
* 每个小球现在应该增加的高度
*/
private float mCurrentY1 = 0;
private float mCurrentY2 = 0;
private float mCurrentY3 = 0;

private ValueAnimator mUpAnim;
private ValueAnimator mDownAnim;

public FloatPointView(Context context) {
this(context, null);
}

public FloatPointView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public FloatPointView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
mPaint1 = new Paint();
mPaint1.setColor(mColor);
mPaint1.setAntiAlias(true);
mPaint2 = new Paint();
mPaint2.setColor(mColor);
mPaint2.setAntiAlias(true);
mPaint3 = new Paint();
mPaint3.setColor(mColor);
mPaint3.setAntiAlias(true);
anim1();
}

private void anim1() {
//mCurrentY1从0到mOffsetY增长
mUpAnim = ValueAnimator.ofFloat(0, mOffsetY);
mUpAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY1 = (float) valueAnimator.getAnimatedValue();
//如果高度大于了预期的一般，则改变画笔的颜色
if (mCurrentY1 > mOffsetY / 2) {
mPaint1.setColor(Color.RED);
}
//不断刷新view
postInvalidate();
}
});
//这边是反过来，小球下降
mDownAnim = ValueAnimator.ofFloat(mOffsetY, 0);
mDownAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY1 = (float) valueAnimator.getAnimatedValue();
if (mCurrentY1 < mOffsetY / 2) {
mPaint1.setColor(Color.BLUE);
}
postInvalidate();
}
});

AnimatorSet set = new AnimatorSet();
set.setDuration(2000);
set.play(mUpAnim).before(mDownAnim);
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//如果这个小球上升下降的动画完成，则执行第二个小球的动画
anim2();
}
});
sur
}

private void anim2() {
mUpAnim = ValueAnimator.ofFloat(0, mOffsetY);
mUpAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY2 = (float) valueAnimator.getAnimatedValue();
if (mCurrentY2 > mOffsetY / 2) {

mPaint2.setColor(Color.RED);
}
postInvalidate();
}
});
mDownAnim = ValueAnimator.ofFloat(mOffsetY, 0);
mDownAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY2 = (float) valueAnimator.getAnimatedValue();
if (mCurrentY2 < mOffsetY / 2) {
mPaint2.setColor(Color.BLUE);
}
postInvalidate();
}
});

AnimatorSet set = new AnimatorSet();
set.setDuration(2000);
set.play(mUpAnim).before(mDownAnim);
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
anim3();
}
});
}

private void anim3() {
mUpAnim = ValueAnimator.ofFloat(0, mOffsetY);
mUpAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY3 = (float) valueAnimator.getAnimatedValue();
if (mCurrentY3 > mOffsetY / 2) {
mPaint3.setColor(Color.RED);
}
postInvalidate();
}
});
mDownAnim = ValueAnimator.ofFloat(mOffsetY, 0);
mDownAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentY3 = (float) valueAnimator.getAnimatedValue();
if (mCurrentY3 < mOffsetY / 2) {
mPaint3.setColor(Color.BLUE);
}
postInvalidate();
}
});

AnimatorSet set = new AnimatorSet();
set.setDuration(2000);
set.play(mUpAnim).before(mDownAnim);
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
anim1();
}
});
}

private int mPointRadius = 10;//每个小球的半径
private int mOffsetX = 30;//每个小球的隔开的间距

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

int height = getHeight();
int width = getWidth();

canvas.drawCircle(width / 2 - mOffsetX, height / 2 - mCurrentY1, mPointRadius, mPaint1);
canvas.drawCircle(width / 2, height / 2 - mCurrentY2, mPointRadius, mPaint2);
canvas.drawCircle(width / 2 + mOffsetX, height / 2 - mCurrentY3, mPointRadius, mPaint3);
}
}

这是我的一个开源项目，虽然写的挺烂的，但还是希望大家支持一下，给个start，https://github.com/WoBuShuo/BusHelp