背景:
需要一款扫描商品的动效,类似微信二维码扫描的效果,本来觉得还是挺容易的,在一个框里面加一张图片,再加上 上下动画效果就可以实现了,但UI设计的是一个圆形,里面有上下扫描的效果,而且背景是透明的,所以之前的方案不能满足需要。
实现方案:
方案1:大家都能想到的,让设计提供多张图,然后 帧动画实现就可以了。
方案1 只能
作为我的备选方案,因为图片太多,而且都是高清的,对于一般的安卓机器而言,内存消耗是一笔不小的开销。
方案2:自定义控件,都熟悉的onMeasuer,onLayout,onDraw ,这里我就简单的实现了onDraw方法,主要思路是:
- 画一个圆(画笔属性什么的自己根据项目需要 定义哈,可以添加一个边框什么的);
- 下面是关键点,在圆里根据扫描进度画弧度,具体的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</