Android 自定义圆形扫描动效

背景:

需要一款扫描商品的动效,类似微信二维码扫描的效果,本来觉得还是挺容易的,在一个框里面加一张图片,再加上 上下动画效果就可以实现了,但UI设计的是一个圆形,里面有上下扫描的效果,而且背景是透明的,所以之前的方案不能满足需要。

实现方案:

方案1:大家都能想到的,让设计提供多张图,然后 帧动画实现就可以了。

方案1 只能 作为我的备选方案,因为图片太多,而且都是高清的,对于一般的安卓机器而言,内存消耗是一笔不小的开销。



方案2:自定义控件,都熟悉的onMeasuer,onLayout,onDraw   ,这里我就简单的实现了onDraw方法,主要思路是:

  1. 画一个圆(画笔属性什么的自己根据项目需要 定义哈,可以添加一个边框什么的);
  2. 下面是关键点,在圆里根据扫描进度画弧度,具体的Cavans方法是 
    drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
            @NonNull Paint paint) 第一个参数oval是弧度的矩形范围,第二个startAngle是弧度的起始角度,第三个
    startAngle是弧度的结束角度,第四个useCenter标记是否用圆心,如果用的话,画出来的就是一个扇形,项目中false,第五个
    paint就是你所定义的画笔了,其中弧度的算法需要用到Math类中的正弦弧度算法asin(double),计算出弧度之后,在抓换成角度 即弧度*180/Math.PI,或者直接用Math.doDegrees直接计算到角度
     利用上面计算得到的角度,算得扫过的角度,就可以了 
  
    3.利用Handler 定时定量增加扫描线的高度,然后重新绘制,一个简单的扫描效果就出现了。


    实例代码如下:(注:代码中通过设置显示隐藏,来控制开始还是结束绘制)
    
public class CircleScanView extends View {

    int width, heigth;//控件宽高
    float radius;//最小圆半径
    float ringWidth;//圆边框宽度
    int centerColor;
    float circlePointX, circlePointY;//圆心x,y

    public CircleScanView(Context context) {
        super(context);
    }

    public CircleScanView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        getAttr(context, attrs);
    }

    public CircleScanView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        getAttr(context, attrs);
    }

    private void getAttr(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundScanView</
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值