Android自定义加载动画-画两个圈圈

移动开发 AndroidZLoading
Zyao89 2017年3月25日星期六 16:01

Android自定义动画系列四,今天来分享第四个自定义Loading动画(DoubleCircleBuilder),同样的先起了一个名字叫 画两个圈圈 ,还是老规矩先介绍,后上图。

实现效果在最后,GIF有点大,手机流量请三思。

# 介绍

首先依旧是声明,做这些动画的初衷是为了学习和分享,所以希望大家可以指点错误,让我更好的进步。从这里起,我做一个系列的加载动画(截止时间:我放弃的时候)。
上一个动画链接:Android自定义加载动画-旋转的叶子

# 正文

今天分享的这个动画很简单,适合用于基本的等待界面,或者视频加载界面,部分代码如下:

首先还是初始化:

@Override
    protected void initParams(Context context)
    {
        //最大尺寸
        float outR = getAllSize();
        //小圆尺寸
        float inR = outR * 0.6f;
        //初始化画笔
        initPaint(inR * 0.4f);
        //旋转角度
        mRotateAngle = 0;
        //圆范围
        mOuterCircleRectF = new RectF();
        mOuterCircleRectF.set(getViewCenterX() - outR, getViewCenterY() - outR, getViewCenterX() + outR, getViewCenterY() + outR);
        mInnerCircleRectF = new RectF();
        mInnerCircleRectF.set(getViewCenterX() - inR, getViewCenterY() - inR, getViewCenterX() + inR, getViewCenterY() + inR);

    }

    /**
     * 初始化画笔
     */
    private void initPaint(float lineWidth)
    {
        mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mStrokePaint.setStyle(Paint.Style.STROKE);
        mStrokePaint.setStrokeWidth(lineWidth);
        mStrokePaint.setColor(Color.WHITE);
        mStrokePaint.setDither(true);
        mStrokePaint.setFilterBitmap(true);
        mStrokePaint.setStrokeCap(Paint.Cap.ROUND);
        mStrokePaint.setStrokeJoin(Paint.Join.ROUND);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

之所以起名字叫画两个圈圈,就是因为,这个动画就是只画了两个圈圈,嘿嘿😁。一个270度的外圆,一个90度的内圆。绘制如下:


    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        //外圆
        canvas.drawArc(mOuterCircleRectF, mRotateAngle % 360, OUTER_CIRCLE_ANGLE, false, mStrokePaint);
        //内圆
        canvas.drawArc(mInnerCircleRectF, 270 - mRotateAngle % 360, INTER_CIRCLE_ANGLE, false, mStrokePaint);
        canvas.restore();
    }

1
2
3
4
5
6
7
8
9
10
11
12

最后是旋转动画,修改每次绘制的角度。


    @Override
    protected void computeUpdateValue(@FloatRange(from = 0.0, to = 1.0) float animatedValue)
    {
        mRotateAngle = (int) (360 * animatedValue);
    }

1
2
3
4
5
6
7

# 总结

小伙伴们,要是想看更多细节,可以前往文章最下面的Github链接,如果大家觉得ok的话,希望能给个喜欢,最渴望的是在Github上给个star。谢谢了。

如果大家有什么更好的方案,或者想要实现的加载效果,可以给我留言或者私信我,我会想办法实现出来给大家。谢谢支持。

# 演示

动画演示图

Github:zyao89/ZCustomView

作者:Zyao89;转载请保留此行,谢谢;

个人博客:https://zyao89.cn

作者: Zyao89; 转载请保留
版权声明: 自由转载-非商用-非衍生-保持署名
上次编辑时间: 2020年8月7日星期五 16:07