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 - CustomViewCollection