Android 绘制加载中的动画

最新推荐文章于 2025-04-28 00:15:00 发布

原创

最新推荐文章于 2025-04-28 00:15:00 发布

· 629 阅读

1 ·

版权

文章标签：

#android #animation #canvas #kotlin #android studio

本文介绍了如何在Android中创建一个加载动画，包括新建继承自View的类来绘制小球和文字，通过attr.xml设置颜色，计算小球的弹跳高度，记录小球位置，并详细解释了弹跳动画的计算过程。提供了完整的自定义动画类代码，以及在XML布局中的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先展示实现后的效果：
在这里插入图片描述
1.首先，先new一个类继承自view，我们需要绘制出一个小球，以及绘制出文字，我们分开使用俩个画笔

class LoadingDialog : View {
   

    //球的画笔
    private var ballPaint: Paint? = null
    //文字的画笔
    private var textPaint: Paint? = null
     //字体大小
    private var textSize = 40F
    //球的直径 = 文字大小的三分之一
    private var circleRadius: Float = 0F
    }

2.为了让小球和文字的颜色可以直接在xml中更改，我们需要在values中新建一个attr.xml文件；

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LoadingDialog">
        <attr name="textSize" format="dimension"/>   <!--文字大小-->
        <attr name="textColor" format="color"/>      <!--文字颜色-->
        <attr name="ballColor" format="color"/>		 <!--球的颜色-->
    </declare-styleable>
</resources>

3.我们需要在LoadingDialog 的构造函数中去获取他们的值；

 @SuppressLint("Recycle")
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
   
        val a = context.obtainStyledAttributes(attrs, R.styleable.LoadingDialog)

        //设置球的画笔
        ballPaint = Paint()
        ballPaint!!.color = a.getColor(R.styleable.LoadingDialog_ballColor, Color.GREEN)
        //设置文字的画笔
        textPaint = Paint()
        textPaint!!.color = a.getColor(R.styleable.LoadingDialog_textColor, Color.GREEN)
        textPaint!!.textSize = a.getDimension(R.styleable.LoadingDialog_textSize, textSize)
        //记录文字大小，默认为40
        textSize = textPaint!!.textSize
        //计算出球的直径：球的直径 = 文字大小的三分之一
        circleRadius = textSize / 3
    }

4.计算出小球的弹跳高度

//小球弹跳的高度
    private var jumpY = 0F
    
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
   
        super.onLayout(changed, left, top, right, bottom)
        //弹跳高度 = 控件的高度 - 文字的高度
        jumpY = height - textSize
    }

5.新建一个记录小球x,y位置的类

data class Point(var x: Float, var y: Float)

6.绘制小球以及文本，制作动画

  //记录当前的小球的位置
    private var currentPoint: Point? = null

  override fun onDraw(canvas: Canvas?) {
   
        super.onDraw(canvas)
        if (currentPoint == null) {
   
            currentPoint = Point(0F, jumpY)
            drawCircle

最低0.47元/天解锁文章