自定义View之手写Loading动效

这是一个很简单的动画效果,使用属性动画即可实现,希望对读者学习动画能达到抛砖引玉的效果

一.自定义动画效果——Loading效果

如上是我们需要做的一个Loading动画。Loading效果是很常见的一种动画,最简单的实现让设计画个动态图即可,或者画个静态图然后使用帧动画也可以实现。但是今天我们用纯代码实现,不用任何图片资源。
在这里插入图片描述

大致思路

我们自定义一个View,继承View类,然后画两个不同半径的弧形,转动不同的角度即可实现。

绘制两个不同半径的弧形

首先初始化外圆和内园的Recf();

  private RectF mOuterCircleRectF = new RectF();
    private RectF mInnerCircleRectF = new RectF();

然后在onDraw方法绘制圆弧:

        //获取View的中心
        float centerX = getWidth() / 2;
        float centerY = getHeight() / 2;

        if (lineWidth > centerX) {
            throw new IllegalArgumentException("lineWidth值太大了");
        }
        //外圆半径,因为我们的弧形是有宽度的,所以计算半径的时候应该把这部分减去,不然会有切割的效果
        float outR = centerX - lineWidth;

        //小圆半径
        float inR = outR * 0.6f - lineWidth;
        //设置弧形的距离上下左右的距离,也就是包围园的矩形。
        mOuterCircleRectF.set(centerX - outR, centerY - outR, centerX + outR, centerY + outR);
        mInnerCircleRectF.set(centerX - inR, centerY - inR, centerX + inR, centerY + inR);
        //绘制外圆
        canvas.drawArc(mOuterCircleRectF, mRotateAngle % 360, OUTER_CIRCLE_ANGLE, false, mStrokePaint);
        //绘制内圆
        canvas.drawArc(mInnerCircleRectF, 270 - mRotateAngle % 360, INTER_CIRCLE_ANGLE, false, mStrokePaint);

代码很简单,就像注释一样:

  • 取整个loadView的宽高,然后计算loadview的中心
  • 利用中心计算外圆和内园的半径,因为圆弧的弧边有宽度&
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值