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 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();
            }
        });
    }

对，大概思路就是上面那样。我考虑下次做这让的加载动画要不要使用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