androidの高仿支付宝扫描动画效果

androidの高仿支付宝扫描动画效果
1. 扫描动画效果，效果如图所示



2. 通过效果图，可以看到最边缘的一个圆环，顺时针转动，内部出现辐射光圈。
先看代码，创建一个Activity.

public class MainActivity extends Activity {
private ImageView iv = null;
private RadiationView rv = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv = (ImageView) findViewById(R.id.iv_rotate);//边缘圆环
rv = (RadiationView) findViewById(R.id.rv);
rv.setMinRadius(70);//辐射半径
rv.startRadiate();//开始辐射
Animation anim = AnimationUtils.loadAnimation(this,
R.anim.rotate_circle_anim);
iv.startAnimation(anim);//开始动画
}
}

然后，是对应的xml 文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/homepage_disk_button_orange_normal" />
<ImageView
android:id="@+id/iv_rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/homepage_disk_orange_normal" />
<com.kince.radiationview.RadiationView
android:id="@+id/rv"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_gravity="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="扫描"
android:textColor="#ffffff"
android:textSize="30sp" />
</FrameLayout>
</LinearLayout>

public class RadiationView extends View {
private Paint mPaint = new Paint();
private int mColor = 0x3f990e;
private int mAlpha = 60;
private Handler mHandler = null;
private static final int MESSAGE_DRAW = 0;
private static final String TAG = "RadiationView";
private int width;
private int height;
private int speed = 30;
private int maxRadius = 100;
private int centerX;
private int centerY;
private int minRadius = 70;
private int radius = minRadius;
private boolean isStarted = false;

public RadiationView(Context context) {
super(context);
System.out.println("blueberry_RadiationView1");
init();
}
public RadiationView(Context context, AttributeSet attrs) {
super(context, attrs, 0);
System.out.println("blueberry_RadiationView2");
init();
}

public void startRadiate() {
System.out.println("blueberry_startRadiate");
isStarted = true;
mHandler.sendEmptyMessage(MESSAGE_DRAW);
}

private void init() {
System.out.println("blueberry_init");
mPaint = new Paint();
mPaint.setStrokeWidth(1);
mPaint.setColor(mColor);
mPaint.setAlpha(mAlpha);
mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
if (msg.what == MESSAGE_DRAW) {
invalidate();
if (isStarted) {
sendEmptyMessageDelayed(MESSAGE_DRAW, speed);
}
}
}
};
}

@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
super.onLayout(changed, left, top, right, bottom);
System.out.println("blueberry_onlayout");
width = this.getWidth();
height = this.getHeight();
if (width <= 0 || height <= 0) {
throw new RuntimeException("size illegal");
}
centerX = width / 2;
centerY = height / 2;
maxRadius = (width > height) ? height / 2 : width / 2;
System.out.println("blueberry_maxRadius="+maxRadius);
Log.i(TAG, "MAX" + maxRadius);
if (maxRadius < 70) {
throw new RuntimeException("size too small");
}
}

@Override
protected void onDraw(Canvas canvas) {
System.out.println("blueberry_ondraw");
mPaint.setColor(mColor);
mPaint.setAlpha(mAlpha);
if (radius <= 0) {
return;
}
if (radius > maxRadius) {
radius = minRadius;
}
canvas.save();
canvas.drawCircle(centerX, centerY, radius, mPaint);
canvas.restore();
radius += 1;
}

@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

public void setColor(int color) {
this.mColor = color;
}

public void setSpeed(int speed) {
this.speed = speed;
}

public void setMinRadius(int radius) {
this.minRadius = radius;
}
}

根据xml布局，采用Framelayout，定义了一个 <com.kince.radiationview.RadiationView，

用来显示辐射半径。在MainActivity中，设置了辐射最小半径，然后启动，

3. 代码地址
下载源码地址