目录表
- android自定义view必备api
- android圆环带刻度进度条
- android圆环刻度拖动版
- 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上,有需要的可以clone or download。