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

androidの高仿支付宝扫描动画效果 1. 扫描动画效果，效果如图所示 2. 通过效果图，可以看到最边缘的一个圆环，顺时针转动，内部出现辐射光圈。先看代码，创建一个Activity.

public class MainActivity extends Activity {private ImageView iv = null;private RadiationView rv = null;@Overrideprotected 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);}}}};}@Overrideprotected 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");}}@Overrideprotected 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;}@Overrideprotected 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. 代码地址下载源码地址

更多相关文章

随机推荐