Android实现支付宝AR扫描动画效果
作者：哒哒哈哈丶
这篇文章主要为大家详细介绍了Android实现支付宝AR扫描动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
支付宝AR扫描效果动画实现，具体内容如下
之前一个网友说想要一个支付宝扫描动画的效果demo,所以又花了点时间做了下这个东西,先看效果图
说一下实现的思路,如图中最外围的蓝色的是用两个相距180°的圆弧实现的,再往里又是两个红色的圆弧再往里面是一个红色的圆,最里面的白色的是由4个间隔的白色圆弧组成的,其实说明白的就是简单的图形的堆积.然后通过控制绘制圆弧的起始角度进行旋转的动画.扫描的红色线条是一张渐变的图片,通过平移动画实现扫描的效果.
这个自定义View 的代码如下:
package cn.com.hadon.scanner;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by Mr.Wang on 2017/5/8.
*/
public class ScanView extends View {
private Paint blueCirclePaint;//蓝色圈的画笔
private Paint redCirclePaint;//红色圈的画笔
private Paint whiteCirclePaint;//白色圈的画笔
public static final int STATE_READY = 1;
public static final int STATE_SCANING = 2;
public static final int STATE_SUCCESS = 3;
//定义圆弧的宽度
private static final int BLUE_CIRCLE_BORDER_WIDTH = 8;
private static final int INSIDER_RED_CIRCLE_BORDER_WIDTH = 20;
private static final int OUTSIDER_CIRCLE_BORDER_WIDTH = 20;
private static final int WHITE_CIRCLE_BORDER_WIDTH = 20;
private int minLength;//中心最大圆的直径
private int radius;//中心最大圆的半径
private int centerX;//中心点X坐标
private int centerY;//中心点Y坐标
private Bitmap scanerbitmap;//条形扫描图片
private int curState = STATE_SCANING;//初始状态
public ScanView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
//初始化一些变量
scanerbitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.scaner);
blueCirclePaint = new Paint();
redCirclePaint = new Paint();
whiteCirclePaint = new Paint();
blueCirclePaint.setColor(Color.BLUE);
blueCirclePaint.setAntiAlias(true);
blueCirclePaint.setStyle(Paint.Style.STROKE);
blueCirclePaint.setStrokeWidth(BLUE_CIRCLE_BORDER_WIDTH);
redCirclePaint.setColor(Color.RED);
redCirclePaint.setAntiAlias(true);
redCirclePaint.setStyle(Paint.Style.STROKE);
redCirclePaint.setStrokeWidth(INSIDER_RED_CIRCLE_BORDER_WIDTH);
whiteCirclePaint.setColor(Color.WHITE);
whiteCirclePaint.setAntiAlias(true);
whiteCirclePaint.setStyle(Paint.Style.STROKE);
whiteCirclePaint.setStrokeWidth(WHITE_CIRCLE_BORDER_WIDTH);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
centerX = width / 2;
centerY = height / 2;
//获取直径和半径以及中心带你坐标方便后面的计算
minLength = Math.min(width, height);
radius = minLength / 2;
}
/**
* 公开方法设置当前的状态值
* @param state
*/
public void setState(int state) {
this.curState = state;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.TRANSPARENT);
switch (curState) {
case STATE_READY:
drawWhiteCircle(canvas);
drawInsiderRedCircle(canvas);
drawOutsiderRedCircle(canvas);
break;
case STATE_SCANING:
drawWhiteCircle(canvas);
drawBlueCircle(canvas);
drawInsiderRedCircle(canvas);
drawOutsiderRedCircle(canvas);
drawScaner(canvas);
break;
case STATE_SUCCESS:
drawWhiteCircle(canvas);
drawInsiderRedCircle(canvas);
break;
}
updateValues();
invalidate();
}
private int blueStartAngle = 0;//蓝色圆圈的开始角度
private int blueCircleSpace = BLUE_CIRCLE_BORDER_WIDTH;//蓝色弧距离最短边的距离用于计算自身的半径用
private static final int BLUE_CIRCLE_SWEP_ANGLE = 20;//蓝色弧扫过的角度
/**
* 绘制蓝色弧
* @param canvas
*/
private void drawBlueCircle(Canvas canvas) {
canvas.drawArc(centerX - radius + blueCircleSpace, blueCircleSpace, centerX + radius - blueCircleSpace, minLength - blueCircleSpace, blueStartAngle, BLUE_CIRCLE_SWEP_ANGLE, false, blueCirclePaint);
canvas.drawArc(centerX - radius + blueCircleSpace, blueCircleSpace, centerX + radius - blueCircleSpace, minLength - blueCircleSpace, blueStartAngle + 180, BLUE_CIRCLE_SWEP_ANGLE, false, blueCirclePaint);
}
/**
* 根据当前的状态来更改变量达到动画的效果
*/
private void updateValues() {
switch (curState) {
case STATE_READY:
if (insideRedCircleSpace >= BLUE_CIRCLE_BORDER_WIDTH + INSIDER_RED_CIRCLE_BORDER_WIDTH+ OUTSIDER_CIRCLE_BORDER_WIDTH) {
insideRedCircleSpace -= 2;
}
whiteStartAngle = 5 / 2;
outsiderRedCircleStartAndle = -OUTSIDER_RED_CIRCLE_SWEP_ANGLE / 2;
break;
case STATE_SCANING:
if (insideRedCircleSpace >= BLUE_CIRCLE_BORDER_WIDTH + INSIDER_RED_CIRCLE_BORDER_WIDTH+ OUTSIDER_CIRCLE_BORDER_WIDTH) {
insideRedCircleSpace -= 2;
}
blueStartAngle += 4;
outsiderRedCircleStartAndle += 2;
if (is2Max) {
if (whiteStartAngle == 30) {
is2Max = false;
} else {
whiteStartAngle++;
}
} else {
if (whiteStartAngle == -30) {
is2Max = true;
} else {
whiteStartAngle--;
}
}
scanerY += 6;
if (scanerY > minLength) {
scanerY = 0;
}
break;
case STATE_SUCCESS:
whiteStartAngle = 5 / 2;
if (insideRedCircleSpace < whiteCircleSpace + INSIDER_RED_CIRCLE_BORDER_WIDTH) {
insideRedCircleSpace += 2;
}
break;
}
}
private int insideRedCircleSpace = BLUE_CIRCLE_BORDER_WIDTH + INSIDER_RED_CIRCLE_BORDER_WIDTH + OUTSIDER_CIRCLE_BORDER_WIDTH;
private int outsiderRedCircleSpace = BLUE_CIRCLE_BORDER_WIDTH + INSIDER_RED_CIRCLE_BORDER_WIDTH + OUTSIDER_CIRCLE_BORDER_WIDTH / 2;
private static final int OUTSIDER_RED_CIRCLE_SWEP_ANGLE = 30;
private int outsiderRedCircleStartAndle = -OUTSIDER_RED_CIRCLE_SWEP_ANGLE / 2;
/**
* 绘制内部的红色圆圈
* @param canvas
*/
private void drawInsiderRedCircle(Canvas canvas) {
canvas.drawCircle(centerX, centerY, radius - insideRedCircleSpace, redCirclePaint);
}
/**
* 绘制外部红色的两个弧
* @param canvas
*/
private void drawOutsiderRedCircle(Canvas canvas) {
canvas.drawArc(centerX - radius + outsiderRedCircleSpace, outsiderRedCircleSpace, centerX + radius - outsiderRedCircleSpace, minLength - outsiderRedCircleSpace, outsiderRedCircleStartAndle, OUTSIDER_RED_CIRCLE_SWEP_ANGLE, false, redCirclePaint);
canvas.drawArc(centerX - radius + outsiderRedCircleSpace, outsiderRedCircleSpace, centerX + radius - outsiderRedCircleSpace, minLength - outsiderRedCircleSpace, outsiderRedCircleStartAndle + 180, OUTSIDER_RED_CIRCLE_SWEP_ANGLE, false, redCirclePaint);
}
private int whiteStartAngle = 0;
private static final int WHITE_CIRCLE_SWEP_ANGLE = 85;
private int whiteCircleSpace = BLUE_CIRCLE_BORDER_WIDTH + INSIDER_RED_CIRCLE_BORDER_WIDTH + OUTSIDER_CIRCLE_BORDER_WIDTH + WHITE_CIRCLE_BORDER_WIDTH;
private RectF whiteCircleRect;
private boolean is2Max = true;
/**
* 绘制白色的弧
* @param canvas
*/
private void drawWhiteCircle(Canvas canvas) {
if (whiteCircleRect == null) {
whiteCircleRect = new RectF(centerX - radius + whiteCircleSpace, whiteCircleSpace, centerX + radius - whiteCircleSpace, minLength - whiteCircleSpace);
}
canvas.drawArc(whiteCircleRect, whiteStartAngle, WHITE_CIRCLE_SWEP_ANGLE, false, whiteCirclePaint);
canvas.drawArc(whiteCircleRect, whiteStartAngle + 90, WHITE_CIRCLE_SWEP_ANGLE, false, whiteCirclePaint);
canvas.drawArc(whiteCircleRect, whiteStartAngle + 180, WHITE_CIRCLE_SWEP_ANGLE, false, whiteCirclePaint);
canvas.drawArc(whiteCircleRect, whiteStartAngle + 270, WHITE_CIRCLE_SWEP_ANGLE, false, whiteCirclePaint);
}
private int scanerY = 0;
/**
* 绘制扫描图片
* @param canvas
*/
private void drawScaner(Canvas canvas) {
int p1, p2, hw;
if (scanerY >= radius) {
p1 = (scanerY - radius) * (scanerY - radius);
} else {
p1 = (radius - scanerY) * (radius - scanerY);
}
p2 = radius * radius;
hw = (int) Math.sqrt(p2 - p1);
Rect rect = new Rect(centerX - hw, scanerY - 10, centerX + hw, scanerY + 10);
canvas.drawBitmap(scanerbitmap, null, rect, null);
}
}
下面是我偶读github地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。