仿支付宝咻一咻效果

这是一个仿支付宝咻一咻的效果

看上面的示意图，其实就是一些同心圆的绘制，肯定就要自定义view，在onDraw()方法中进行绘制，调用canvas.drawCircle()可以绘制圆，然后使用Handler及Runnable发送消息调用invalidate()不停的进行重绘，在重绘的时候不停的改变波纹的半径，同时根据波纹半径和画布大小的一半减去bitmap的宽度的一半的比值去计算透明度；中心点的图片是通过调用canvas.drawBitmap()方法将本地的资源图片绘制上去；

下面就是主要实现代码：

public class ApliyView extends View {
    //画布的宽度
    private int width;
    //画布的高度
    private int height;
    //波纹的半径
    private int raudis;
    private Bitmap mBitmap;
    private Paint mPaint;
    //Bitmap的宽度
    private int bitmapWidth;
    //Bitmapde的高度
    private int bitmapHeight;
    private Handler handler = new Handler();
    //绘制波纹的个数
    private List<Integer> list = new ArrayList<>();
    private long current = System.currentTimeMillis();
    private Runnable runable = new Runnable() {
        @Override
        public void run() {
            //刷新重绘
            invalidate();
            //隔一段时间会添加一个波纹
            if (System.currentTimeMillis() - current > 500) {
                list.add(bitmapWidth / 2);
                //重置当前时间
                current = System.currentTimeMillis();
            }
            //改变半径的值
            for (int i = 0; i < list.size(); i++) {
                //通过这里可以修改波纹的半径的递增值
                list.set(i, list.get(i) + 4);
            }
            //性能优化，控制波纹的数量
            Iterator<Integer> iterator = list.iterator();
            //使用list迭代器进行移除
            while (iterator.hasNext()) {
                Integer next = iterator.next();
                //如果波纹的半径大于或等于画布大小的一半就将其从集合中移除掉
                if (next >= width / 2) {
                    if (list.contains(next)) {
                        //移除波纹  注意使用迭代器进行移除 否则会报ConCurrentModificationException
                        iterator.remove();
                    }
                }
            }
            handler.postDelayed(runable, 16);
        }
    };

    public ApliyView(Context context) {
        this(context, null);
    }

    public ApliyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ApliyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        //实例化BitMap
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.apliy_view_icon);
        //初始化画笔
        mPaint = new Paint();
        //设置抗锯齿
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#155c7c"));
        mPaint.setStyle(Paint.Style.FILL);
        //获取BitMap的宽高
        bitmapWidth = mBitmap.getWidth();
        bitmapHeight = mBitmap.getHeight();
        //初始化波纹的半径  初始化的波纹半径就是bitmap宽度的一半
        raudis = bitmapWidth / 2;
        //添加到集合中
        list.add(raudis);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获取画布的宽高
        width = canvas.getWidth();
        height = canvas.getHeight();
        int left = width / 2 - bitmapWidth / 2;
        int top = height / 2 - bitmapHeight / 2;
        for (int i = 0; i < list.size(); i++) {
            //绘制波纹  list.size是多大就绘制多少个波纹
            //同时改变透明度
            int r = list.get(i);
            //设置画笔的透明度 
            //(r - bitmapWidth / 2) 就是半径所占的份数   ((width - bitmapWidth) / 2))  就是去掉bitmap宽度后剩余的宽度
            mPaint.setAlpha(177 - 177 * (r - bitmapWidth / 2) / ((width - bitmapWidth) / 2));
            canvas.drawCircle(width / 2, height / 2, r, mPaint);
        }
        //先将图片绘制到画布中
        canvas.drawBitmap(mBitmap, left, top, null);
        super.onDraw(canvas);
    }

    public void onStart() {
        //进行绘制
        handler.post(runable);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.payview.MainActivity">

    <com.payview.ApliyView
        android:id="@+id/apliy_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

public class MainActivity extends AppCompatActivity {
    private ApliyView apliyView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        apliyView = (ApliyView) findViewById(R.id.apliy_view);
        apliyView.onStart();
    }
}

源码地址:
https://pan.baidu.com/s/1kURZSgf