一、背景
1.1、控件成果
要实现的自定义控件成果大抵如下，实现过程中用到了比拟多的自定义View的API，感觉比拟有代表性，就分享进去也当做学习总结 我的项目代码已上传github :https://github.com/DaLeiGe/An…
1.2、从性能上剖析一下这个控件，大抵有以下特点
- 随机静止粒子从圆周向圆心静止，并与切线方向有正负30°的角度差，粒子透明度、半径、静止速度随机，静止超过肯定间隔或者工夫隐没
- 背景圆有一个从内到外的渐变色
- 计时模式下圆环有一个色彩突变的顺时针rotate动画
- 整个背景圆色彩随着扇形角度变动而变动
- 指针色彩变动
- 数字变动是高低切换动画
1.3、从构造上剖析
这个控件能够拆分为两个局部，由背景圆+数字控件两个局部形成的组合控件，之所以把数字控件独自拆分进去，也是为了不便做数字上下跳动的动画，毕竟通过管制drawText的地位实现动画感觉不不便，间接通过View的属性动画更好实现
二、 背景圆实现
2.1、实现粒子静止
应用AnimPoint.java示意静止粒子，它具备x,y坐标，半径，角度，静止速度，透明度等属性，通过这些属性就能够画出一个动态的粒子
public class AnimPoint implements Cloneable {
/**
* 粒子原点x坐标
*/
private float mX;
/**
* 粒子原点y坐标
*/
private float mY;
/**
* 粒子半径
*/
private float radius;
/**
* 粒子初始地位的角度
*/
private double anger;
/**
* 一帧挪动的速度
*/
private float velocity;
/**
* 总共挪动的帧数
*/
private int num = 0;
/**
* 透明度 0~255
*/
private int alpha = 153;
/**
* 随机偏移角度
*/
private double randomAnger = 0;
}粒子的初始地位位于随机角度的圆周，且一个粒子具备随机的半径，透明度，速度等，通过init()办法，实现初始化粒子如下
public void init(Random random, float viewRadius) {
anger = Math.toRadians(random.nextInt(360));
velocity = random.nextFloat() * 2F;
radius = random.nextInt(6) + 5;
mX = (float) (viewRadius * Math.cos(anger));
mY = (float) (viewRadius * Math.sin(anger));
//随机偏移角度-30°~30°
randomAnger = Math.toRadians(30 - random.nextInt(60));
alpha = 153 + random.nextInt(102);
}想让粒子静止起来，应用update更新粒子的这些坐标属性就能实现，比方粒子当初坐标在(5,5)`，通过update()扭转粒子的坐标到(6,6),联合属性动画不停地调用update()则就能不停的扭转x,y的坐标，实现粒子静止，而后当粒子挪动超过肯定间隔，或者调用update超过肯定次数，再从新调用init()让粒子从新从圆周上开始下一个生命周期静止
public void updatePoint(Random random, float viewRadius) {
//每一帧偏移的像素大小
float distance = 1F;
double moveAnger = anger + randomAnger;
mX = (float) (mX - distance * Math.cos(moveAnger) * velocity);
mY = (float) (mY - distance * Math.sin(moveAnger) * velocity);
//模仿半径逐步变小
radius = radius - 0.02F * velocity;
num++;
//如果到了最大值 则从新给静止粒子一个轨迹属性
int maxDistance = 180;
int maxNum = 400;
if (velocity * num > maxDistance || num > maxNum) {
num = 0;
init(random, viewRadius);
}
}在View中大抵实现如下
/**
* 初始化动画
*/
private void initAnim() {
//绘制静止的粒子
AnimPoint mAnimPoint = new AnimPoint();
for (int i = 0; i < pointCount; i++) {
//通过clone创建对象，防止反复创立
AnimPoint cloneAnimPoint = mAnimPoint.clone();
//先给每个粒子初始化各类属性
cloneAnimPoint.init(mRandom, mRadius - mOutCircleStrokeWidth / 2F);
mPointList.add(cloneAnimPoint);
}
//画静止粒子
mPointsAnimator = ValueAnimator.ofFloat(0F, 1F);
mPointsAnimator.setDuration(Integer.MAX_VALUE);
mPointsAnimator.setRepeatMode(ValueAnimator.RESTART);
mPointsAnimator.setRepeatCount(ValueAnimator.INFINITE);
mPointsAnimator.addUpdateListener(animation -> {
for (AnimPoint point : mPointList) {
//通过属性动画不停的计算下粒子的下一个坐标
point.updatePoint(mRandom, mRadius);
}
invalidate();
});
mPointsAnimator.start();
}
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate(mCenterX, mCenterY);
//画静止粒子
for (AnimPoint animPoint : mPointList) {
mPointPaint.setAlpha(animPoint.getAlpha());
canvas.drawCircle(animPoint.getmX(), animPoint.getmY(),
animPoint.getRadius(), mPointPaint);
}
}2.2、实现渐变色圆
实现圆从内到外突变应用RadialGradient 大抵实现形式如下
float[] mRadialGradientStops = {0F, 0.69F, 0.86F, 0.94F, 0.98F, 1F};
mRadialGradientColors[0] = transparentColor;
mRadialGradientColors[1] = transparentColor;
mRadialGradientColors[2] = parameter.getInsideColor();
mRadialGradientColors[3] = parameter.getOutsizeColor();
mRadialGradientColors[4] = transparentColor;
mRadialGradientColors[5] = transparentColor;
mRadialGradient = new RadialGradient(
0,
0,
mCenterX,
mRadialGradientColors,
mRadialGradientStops,
Shader.TileMode.CLAMP);
mSweptPaint.setShader(mRadialGradient);
...
//onDraw()绘制
canvas.drawCircle(0, 0, mCenterX, mSweptPaint);2.3、展现背景圆的扇形区域
本来想通过DrawArc实现这个成果，然而DrawArc无奈实现到圆心的区域
那么如何实现这么一个不规则的形态呢，能够应用canvas.clipPath()实现裁剪不规则的形态，所以只有失去扇形的Path就能实现，通过圆点+弧形再闭合path就能实现
/**
* 绘制扇形path
*
* @param r 半径
* @param startAngle 开始角度
* @param sweepAngle 扫过的角度
*/
private void getSectorClip(float r, float startAngle, float sweepAngle) {
mArcPath.reset();
mArcPath.addArc(-r, -r, r, r, startAngle, sweepAngle);
mArcPath.lineTo(0, 0);
mArcPath.close();
}
//而后再onDraw()中，裁剪画布
canvas.clipPath(mArcPath);2.4、实现指针变色
指针是不规则形态，无奈通过绘制几何图形实现，所以选用drawBitmap实现
至于如何实现bitmap指针图片的色彩变动呢，本来的计划是应用AvoidXfermode扭转指定像素通道范畴内的色彩，然而AvoidXfermode在API 24曾经被移除，所以这计划有效
最终采纳图层混合模式实现指针图片变色
通过PorterDuff.Mode.MULTIPLY模式能够实现bitmap色彩，源图像为要批改的指针色彩，指标图像为红色指针，通过获取两个图像的重叠局部实现变色 大抵实现如下
/**
* 初始化指针图片的Bitmap
*/
private void initBitmap() {
float f = 130F / 656F;
mBitmapDST = BitmapFactory.decodeResource(getResources(), R.drawable.indicator);
float mBitmapDstHeight = width * f;
float mBitmapDstWidth = mBitmapDstHeight * mBitmapDST.getWidth() / mBitmapDST.getHeight();
//初始化指针的图层混合模式
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);
mPointerRectF = new RectF(0, 0, mBitmapDstWidth, mBitmapDstHeight);
mBitmapSRT = Bitmap.createBitmap((int) mBitmapDstWidth, (int) mBitmapDstHeight, Bitmap.Config.ARGB_8888);
mBitmapSRT.eraseColor(mIndicatorColor);
}
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
//画指针
canvas.translate(mCenterX, mCenterY);
canvas.rotate(mCurrentAngle / 10F);
canvas.translate(-mPointerRectF.width() / 2, -mCenterY);
mPointerLayoutId = canvas.saveLayer(mPointerRectF, mBmpPaint);
mBitmapSRT.eraseColor(mIndicatorColor);
canvas.drawBitmap(mBitmapDST, null, mPointerRectF, mBmpPaint);
mBmpPaint.setXfermode(mXfermode);
canvas.drawBitmap(mBitmapSRT, null, mPointerRectF, mBmpPaint);
mBmpPaint.setXfermode(null);
canvas.restoreToCount(mPointerLayoutId);
}2.5、实现背景圆色彩随扇形角度变动
把圆形控件拆成3600°，每一个角度对应控件一种具体色彩值，那么如何计算特定角度他具体的色彩值呢？
参考属性动画中的变色动画android.animation.ArgbEvaluator实现形式，计算两个色彩中具体某一个点的色彩值形式如下
public Object evaluate(float fraction, Object startValue, Object endValue) {
int startInt = (Integer) startValue;
float startA = ((startInt >> 24) & 0xff) / 255.0f;
float startR = ((startInt >> 16) & 0xff) / 255.0f;
float startG = ((startInt >> 8) & 0xff) / 255.0f;
float startB = ( startInt & 0xff) / 255.0f;
int endInt = (Integer) endValue;
float endA = ((endInt >> 24) & 0xff) / 255.0f;
float endR = ((endInt >> 16) & 0xff) / 255.0f;
float endG = ((endInt >> 8) & 0xff) / 255.0f;
float endB = ( endInt & 0xff) / 255.0f;
// convert from sRGB to linear
startR = (float) Math.pow(startR, 2.2);
startG = (float) Math.pow(startG, 2.2);
startB = (float) Math.pow(startB, 2.2);
endR = (float) Math.pow(endR, 2.2);
endG = (float) Math.pow(endG, 2.2);
endB = (float) Math.pow(endB, 2.2);
// compute the interpolated color in linear space
float a = startA + fraction * (endA - startA);
float r = startR + fraction * (endR - startR);
float g = startG + fraction * (endG - startG);
float b = startB + fraction * (endB - startB);
// convert back to sRGB in the [0..255] range
a = a * 255.0f;
r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;
return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
}控件中总共有四个色彩段，3600/4=900，所以 fraction = progressValue % 900 / 900;而后判断以后的角度位于第几段色彩值中，通过android.animation.ArgbEvaluator.evaluate(float fraction, Object startValue, Object endValue)就能回去具体的色彩值
大抵实现过程如下
private ProgressParameter getProgressParameter(float progressValue) {
float fraction = progressValue % 900 / 900;
if (progressValue < 900) {
//第一个色彩段
mParameter.setInsideColor(evaluate(fraction, insideColor1, insideColor2));
mParameter.setOutsizeColor(evaluate(fraction, outsizeColor1, outsizeColor2));
mParameter.setProgressColor(evaluate(fraction, progressColor1, progressColor2));
mParameter.setPointColor(evaluate(fraction, pointColor1, pointColor2));
mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor1, bgCircleColor2));
mParameter.setIndicatorColor(evaluate(fraction, indicatorColor1, indicatorColor2));
} else if (progressValue < 1800) {
//第二个色彩段
mParameter.setInsideColor(evaluate(fraction, insideColor2, insideColor3));
mParameter.setOutsizeColor(evaluate(fraction, outsizeColor2, outsizeColor3));
mParameter.setProgressColor(evaluate(fraction, progressColor2, progressColor3));
mParameter.setPointColor(evaluate(fraction, pointColor2, pointColor3));
mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor2, bgCircleColor3));
mParameter.setIndicatorColor(evaluate(fraction, indicatorColor2, indicatorColor3));
} else if (progressValue < 2700) {
//第三个色彩段
mParameter.setInsideColor(evaluate(fraction, insideColor3, insideColor4));
mParameter.setOutsizeColor(evaluate(fraction, outsizeColor3, outsizeColor4));
mParameter.setProgressColor(evaluate(fraction, progressColor3, progressColor4));
mParameter.setPointColor(evaluate(fraction, pointColor3, pointColor4));
mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor3, bgCircleColor4));
mParameter.setIndicatorColor(evaluate(fraction, indicatorColor3, indicatorColor4));
} else {
//第四个色彩段
mParameter.setInsideColor(evaluate(fraction, insideColor4, insideColor5));
mParameter.setOutsizeColor(evaluate(fraction, outsizeColor4, outsizeColor5));
mParameter.setProgressColor(evaluate(fraction, progressColor4, progressColor5));
mParameter.setPointColor(evaluate(fraction, pointColor4, pointColor5));
mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor4, bgCircleColor5));
mParameter.setIndicatorColor(evaluate(fraction, indicatorColor4, indicatorColor5));
}
return mParameter;
}三、跳动数字动画实现
3.1、属性动画+2个TextView实现数字高低切换动画
实现数字切换动画，本来打算用RecycleView实现，然而思考到动效上未来可能面临UI小姐姐各种骚操作，所以最终决定就用两个TextView做高低translation动画，这样可控性高，对View执行属性动画也简略
NumberView应用FrameLayout包裹两个TextView，widget_progress_number_item_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tv_number_one"
style="@style/progress_text_font"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="0dp"
android:text="0"
android:textColor="@android:color/white" />
<TextView
style="@style/progress_text_font"
android:id="@+id/tv_number_tow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="1"
android:textColor="@android:color/white" />
</FrameLayout>而后通过属性动画管制两个TextView高低切换
mNumberAnim = ValueAnimator.ofFloat(0F, 1F);
mNumberAnim.setDuration(400);
mNumberAnim.setInterpolator(new OvershootInterpolator());
mNumberAnim.setRepeatCount(0);
mNumberAnim.setRepeatMode(ValueAnimator.RESTART);
mNumberAnim.addUpdateListener(animation -> {
float value = (float) animation.getAnimatedValue();
if (UP_OR_DOWN_MODE == UP_ANIMATOR_MODE) {
//数字变大，向下挪动
mTvFirst.setTranslationY(-mHeight * value);
mTvSecond.setTranslationY(-mHeight * value);
} else {
//数字变小，向上挪动
mTvFirst.setTranslationY(mHeight * value);
mTvSecond.setTranslationY(-2 * mHeight + mHeight * value);
}
});这样NumberView就能实现一位数字的变动是高低切换动画，具备个十百位还有时钟冒号的通过容器布局AnimNumberView组合布局的形式实现示意工夫和个十百位数
四、我的项目源码
博客只是大抵讲了实现思路，具体实现请浏览源码 https://github.com/DaLeiGe/An…
原文链接：https://juejin.cn/post/698407…
文末
您的点赞珍藏就是对我最大的激励！
欢送关注我，分享Android干货，交换Android技术。
对文章有何见解，或者有何技术问题，欢送在评论区一起留言探讨！
发表回复