高仿小米加载动画效果展示

发布时间：2023-03-23 13:31:31 所属栏目：教程来源：

导读：前言
首先看一下小米中的加载动画是怎么样的，恩恩～～～～虽然只是张图片，因为录制不上全部，很多都是刚一加载就成功了，一点机会都不提供给我，所以就截了一张图，他这个加载动画特点就是左面圆圈会一直转。

前言
首先看一下小米中的加载动画是怎么样的，恩恩～～～～虽然只是张图片，因为录制不上全部，很多都是刚一加载就成功了，一点机会都不提供给我，所以就截了一张图，他这个加载动画特点就是左面圆圈会一直转。

实现过程
这个没有难度，只是学会一个公式就可以，也就是已知圆心，半径，角度，求圆上的点坐标，算出来的结果在这个点绘制一个实心圆即可，下面是自定义Dialog，让其在底部现实，其中的View也是自定义的一个。

class MiuiLoadingDialog(context: Context) : Dialog(context) {
private var miuiLoadingView : MiuiLoadingView= MiuiLoadingView(context);
init {
setContentView(miuiLoadingView)
setCancelable(false)
}
override fun show() {
super.show()
val window: Window? = getwindow();
val wlp = window!!.attributes
wlp.gravity = Gravity.BottOM
window.setBackgroundDrawable( ColorDrawable(Color.TRANSPARENT));
wlp.width=WindowManager.LayoutParams.MATCH_PARENT;
window.attributes = wlp
}
}
下面是主要的逻辑，在里面，首先通过clipPath方法裁剪出一个上边是圆角的形状，然后绘制一个外圆，这是固定的。

中间的圆需要一个公式，如下。

x1 = x0 + r * cos(a * PI /180 )
y1 = y0 + r * sin(a * PI /180 )
x0、y0就是外边大圆的中心点，r是中间小圆大小，a是角度，只需要一直变化这个角度，得出的x1、y1通过drawCircle绘制出来即可。

高仿小米加载动画效果

class MiuiLoadingView @JvmOverloads constructor(
context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : View(context,attrs,defStyleAttr) {
//Dialog上面圆角大小
val CIRculaR: Float = 60f;
//中心移动圆位置
var rx: Float = 0f;
var ry: Float = 0f;
//左边距离
var MARGIN_LEFT: Int = 100;
//中心圆大小
var centerRadiusSize: Float = 7f;
var textPaint: Paint = Paint().apply {
textSize = 50f
color = Color.BLACK
}
var circlePaint: Paint = Paint().apply {
style = Paint.Style.stroke
strokeWidth = 8f
isAntiAlias = true
color = Color.BLACK
}
var centerCirclePaint: Paint = Paint().apply {
style = Paint.Style.FILL
isAntiAlias = true
color = Color.BLACK
}
var degrees = 360;
val TEXT = "正在加载中,请稍等";
var textHeight = 0;
init {
var runnable = object : Runnable {
override fun run() {
val r = 12;
rx = MARGIN_LEFT + r * Math.cos(degrees.todouble() * Math.PI / 180).toFloat()
ry =
((measuredHeight.toFloat() / 2) + r * Math.sin(degrees.todouble() * Math.PI / 180)).toFloat();
invalidate()
degrees += 5
if (degrees > 360) degrees = 0
postDelayed(this,1)
}
}
postDelayed(runnable,0)
var rect = Rect()
textPaint.getTextBounds(TEXT,TEXT.length,rect)
textHeight = rect.height()
}
override fun onMeasure(widthMeasureSpec: Int,heightMeasureSpec: Int) {
setMeasuredDimension(widthMeasureSpec,220);
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
var path = Path()
path.addRoundRect(
RectF(0f,0f,measuredWidth.toFloat(),measuredHeight.toFloat()),floatArrayOf(CIRculaR,CIRculaR,0f),Path.Direction.CW
);
canvas.clipPath(path)
canvas.drawColor(Color.WHITE)
canvas.drawCircle(
MARGIN_LEFT.toFloat(),measuredHeight.toFloat() / 2,35f,circlePaint
)
canvas.drawCircle(
rx,ry,centerRadiusSize,centerCirclePaint
)
canvas.drawText(TEXT,(MARGIN_LEFT + 80).toFloat(),((measuredHeight / 2)+(textHeight/2)).toFloat(),textPaint)
}
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!