2024年Android最全Android自定义View：关于打钩小动画的思考重构，华为软件技术面试

最后

针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (!isChecked) {
…
return;
}
//画圆弧进度，每次绘制都自加12个单位，也就是圆弧又扫过了12度
//这里的12个单位先写死，后面我们可以做一个配置来实现自定义
ringCounter += 12;
if (ringCounter >= 360) {
ringCounter = 360;
}
canvas.drawArc(mRectF, 90, ringCounter, false, mPaintRing);
…
//强制重绘
postInvalidate();
}

这里，我们定义了一个计数器ringCounter, 当绘制的时候，是根据12个单位进行自增到达360，从而模拟进度的变化。

仔细想想

1. 通过改变自增的单位来控制动画速度的变化，这很难调整得使自己满意，此时我们可以想到，使动画速度执行快慢的根本就是控制时间啊，如果可以用时间来控制动画速度那得方便多了
2. 动画分为4步执行，如果每一步动画都用手写计数器来实现，那得定义4个成员变量或者更多，太多成员变量只会让代码更加混乱
3. 如果动画要加上插值器，那手写的计数器根本无法满足
4. 看到上面的分析，我无法接收了

---

3. 改改改

那么怎么去改善上面所说的问题呢，答案就是用自定义的属性动画来解决了，所以这篇文章主要的讲的地方就是用属性动画来替换手写的计数器，尽可能的保证代码逻辑的清晰，特别是onDraw()方法中的代码。

使用属性动画的一个好处就是，给定数值的范围，它会帮你生成一堆你想要的数值，配合插值器还要意想不到的效果呢，下一面就一步一步针对动画执行的部分进行重构

3.1 绘制圆环进度条

首先，使用自定义的ObjectAnimator来模拟进度

//ringProgress是自定义的属性名称，生成数值的范围是0 - 360,就是一个圆的角度
ObjectAnimator mRingAnimator = ObjectAnimator.ofInt(this, “ringProgress”, 0, 360);
//定义动画执行的时间，很好的替代之前使用自增的单位来控制动画执行的速度
mRingAnimator.setDuration(mRingAnimatorDuration);
//暂时不需要插值器
mRingAnimator.setInterpolator(null);

自定义属性动画，还需要配置相应的setter和getter，因为在动画执行的时候，会找相应的setter去改变相应的值。

private int getRingProgress() {
return ringProgress;
}

private void setRingProgress(int ringProgress) {
//动画执行的时候，会调用setter
//这里我们可以将动画生成的数值记录下来,用变量存起来，在ondraw的时候用
this.ringProgress = ringProgress;
//记得重绘
postInvalidate();
}

最后，在onDraw()中画图

//画圆弧进度
canvas.drawArc(mRectF, 90, ringProgress, false, mPaintRing);

3.2 绘制向圆心收缩的动画

同理，也是造一个属性动画

//这里自定义的属性是圆收缩的半径
ObjectAnimator mCircleAnimator = ObjectAnimator.ofInt(this, “circleRadius”, radius - 5, 0);
//加一个减速的插值器
mCircleAnimator.setInterpolator(new DecelerateInterpolator());
mCircleAnimator.setDuration(mCircleAnimatorDuration);

setter/getter也是类似就不说了

最后onDraw()中绘制

//画背景
mPaintCircle.setColor(checkBaseColor);
canvas.drawCircle(centerX, centerY, ringProgress == 360 ? radius : 0, mPaintCircle);
//当进度圆环绘制好了，就画收缩的圆
if (ringProgress == 360) {
mPaintCircle.setColor(checkTickColor);
canvas.drawCircle(centerX, centerY, circleRadius, mPaintCircle);
}

3.3 绘制钩和放大再回弹的效果

这是两个独立的效果，这里同时执行，我就合在一起说了

首先也是定义属性动画

//勾出来的透明渐变
ObjectAnimator mAlphaAnimator = ObjectAnimator.ofInt(this, “tickAlpha”, 0, 255);
mAlphaAnimator.setDuration(200);
//最后的放大再回弹的动画，改变画笔的宽度来实现
//而画笔的宽度，则是的变化范围是
//首先从初始化宽度开始，再到初始化宽度的n倍，最后又回到初始化的宽度
ObjectAnimator mScaleAnimator = ObjectAnimator.ofFloat(this, “ringStrokeWidth”, mPaintRing.getStrokeWidth(), mPaintRing.getStrokeWidth() * SCALE_TIMES, mPaintRing.getStrokeWidth() / SCALE_TIMES);
mScaleAnimator.setInterpolator(null);
mScaleAnimator.setDuration(mScaleAnimatorDuration);

//打钩和放大回弹的动画一起执行
AnimatorSet mAlphaScaleAnimatorSet = new AnimatorSet();
mAlphaScaleAnimatorSet.playTogether(mAlphaAnimator, mScaleAnimator);

getter/setter

private int getTickAlpha() {
return 0;
}

private void setTickAlpha(int tickAlpha) {
//设置透明度，可以不用变量来保存了
//直接将透明度的值设置到画笔里面即可
mPaintTick.setAlpha(tickAlpha);
postInvalidate();
}

private float getRingStrokeWidth() {
return mPaintRing.getStrokeWidth();
}

private void setRingStrokeWidth(float strokeWidth) {
//设置画笔宽度，可以不用变量来保存了
//直接将画笔宽度设置到画笔里面即可
mPaintRing.setStrokeWidth(strokeWidth);
postInvalidate();
}

最后，同理在onDraw()中绘制即可

if (circleRadius == 0) {
canvas.drawLines(mPoints, mPaintTick);
canvas.drawArc(mRectF, 0, 360, false, mPaintRing);
}

3.4 依次执行动画

执行多个动画，可以用到AnimatorSet,其中playTogether()是一起执行，playSequentially()是一个挨着一个，step by step执行。

mFinalAnimatorSet = new AnimatorSet();
mFinalAnimatorSet.playSequentially(mRingAnimator, mCircleAnimator, mAlphaScaleAnimatorSet);

最后在onDraw()中执行动画

//这里定义了一个标识符，用于告诉程序，动画每次只能执行一次
if (!isAnimationRunning) {
isAnimationRunning = true;
//执行动画
mFinalAnimatorSet.start();
}

3.5 每个方法最好能有单一的职责

如果将定义属性动画的方法放在onDraw()中，我个人感觉很乱，并且再仔细看看，这几个属性动画是不需要动态变化的，为什么不抽出来在一开始的时候就初始化呢？

建议

当我们出去找工作，或者准备找工作的时候，我们一定要想，我面试的目标是什么，我自己的技术栈有哪些，近期能掌握的有哪些，我的哪些短板 ，列出来，有计划的去完成，别看前两天掘金一些大佬在驳来驳去 ，他们的观点是他们的，不要因为他们的观点，膨胀了自己，影响自己的学习节奏。基础很大程度决定你自己技术层次的厚度，你再熟练框架也好，也会比你便宜的，性价比高的替代，很现实的问题但也要有危机意识，当我们年级大了，有哪些亮点，与比我们经历更旺盛的年轻小工程师，竞争。

• 无论你现在水平怎么样一定要 持续学习 没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！！！！！！！！

• 准备想说怎么样写简历，想象算了，我觉得，技术就是你最好的简历

• 我希望每一个努力生活的it工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

• 有什么问题想交流，欢迎给我私信，欢迎评论

【附】相关架构及资料

内含往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！