Android 自定义View（二）仿滴滴大头针跳动效果

目录表

• android自定义view必备api
• android可拖动圆环刻度条
• android仿滴滴大头针跳动波纹效果
• android仿网易云鲸云音效

这是最终的实现效果，主要包括大头针顶部的加载动画、跳动动画、以及底部的波纹扩散效果：

实现分析

因为考虑到完全绘制大头针会造成Ui不通用的问题，例如我们需要的效果肯定与滴滴不同，如果我将整个大头针通过draw进行绘制，那么你在移植这个view的时候，改动会很大。所以我将大头针分为了顶部圆圈view和下面的针bitmap，只通过更改自定义圆圈的大小颜色等属性来最大限度的适配Ui。

大头针的加载动画和底部波纹扩散效果，是通过内部handler定时绘制的，每次改变半径和颜色即可。

    private class DrawTimingThread extends Handler {

        public DrawTimingThread(Looper looper) {
            super(looper);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            try {
                switch (msg.what){
                    case MSG_TOP_DRAW:
                        if(mTopCircleAnimaRadius < mTopCircleMaxRadius - 2 * topIntervalDistance)
                            mTopCircleAnimaRadius += topIntervalDistance;
                        else
                            mTopCircleAnimaRadius = mTopSmallCircleRadius + topIntervalDistance;

                        drawTimingThread.removeMessages(MSG_TOP_DRAW);//handler循环刷新
                        drawTimingThread.sendEmptyMessageDelayed(MSG_TOP_DRAW, animaTopIntervalTime);

                        invalidate();//绘制
                        break;
                    case MSG_RIPPLE_DRAW:
                        if(mBotCircleAnimaRadius < mBotCircleMaxRadius){
                            mBotCircleAnimaRadius += topIntervalDistance * 8;
                            drawTimingThread.removeMessages(MSG_RIPPLE_DRAW);
                            drawTimingThread.sendEmptyMessageDelayed(MSG_RIPPLE_DRAW, animaBotIntervalTime);

                            mBotCirclePaint.setAlpha(getAlphaOfRipple());
                            invalidate();
                        }else{//波纹效果只执行一次
                            mBotCircleAnimaRadius = 0;
                            drawTimingThread.removeMessages(MSG_RIPPLE_DRAW);
                        }
                        break;
                }
            }catch (Exception e){
                Log.e("tag1234", "point marker view error :" + msg);
            }
        }
    }

view的跳动动画这里选择了AnimatorSet属性组合动画，实现起来都很简单。

    public ObjectAnimator transactionAnimWithMarker() {
        if(getVisibility() != View.VISIBLE)
            return null;
        ObjectAnimator mTAnimator1 = ObjectAnimator.ofFloat(this
                , "translationY"
                , getTranslationY()
                , getTranslationY() - CommentUtils.dip2px(mContect.getApplicationContext(), 20));
        ObjectAnimator mTAnimator2 = ObjectAnimator.ofFloat(this
                , "translationY"
                , getTranslationY() - CommentUtils.dip2px(mContect.getApplicationContext(), 20)
                , getTranslationY());
        mTAnimator1.setInterpolator(new DecelerateInterpolator());
        mTAnimator1.setDuration(400);
        mTAnimator2.setInterpolator(new AccelerateInterpolator());
        mTAnimator2.setDuration(200);

        AnimatorSet mSet1 = new AnimatorSet();
        mSet1.play(mTAnimator1).before(mTAnimator2);
        mSet1.start();

        return mTAnimator2;
    }

推荐上车点的圆点文字效果、单行双行效果以及描边效果也都是通过view绘制实现的，这里就不细说了，源码我都放在了gitHub上，有需要可以下载或在线看下。

gitHub - CustomWidget