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

更多相关文章

随机推荐