Android 一个条形动画加载效果

最新推荐文章于 2025-10-14 00:15:00 发布

原创

最新推荐文章于 2025-10-14 00:15:00 发布 · 990 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#android #动画 #自定义View

本文详细介绍了一种自定义的Android动画加载视图的实现过程，包括如何设置线条的颜色、宽度、高度、圆角和数量，以及动画的速度和幅度。通过定义属性并在XML中设置，实现了流畅的动画效果。

效果

完整代码，复制即用，请拉到底部 效果图
可以对颜色、线条数、动画幅度、宽度等进行设置，上图只是一个基本的效果~

思路

先确定了想实现的效果是这样的：
整体分为中、高、低三种线，计算出三种线条的位置进行同步绘制
确定变化效果是每条线逐减，低到设定的最低值开始逐增，增到最高值再减

实现

定义属性

    //属性
    private int lineSpace;  //两条线之间的宽度
    private float changeStep; //动画幅度
    private int lineCount;  //堆数，每堆5根线条
    private int lineWidth;  //线宽度
    private int changeSpeed;    //变化速度  次/秒
    private int color;  //颜色
    private int width;  //通过动态计算得到
    private int maxHeight;  //最高高度
    private int minHeight;  //最低高度
    private float radius;   //线条弧度

设想是能自主控制线宽、线高、圆角、颜色、数量（每5个一堆）、动画幅度，用上面的参数基本能实现了
我定义了attr文件，用来在xml里面直接设置：

    <declare-styleable name="LineLoadingView">
        <attr name="lineWidth" format="dimension" />
        <attr name="changeStep" format="float" />
        <attr name="lineSpace" format="dimension" />
        <attr name="lineCount" format="integer" />
        <attr name="lineColor" format="color" />
        <attr name="lineMaxHeight" format="dimension" />
        <attr name="lineMinHeight" format="dimension" />
        <attr name="lineRadius" format="dimension" />
        <attr name="changeSpeed" format="integer"/>
    </declare-styleable>

changeSpeed单位是次/s ，每次变化幅度为changeStep* lineMaxHeight，changeStep是变化幅度，float取值

初始化这些属性：

        lineCount = typedArray.getInteger(R.styleable.LineLoadingView_lineCount, 1);//默认1
        lineWidth = (int) typedArray.getDimension(R.styleable.LineLoadingView_lineWidth, dip2px(3));    //默认3
        lineSpace = (int) typedArray.getDimension(R.styleable.LineLoadingView_lineSpace, dip2px(7));    //默认7
        color = typedArray.getColor(R.styleable.LineLoadingView_lineColor, Color.parseColor("#FFFFE105"));
        maxHeight = (int) typedArray.getDimension(R.styleable.LineLoadingView_lineMaxHeight, dip2px(50));
        minHeight = (int) typedArray.getDimension(R.styleable.LineLoadingView_lineMinHeight, dip2px(10));
        changeStep = typedArray.getFloat(R.styleable.LineLoadingView_changeStep, 0.1f) * maxHeight;    //默认0.1
        changeSpeed = typedArray.getInt(R.styleable.LineLoadingView_changeSpeed, dip2px(6));
        radius = typedArray.getDimension(R.styleable.LineLoadingView_lineRadius, dip2px(3));

        width = lineCount * 4 * (lineSpace + lineWidth) + lineWidth;

绘制图像
因为有3种高度的线，因此每个中间值需要三个，定义如下：

    //draw用到的中间参数
    private int tempHeight = 0; // 全局高度
    private int minTempHeight;  //最低线条的高度记录(0,4)
    private boolean minLowing;
    private int middleTempHeight;   //中等高度线条的高度记录（1,3）
    private boolean middleLowing;
    private int maxTempHeight;  //最高线条的高度记录（2）
    private boolean maxLowing;
    private List<Integer> minList = new ArrayList<>();
    private List<Integer> middleList = new ArrayList<>();
    private List<Integer><