- 如果动画要加上插值器,那手写的计数器根本无法满足
- 看到上面的分析,我无法接收了
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()
中,我个人感觉很乱,并且再仔细看看,这几个属性动画是不需要动态变化的,为什么不抽出来在一开始的时候就初始化呢?
so,我们将定义属性动画的代码抽出来,并且放到构造函数中初始化
public TickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
…
initAnimatorCounter();
}
/**
- 用ObjectAnimator初始化一些计数器
*/
private void initAnimatorCounter() {
//圆环进度
ObjectAnimator mRingAnimator = ObjectAnimator.ofInt(this, “ringProgress”, 0, 360);
…
//收缩动画
ObjectAnimator mCircleAnimator = ObjectAnimator.ofInt(this, “circleRadius”, radius - 5, 0);
…
//勾出来的透明渐变
ObjectAnimator mAlphaAnimator = ObjectAnimator.ofInt(this, “tickAlpha”, 0, 255);
…
//最后的放大再回弹的动画,改变画笔的宽度来实现