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. 代码地址

    下载源码地址